Instagram MERN

Full-Stack Instagram Clone using MERN Stack and Socket.IO

Visit Now 🚀

🖥️ Tech Stack

Frontend:

Backend:

Realtime Communication:

Cloud Storage:

Cloud Storage: Cloudinary

Mail Service: Sendgrid

⚙️ How to Run the Project (Setup Instructions)

Follow the steps below to get the project running locally 👇

1️⃣ Clone the repository

git clone https://github.com/jigar-sable/instagram-mern.git
cd instagram-mern

2️⃣ Setup Backend

npm install

Before running the backend, go to:

backend/config/config.env.example

Rename this file to: config.env and update it with your environment variables (like MongoDB URI, JWT secret, etc.).

Then start the backend server:

npm run dev

3️⃣ Setup Frontend

From the root directory, navigate to the frontend folder:

cd frontend

Install dependencies:

npm install

Start the frontend server:

npm start

Now your app should be running successfully 🎉

🚀 Features

Authentication and User Management

• ✨ Secure Login/Signup Functionality
• 🚪 Support for Email or Username-based Login
• 🔐 Seamless Profile and Password Management
• 🔄 Password Reset via Sendgrid Integration

Content Management

• 📜 Dynamic Infinite Scroll for Posts
• 🔍 Suggestions for User Connections
• 🔎 Intuitive Search for Users by Name or Username
• 🔗 Follow/Unfollow Capability for User Networking
• ❤️ Like/Unlike Posts with Double-Tap Feature
• 💬 Commenting on Posts for Interaction
• 📌 Save/Unsave Posts for Bookmarking
• 📤 Effortless Post-Sharing Functionality

Messaging System

• 🔍 User-Friendly Search for Chat Participants
• 📝 Seamless Creation of New Chats
• 💬 Real-Time Messaging Between Users
• 🕒 Status Indicators for Typing and Online Presence

Social Features

• 📊 Comprehensive View of Followers/Following Lists
• 👍 Post Liked By Users Tracking
• 😄 Emoji Integration via Emoji Mart

Image Storage

• 📷 Branch dev-v3-cloudinary: Utilizes Cloudinary for Image Storage
• ☁️ Branch dev-v2-aws: Leverages AWS S3 for Image Storage
• 💾 Branch dev-v1: Relies on Local Storage Solution

Sneak Peek of Home Page 🙈 :

📬 Contact

Feel free to reach me through the below handles if you'd like to contact me.