Indian Social Media App

It's a fully responsive MERN Stack social-media web application with all the major functionalities

🖥️ Tech Stack

Frontend:

Backend:

React-time-chatting

View Deployment

Checkout live website: https://indian-social-media.vercel.app/

🚀 Responsiveness

All Pages are fully responsive for all screen sizes

🚀 Features

• Signup Login and Logout User Account
• JWT (Json Web Token) Authentication and BcryptJS Password Hashing
• Forget and Reset-Password functionality by sending a link to the mail
• Authorisation for
• Users can do all the CRUD operations with their posts
• Authorisation for all types of CRUD operations
• Users can like and dislike other users' posts.
• Users can update their profile picture, cover picture and also their profile.
• Users can able to change their password and delete their account from the website
• Users can follow and unfollow other users and their timeline posts get updated accordingly.
• Users can create chats with any of the other users and do real-time chatting with them.
• Darkmode available

🚀 Performance optimisation

• Able to optimise the performance by not making a single extra api call in the whole app unless it necessary.
• Used useCallback, useMemo and React.memo where ever required.
• Used Shallequal from react-redux to avoid unnecessery rendering.
• Applied code Splitting through dynamic import by using React.Lazy and Suspence.
• Used react-lazy-load-image-component library for loading the images lazy.
• where ever possible written the cleanup inside the UseEffect in case of setting the data.
• Converting the images into the webp format by using the webp convertor before uploading to the cloudinary server.
• Applied gzip compression for compressing the serverData before sending to the client.
• Applied custom indexing in MongoDb for faster query processing.

Some visuals of my project

Home page:

Profile page:

Chat page:

Reat-time-chatting:

Users page:

Signup page:

Login page:

forget password page:

Change password page:

Environment Variables

To run this project, you will need to add the following environment variables to your .env file in server folder

MONGO_URL

JWT_SECRET_KEY

EMAIL_HOST

EMAIL_PORT

EMAIL_USER

EMAIL_PASS

EMAIL_FROM

CLOUD_NAME

CLOUDINARY_API_KEY

CLOUDINARY_API_SECRET

Steps to run this Project:-

1. Create a folder on your system.

2. Open with Visual Studio Code.

3. clone the repo using

 git clone https://github.com/gkomsai/Social-media-app.git

4. Do "yarn install" in frontend and "npm install" in the backend and socket folder (To install all the dependencies)

5. Then "yarn start" in the frontend and "npm start" in the backend and socket folder to run the project on your local system

Contact

If you want to contact me, you can reach me through below handles.

Show your support

Give a ⭐️ if you like this project!