WhatsApp clone build using MERN stack

tomper-chat.onrender.com (cloud-based)
tc.varuntiwari.com (self-hosted)

---

This is the frontend + backend of TomperChat build with MERN stack and hosted with Render

🧾 Description

TomperChat is a clone of WhatsApp. Its build using MERN stack and uses socket.io for realtime messaging, online statuses, typing indicators, notifications etc.

✨ Features

• User authentication.
• Search for users to chat with.
• Create a group-chat.
• Only group-chat admin can edit the group chat details like name or add/remove users.
• Uninterested users can leave the group-chat.
• Chat in realtime with socket.io.
• User's realtime online/offline status in private chat.
• Users realtime typing indicator in both private and group chats.
• Realtime chat notifications for both private and group chat.
• Responsive for all screen sizes.
• And most importantly 😎 Feels just like whatsapp-web (or Desktop app).

🙄 TODO

• Users can delete messages.
• Group admins can delete group-chat.

⚙ Tools and Technologies used

Frontend

1. React.js
2. Chakra-ui
3. React-icons

Backend

1. Node.js
2. Express.js
3. MongoDB
4. JWT
5. Socket.io
6. Cloudinary
7. Bcrypt.js

🛠 Installation and setup

1. Clone the repo to your local machine.

2. Install the required dependency for server using :

   npm install

3. Install the required dependency for client using :

   cd client
   npm install

4. Create a .env file inside the root folder and provide the following environment variables:

   PORT=5000
   DB_URI=<mongodb_uri>
   JWT_SECRET=<your_jwt_secret>
   JWT_EXPIRE=5d
   COOKIE_EXPIRE=5
   NODE_ENV=development
   CLOUDINARY_CLOUD_NAME=<your_cloudinary_cloudname>
   CLOUDINARY_API_KEY=<your_cloudinary_api_key>
   CLOUDINARY_API_SECRET=<your_cloudinary_api_secret>
   FRONTEND_URL=http://localhost:3000

5. Create a .env file inside the client folder and provide the following environment variables:

   REACT_APP_PROJECT_URL=http://localhost:5000

6. Start the express server using :

   npm start

7. Start the react development server using:

   cd client
   npm start
   

🏎 Creating production built

1. Create a production build react app using the command :

   cd client
   npm run build

2. Change the value of following environment variables:

   NODE_ENV=production

(If you liked the project, give it star 😃)