varunkt001 / tomper-chat Goto Github PK

WhatsApp clone build using MERN stack

tomper-chat.onrender.com

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

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

• 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).

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

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

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

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. Start the express server using :

   npm start

6. Start the react development server using:

   cd client
   npm start
   

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 😃)