Design Threads-clone using MERN Stack for learning purpose
Frontend:
Backend:
Realtime Communication:
Cloud Storage: Cloudinary
- Clone this repo to your local machine using
(https://github.com/diksha0149/threads_clone.git)
Install npm dependencies using npm install
$ npm install
Set up a MongoDB database either locally or provision a free database with
MongoDB Atlas
Create a free
Cloudinary account
Create a
GitHub OAuth app
Create a .env file in the root directory
Set up required environment variables
PORT= // 500
MONGO_URI= // mongodb://localhost:27017/threads_clone
JWT_SECRET= // random string: j2390jf09kjsalkj4r93
CLOUDINARY_API_KEY= // Cloudinary API key
CLOUDINARY_API_SECRET= // Cloudinary API secret
CLOUDINARY_CLOUD_NAME= // Cloudinary cloud name
In the root directory run both the backend and the front end with the following command
$ npm run dev
The website should launch automatically, enjoy playing around 😄
- ✨ Login/Signup Functionality
- 🔐 Seamless Creation of Post contain either text/Img or both
- ❤️ Like/Unlike Posts
- 💬 Commenting on Posts for Interaction
- 🔗 Follow/Unfollow Capability for User Networking
- 📜 Dynamic Infinite Scroll for Posts
- 🔍 User-Friendly Search for Chat Participants
- 📝 Seamless Creation of New Chats
- 💬 Real-Time Messaging Between Users
Upcoming Features
- 📊 Comprehensive View of Followers/Following Lists
- 👍 Post Liked By Users Tracking
- 😄 Emoji Integration via Emoji Mart
- 🚪 Support for Email or Username-based Login
- 🔐 Seamless Profile and Password Management
- 🔄 Password Reset via Sendgrid Integration
- ❤️ Like/Unlike Posts/text with Double-tap feature
- 🕒 Status Indicators for Typing and Online Presence
- 📌 Save/Unsave Posts for Bookmarking
- 📤 Effortless Post-Sharing Functionality
- 🔍 Suggestions for User Connections
- 🔎 Intuitive Search for Users by Name or Username
Feel free to reach me through the below handles if you'd like to contact me.