Instegram-Clone ( MERN STACK )

I will be very happy if you like it and put stare.

This is an Instagram clone web application that is fully responsive built using the MERN (MongoDB, Express, React, Node) stack. It is a fully functional social media platform that mimics the features and functionality of the original Instegram ,In this project I focused to implement almost all main user function in instegram also I designed the pages to be similer to instegram webiste specially for mobile devices that the website is fully responsive for all screens.

Demo: https://instegram-clone.vercel.app/

Features

---

• Fully user authentication and auzorization functions
• confirm and reset password by otp email
• Create, edit and delete posts
• Create, and delete Reels
• Can Upload both images and videos
• Like and comment on posts
• Full functions for privat account
• Full function for block users
• Follow and unfollow users
• Bending follow request for privat account
• View a list of followers and following
• View user profiles
• Edit profile information (profile picture, bio, etc.)
• Search by username
• infinite scroll in each posts, chats and even messages
• Verification mark
• typing indicator
• Suggestion menu
• Save and Unsave posts
• notifications page.

Tecnologies used

• Nodejs , express
• MongoDB
• Socket.io
• react
• Tailwind css
• Redux toolkit , RTK Query
• Framer Motion
• Swiper

Installation

---

First of all you need to install liberaries used for both backend and frontend

1. Once you clone the project in you mathine run command

$ npm i

2. Navigate to client and install front liberaries

$ cd client

$ npm i

3. Create a .env file in the root directory and set the following environment variables

MONGODB_URI= mongodb://localhost:27017/Instegram2
Client_URL = http://localhost:3000
NODE_ENV = production
deployedWebsite = https://instegram-clone.onrender.com
JWT_SECRET = ENTERJSONSECERTKEYHERE
JWT_REFRESH = ENTERJSONREFRESHKEYHERE

#google mail information by google console
MAILING_SERVICE_CLIENT_ID = 
MAILING_SERVICE_CLIENT_SECRET = 
MAILING_SERVICE_REFRESH_TOKEN = 
MAILING_SERVICE_ACCESS_TOKEN = 
SENDER_EMAIL_ADDRESS =

#Information provided by cloudinary service
CLOUD_NAME = 
API_KEY = 
API_SECRET =
CLOUDINARY_URL =

4. Create a .env file in the root client directory

REACT_APP_API_KEY = http://localhost:5000
REACT_APP_Website = http://localhost:5000
NODE_ENV = production

5. Now you are ready to run th project,Run backend

$ npm run dev

6. Run frontend

$ npm start

Contact me

---

just constct me on one of the following

• FaceBook
• Linkdin
• Telegram