https://github.com/bitfancy/whatsapp-clone-mern

Last synced: 11 months ago
JSON representation

Host: GitHub
URL: https://github.com/bitfancy/whatsapp-clone-mern
Owner: BitFancy
Created: 2024-02-07T06:57:21.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-02-07T07:02:34.000Z (about 2 years ago)
Last Synced: 2025-02-15T20:54:18.574Z (about 1 year ago)
Language: JavaScript
Size: 2.52 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

WhatsApp clone build using MERN stack
---

#### 🧾 Description

Its build using MERN stack and uses socket.io for realtime messaging, online statuses, typing indicators, notifications etc.

#### ✨ Features

- [x] User authentication.
- [x] Search for users to chat with.
- [x] Chat in realtime with socket.io.
- [x] User's realtime online/offline status in private chat.
- [x] Responsive upto a limit.
- [x] And most importantly 😎 Feels just like whatsapp-web (or Desktop app).

#### ⚙ Tools and Technologies used

###### Frontend

1. [React.js](https://reactjs.org/)
2. [Material-ui](https://mui.com/)

###### Backend

1. [Node.js](https://nodejs.org/en/)
2. [Express.js](https://expressjs.com/)
3. [MongoDB](https://www.mongodb.com/)
5. [Socket.io](https://socket.io/)

#### 🛠 Installation and setup

1. Clone the repo to your local machine.
2. Install the required dependency for server using :

```javascript
cd server
npm install
```

3. Install the required dependency for client using :

```javascript
cd client
npm install
```

4. Install the required dependency for socket using :

```javascript
cd socket
npm install
```

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

```
DB_USERNAME=
DB_PASSWORD=

```

6. Start the express server using :

```javascript
npm start
```

7. Start the react development server using: