https://github.com/fiqrioemry/fullstack_social_media_app
A full-featured Instagram clone web application built with modern technologies. Includes user authentication, photo uploads, likes, comments, real-time feed updates, and responsive UI – designed to mimic the core experience of Instagram.
https://github.com/fiqrioemry/fullstack_social_media_app
cloudinary express follow-system googleoauth jwtauthentication mongodb mongoose multer mysql-database nodejs nodemailer reactjs real-time-chat redis-client websocket-client
Last synced: 2 months ago
JSON representation
A full-featured Instagram clone web application built with modern technologies. Includes user authentication, photo uploads, likes, comments, real-time feed updates, and responsive UI – designed to mimic the core experience of Instagram.
- Host: GitHub
- URL: https://github.com/fiqrioemry/fullstack_social_media_app
- Owner: fiqrioemry
- Created: 2024-10-22T14:52:17.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-04T15:41:16.000Z (3 months ago)
- Last Synced: 2025-07-04T16:05:47.589Z (3 months ago)
- Topics: cloudinary, express, follow-system, googleoauth, jwtauthentication, mongodb, mongoose, multer, mysql-database, nodejs, nodemailer, reactjs, real-time-chat, redis-client, websocket-client
- Language: JavaScript
- Homepage: https://socialmedia.ahmadfiqrioemry.com
- Size: 6.59 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📷 Instagram Clone – Fullstack Web Application
Instagram Clone is a fullstack social media web application designed to replicate core features of Instagram. It enables users to create and interact with posts, follow other users, and send real-time chat messages. Built with Node.js (Express), MySQL, and MongoDB for the backend and React.js (Vite) with TailwindCSS on the frontend, this project focuses on scalability, security, and real-time engagement.
---
## 1. Project Overview
This project was developed to simulate a social platform where users can post, comment, like, follow, and message each other—just like Instagram. Traditional social apps require complex data synchronization, scalable messaging systems, and role-based access. This clone demonstrates how to integrate these core systems using modern web technologies and a microservice-style structure for chat, auth, and notification handling.
---
## 2. Project Requirements
- Enable user registration with OTP and Google OAuth
- Allow users to create, edit, like, comment, and bookmark posts
- Implement nested comments with reply and mention capability
- Build real-time chat using Socket.IO with media support
- Implement a follower/following system
- Notify users of interactions such as likes, comments, follows
- Secure user sessions using JWT + Redis
- Manage scalable and secure media uploads via Cloudinary
---
## 3. The Challenge
- Creating a full-featured social media app required solving multiple challenges at once:
- Building a real-time chat system with persistence and media upload
- Managing nested comments and mentions within posts
- Supporting Google OAuth and OTP-based registration securely
- Ensuring state synchronization between Redis sessions, MySQL, and MongoDB
- Handling media uploads, file validation, and user file management using Cloudinary
---
## 4. The Approach & Solution
The backend is built using Express.js, with MySQL for structured data (users, posts, comments) and MongoDB for unstructured and real-time data (chat messages). JWT is used for secure user authentication, with Redis managing refresh tokens and session validation. Media is uploaded using Multer and stored in Cloudinary.
The frontend uses React.js (Vite) and Zustand for lightweight state management. Socket.IO enables real-time chat communication. The UI is styled with TailwindCSS and animated with Framer Motion, providing a responsive and engaging user experience.
---
## 5. Key Features
🔐 Authentication via Google OAuth + OTP with session management via Redis
🖼️ Post system with create, edit, delete, like, comment, and bookmark features
💬 Nested Comments with reply and mention support
🧑🤝🧑 Follow/Unfollow system with user profile exploration
✉️ Real-time chat powered by Socket.IO and MongoDB
🖼️ Chat media support using Cloudinary (images)
🔔 Live notifications on likes, comments, follows
🔍 Search users by username
🧾 JWT + Refresh Token + Redis Session
📥 Media handling via Multer and Cloudinary
## 📦 Structured architecture for scalability and modularity
## 6. Tech Stack
### 6.1 Backend (Node.js & Express)
- MySQL (Sequelize ORM)
- MongoDB (for chat storage)
- Passport.js, JWT, bcrypt (Auth)
- Redis (Rate limiting + session)
- Nodemailer (Email OTP)
- Cloudinary + Multer (Media upload)
- Socket.IO (Real-time chat)
### 6.2 Frontend (React.js)
- Vite (Build tool)
- Zustand (Global state)
- TailwindCSS
- React Router
- Formik + Yup (Form validation)
- Framer Motion
- React Hot Toast (Notification)
- Embla Carousel
## 7. API Endpoints
### 7.1 Authentication & User Management
| Method | Endpoint | Description |
| ------ | ---------------- | -------------------------- |
| POST | /auth/signup | Register with email |
| POST | /auth/signin | Login with email |
| GET | /auth/google | Google OAuth login |
| POST | /auth/send-otp | Send OTP |
| POST | /auth/verify-otp | Verify OTP |
| POST | /auth/refresh | Refresh JWT token |
| GET | /auth/me | Get logged-in user profile |
---
### 7.2 Post & Interaction
| Method | Endpoint | Description |
| ------ | -------------------- | --------------------- |
| GET | /posts | Get all posts (feed) |
| POST | /posts | Create a new post |
| PUT | /posts/\:id | Edit post by ID |
| DELETE | /posts/\:id | Delete post by ID |
| POST | /posts/\:id/like | Like a post |
| POST | /posts/\:id/bookmark | Bookmark a post |
| POST | /posts/\:id/comments | Add comment to a post |
| POST | /comments/\:id/reply | Reply to a comment |
---
### 7.3 Real-time Chat
| Method | Endpoint | Description |
| ------ | -------------- | ----------------------------- |
| GET | /chat | Get all conversations |
| GET | /chat/\:userId | Get chat with a specific user |
| POST | /chat/\:userId | Send message (text/image) |
---
### 7.4 Notifications & Profile
| Method | Endpoint | Description |
| ------ | ------------------- | -------------------------- |
| GET | /user/notifications | Get all notifications |
| PUT | /user/notifications | Mark notifications as read |
| GET | /user/profile | Get own profile |
| PUT | /user/profile | Update profile info/avatar |
---
### 7.5 Follow System
| Method | Endpoint | Description |
| ------ | -------------------- | ------------------------- |
| POST | /user/\:id/follow | Follow or unfollow a user |
| GET | /user/\:id/followers | Get list of followers |
| GET | /user/\:id/following | Get list of following |
| GET | /user/search | Search users by username |
## 8. How To Run this project
- Clone Repository
```
git clone https://github.com/fiqrioemry/Fullstack_Mern_Instagram_Clone.git
cd Fullstack_Mern_Instagram_Clone
```
#### Backend Setup
- Install Dependencies\*\*
```
cd backend
npm install
```
- Configure .Env file\*\*
```
# host configure
SERVER_PORT=5000
NODE_ENV=development
CLIENT_HOST=http://localhost:5173
# token configure
REFRESH_TOKEN=your_refresh_token_here
ACCESS_TOKEN=your_access_token_here
# database
DB_USERNAME=your_db_username
DB_HOST=your_db_host
DB_PASSWORD=your_db_password
DB_DATABASE=your_db_name
SERVER_API_KEY=your_server_api_key
# cloudinary config
CLOUD_NAME=your_cloud_name
API_KEY=your_api_key
API_SECRET=your_api_secret
CLOUD_FOLDER=your_cloud_folder
# nodemailer config
USER_EMAIL=your_email
USER_PASSWORD=your_email_password
# redis config
REDIS_PORT=your_redis_port
REDIS_CLIENT_PASSWORD=your_redis_client_password
REDIS_CLIENT_URL=your_redis_client_url
# google config
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:5000/api/auth/google/callback
GOOGLE_CLIENT_ID=your_google_client_id
```
- Run server on specified port
```
npm run dev
```
#### Frontend Setup
- Install Dependencies
```
cd frontend
npm install
```
- Run application
```
npm run dev
```
## 📩9. Live Demo & Contact
- 🌍 Live Preview: your-deployment-url.com
- 🧑💻 Developer: Ahmad Fiqri Oemry
- ✉️ Email: fiqrioemry@gmail.com | ahmadfiqrioemry@gmail.com
- 🔗 LinkedIn: linkedin.com/in/ahmadfiqrioemry
- 🌐 Website: ahmadfiqrioemry.com
Please leave a like for my project if you find it usefull. Thank you
## 📜 License
This project is licensed under the MIT License. You are free to use, modify, and distribute it with attribution.
## 🖼️ Preview
