Skip to content

Latest commit

 

History

History
235 lines (175 loc) · 7.32 KB

readme.md

File metadata and controls

235 lines (175 loc) · 7.32 KB

📸 Instagram Clone (Full-Stack Web App)

A full-featured, mobile-first Instagram Clone built using React.js, Firebase, MongoDB, Tailwind CSS, Socket.io, and Express.js. It replicates the core features of Instagram, including image posting, commenting, real-time chat, and both email and phone authentication, all within a clean, responsive UI.

While features like real-time messaging using Socket.io are part of future updates, this project represents more than just a clone. It is a personal journey and a foundation for building my own unique social media platform inspired by Instagram. Over time, I aim to transform this into a fully customized application and website that reflects my individual creativity, ideas, and innovations.

If anyone is interested in contributing or collaborating on this project, feel free to reach out - I'd be happy to welcome meaningful contributions that align with the project's goals.

🔗 Live Demo

🌐 Live Website
🛆 Deployed with: Vercel (Frontend) & Railway.com (Backend)

📷 Output Screenshots

🖥️ Desktop Output

📱 Instagram Clone - Desktop UI

Instagram Clone - Desktop UI

📱 Mobile Output

📱 Instagram Clone - Mobile UI

Instagram Clone Mobile UI

✨ Features

🔐 Authentication (via JWT)

  • Email & password registration/login
  • Phone number OTP login (In Update) (In Update)
  • Email verification after signup (In Update)
  • Protected routes (auto-redirect for unauthorized users)

📸 Post System

  • Upload image with caption
  • Like/unlike posts
  • Add/delete comments (In Update)
  • Delete your own posts (In Update)
  • Fully responsive feed

🧑‍💼 User Profiles

  • View personal profile and all uploaded posts (In Update)
  • View other users’ public profiles (In Future update Private Profiles)
  • Optional (Follow/Unfollow system – to be added)

💬 Real-Time Chat (Socket.io + MongoDB)(This Feature Will Be In Future)

  • One-to-one messaging system
  • Live message updates
  • Chat history stored in MongoDB
  • Displays selected user’s name at top of chat window
  • Scrollable, timestamped messages
  • Typing indicator

🎨 UI/UX

  • Tailwind CSS for beautiful, responsive design
  • Mobile-first layout, desktop optimized
  • Framer Motion for subtle animations

🛠️ Tech Stack

Technology Purpose
React.js Frontend
Tailwind CSS Styling
JWT Auth Authentication
MongoDB + Mongoose Database
Express.js Backend APIs
Cloudinary For Storing Images
Socket.io in Future Real-time messaging
Framer Motion Animations
Vercel/Railway.com Deployment

Folder Structure

.
├── instagram-clone/
│   ├── backend/
│   │   ├── middleware/
│   │   │   └── requireLogin.js
│   │   ├── models/
│   │   │   ├── model.js
│   │   │   ├── profileModel.js
│   │   │   └── userPost.js
│   │   ├── node_modules/       # Backend dependencies
│   │   ├── routes/
│   │   │   ├── auth.js
│   │   │   ├── createPost.js
│   │   │   └── profile.js
│   │   ├── .env                # Backend specific .env
│   │   ├── app.js
│   │   ├── package-lock.json   # Backend specific lock file
│   │   └── package.json        # Backend specific package.json
│   │
│   ├── frontend/
│   │   ├── node_modules/       # Frontend dependencies
│   │   ├── public/
│   │   │   └── vite.svg
│   │   └── src/
│   │       ├── components/
│   │       │   ├── ExplorePage/
│   │       │   ├── HomePage/
│   │       │   ├── Loaders/
│   │       │   ├── Logout/
│   │       │   ├── MessagePage/
│   │       │   ├── NotificationPage/
│   │       │   ├── Reels/
│   │       │   ├── UserProfilePage/
│   │       │   ├── UserSearch/
│   │       │   ├── UserUpload/
│   │       │   ├── Error404.jsx
│   │       │   ├── LoginForm.jsx
│   │       │   ├── ProtectedRoute.jsx
│   │       │   └── SignUpForm.jsx
│   │       ├── Data/
│   │       │   └── dataButtons.js
│   │       ├── img/
│   │       │   ├── Error404
│   │       │   ├── LoginPage
│   │       │   ├── InstargamSquare.png
│   │       │   └── noImageProfile.jpg
│   │       ├── pages/
│   │       │   ├── LoginPage.jsx
│   │       │   └── MainPage.jsx
│   │       ├── utils/
│   │       │   └── config.js
│   │       ├── App.jsx
│   │       ├── index.css
│   │       └── main.jsx
│   │   ├── .env                # Frontend specific .env
│   │   ├── eslint.config.js
│   │   ├── index.html
│   │   ├── package-lock.json   # Frontend specific lock file
│   │   ├── package.json        # Frontend specific package.json
│   │   ├── postcss.config.js
│   │   ├── tailwind.config.js
│   │   ├── vercel.json
│   │   └── vite.config.js
│   │
│   ├── .gitignore              # Root .gitignore for the monorepo
│   └── README.md               # Main README for the entire project

🔧 Installation & Setup

🔹 Frontend (React + Firebase)

git clone https://github.com/Dhirajbhavsar9900/InstagramClone
cd InstagramClone
npm install

Create a .env file in the root of your frontend project with the following content:

VITE_BACKEND_URL = Your Backend LocalHost URl
VITE_CLOUDINARY_CLOUD_NAME= Your Couldinary CouldName
VITE_CLOUDINARY_UPLOAD_PRESET= Your Cloudinary Upload_Preset

After setting up .env, start the development server:

npm run dev

🔹 Backend (Express + MongoDB + Socket.io)

cd backend
npm install

Create .env file inside /backend folder:

JWT_SECRET = Generate Your Own JWT_TOKEN 
MONGO_URI = Your MONGO.DB Url
PORT = Your Backend PORT example : (5000)
FRONTEND_URL = Your Frontend LocalHost Url

Run backend server:

npm run dev

🌐 Deployment

Frontend: Deployed on Vercel

Backend: Deployed on Railway.com

🔮 Future Roadmap

Follow/Unfollow system

Search User

User Login Email Alert

Realtime Chating System

🧑‍💻 Author

Dhiraj.jsx Connect Me On Instagram

DhirajBhavsar9900 Connect Me On 👥 GitHub