Skip to content

Latest commit

 

History

History
129 lines (98 loc) · 3.11 KB

README.md

File metadata and controls

129 lines (98 loc) · 3.11 KB
Raw

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



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

    npm start

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