/instagram-clone

A fully functional Instagram clone built with MERN Stack (MongoDB, ExpressJS, React & NodeJS) and with real-time private messaging using WebSockets.

Primary LanguageJavaScript

Frame 2

Instagram Clone

A fully functional Instagram clone built with MERN Stack (MongoDB, ExpressJS, React & NodeJS) and with real-time private messaging using WebSockets.

👉 Live Demo

Screenshots

Log In

screenshot-rocks (8)

Home

screenshot-rocks (16)

Post Detail

screenshot-rocks (7)

User Profile

screenshot-rocks (5)

Real-Time Messaging

screenshot-rocks (4)

Explore

screenshot-rocks (6)

Mobile

Frame 3

Frame 4

Features

Messaging

  • Real-time chat with private messages

Data Caching

  • Data caching with background updates

User Profile

  • Edit profile
  • Edit avatar
  • Follow and unfollow users

Posts

  • Create and delete posts
  • Like posts using optimistic updates
  • Save posts using optimistic updates
  • Add comments to the posts

Search

  • Search other users by name or username

Home Page

  • View posts only from users you follow

Explore Page

  • View posts from all users

Responsive

  • Fully responsive for mobile and desktop

Technologies

Backend (Rest API)

  • NodeJS & Express
  • JWT Authentication (using Passport)
  • MongoDB
  • WebSockets

Frontend (React SPA)

  • React
  • React Router
  • React Hook Form
  • React Query
  • Cloudinary (image upload)
  • Chakra UI
  • WebSockets

Installation

  1. Clone the project

  2. Install all dependencies

npm install

  1. Start your MongoDB

  2. Rename .env.example to .env and configure environment variables

  3. Run server

npm run start