https://github.com/rjjha/tomperchat.com
This is a chatting app , which feels like WhatsApp.
https://github.com/rjjha/tomperchat.com
express nodejs reactjs socket-io
Last synced: 3 months ago
JSON representation
This is a chatting app , which feels like WhatsApp.
- Host: GitHub
- URL: https://github.com/rjjha/tomperchat.com
- Owner: Rjjha
- Created: 2023-09-16T16:08:40.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-27T03:36:30.000Z (over 2 years ago)
- Last Synced: 2025-04-01T23:31:43.602Z (about 1 year ago)
- Topics: express, nodejs, reactjs, socket-io
- Language: JavaScript
- Homepage: https://tomper-chat.onrender.com/login
- Size: 1.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
WhatsApp clone build using MERN stack
---
This is the frontend + backend of TomperChat build with MERN stack
#### 🧾 Description
TomperChat is a clone of WhatsApp. Its build using MERN stack and uses socket.io for realtime messaging, online statuses, notifications etc.
#### ✨ Features
- [x] User authentication.
- [x] Search for users to chat with.
- [x] Create a group-chat.
- [x] Only group-chat admin can edit the group chat details like name or add/remove users.
- [x] Uninterested users can leave the group-chat.
- [x] Chat in realtime with socket.io.
- [x] User's realtime online/offline status in private chat.
- [x] Realtime chat notifications for both private and group chat.
- [x] Responsive for all screen sizes.
- [x] 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](https://reactjs.org/)
2. [Chakra-ui](https://chakra-ui.com/)
3. [React-icons](https://react-icons.github.io/react-icons/)
###### Backend
1. [Node.js](https://nodejs.org/en/)
2. [Express.js](https://expressjs.com/)
3. [MongoDB](https://www.mongodb.com/)
4. [JWT](https://jwt.io/)
5. [Socket.io](https://socket.io/)
6. [Cloudinary](https://cloudinary.com/)
7. [Bcrypt.js](https://github.com/dcodeIO/bcrypt.js)
#### 🛠 Installation and setup
1. Clone the repo to your local machine.
2. Install the required dependency for server using :
```javascript
npm install
```
3. Install the required dependency for client using :
```javascript
cd client
npm install
```
4. Create a .env file inside the root folder and provide the following environment variables:
```env
PORT=5000
DB_URI=
JWT_SECRET=
JWT_EXPIRE=5d
COOKIE_EXPIRE=5
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
FRONTEND_URL=http://localhost:3000
```
5. Start the express server using :
```javascript
npm start
```
6. Start the react development server using:
```javascrip
cd client
npm start
```
#### 🏎 Creating production built
1. Create a production build react app using the command :
```javascript
cd client
npm run build
```
2. Change the value of following environment variables:
```env
NODE_ENV=production
```
(If you liked the project, give it star 😃)