/Real-Time-Chat-App

A Social Media Whats up Clone Where You Can Communicate with People and you can also make group with your friends. Built Using MERN Stack

Primary LanguageJavaScript

Real-Time-Chat-App

A Social Media Whats up Clone Where You Can Communicate with People and you can also make group with your friends. Built Using MERN Stack

Real-Time-Chat-App

Real-Time-Chat-App Clone is Replica of one of the biggest social media platform Whats-up , in my version of whats-up you can do everything from signing up to talking to friends updating profile photo , many more such features all built solely by me .

Currently This Project is Not Deployed Due To No Good Service For Deploying Backend But Will be deploying it in near future .

Demo Account

Features

  • Signup / Login
  • Search User Functionality
  • Communicate with friends Real-Time Implemented With Socket.IO
  • Create Group / Update group Name / Add Members / Remove Members
  • Chat With Anyone in Real-Time Implemented With Socket.IO
  • Get Notification From Sender
  • Get Guest user credential for talking.
  • Many More Features In Way ......

🛠 Tech Used

Client: React , Chakra UI , Socket-IO , Lottie-Animations , Axios , react-socketio-client

Server: Node, Express , MongoDB , JWT , Argon2 , Socket-IO , socketio-auth

Screenshots

Login Page UI 😎

Login Pgae

Signup Page UI 👌

Signup Pgae

Home Page UI ✍️

Home Pgae

Own Profile Page UI 👌

Own Profile Page

Chating Page UI ✍️

Chating Page

Others Profile Page UI ✍️

Others Profile Page

Search Others / Suggestions UI ✍️

Search Others Page

Create Group Page UI ✍️

Create Group Page

Add Members/Remove Members Page UI ✍️

Add Members/Remove Members Page

Real-Time-Chat UI ✍️

Real-Time-Chat Page

Real-Time-Notifications UI ✍️

Real-Time-Notifications Page

Real-Time-Chat Responsive UI ✍️

Real-Time-Chat Responsive Page

Authors

Environment Variables

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

  • Frontend -

      `REACT_APP_SERVER`
    
      `REACT_APP_SOCKET_SERVER`
    
  • Backend -

      `PORT` :- Ex 8080
    
      `MONGODB_URL` :- Mongo DB Local OR Atlas URL
    
      `JWT_SECRET` : Secret Key For JWT
    

Feedback

If you have any feedback, please reach out to us at vinayakhiwse8@gmail.com