Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kimlimjustin/whatsapp-clone

Web based Whatsapp clone with real time private chat and group chat features.
https://github.com/kimlimjustin/whatsapp-clone

expressjs mern-stack messaging messaging-services mongodb react reactjs realtime realtime-messaging whatsapp whatsapp-chat whatsapp-clone whatsapp-web

Last synced: about 2 months ago
JSON representation

Web based Whatsapp clone with real time private chat and group chat features.

Awesome Lists containing this project

README

        

# whatsapp-clone

![Whatsapp clone demo](https://drive.google.com/uc?export=view&id=1LCLdnYzsxcCmqFxaw3oIEPR-D30N5zMG)

##### Warning: although this project has some basics security such as hashed user password, encrypt messages and so on, this project is NOT secure enough in production. (Contribute to this project by making a pull request will be appreciated)

How to run:

- Clone this repository or fork it.
- To clone this repository type `git clone https://github.com/kimlimjustin/whatsapp-clone.git` on your command line
- To fork this repository, click fork button of this repository then type `git clone https://github.com//whatsapp-clone.git`
- Inside `server` folder, create a new file named `.env` which stores informations about server side such as `ATLAS_URI`, `SECURITY_KEY` and `CLIENT_URL` informations
- store your database URI inside `ATLAS_URI` variable
- store your security key inside `SECURITY_KEY` variable
- store your client url inside `CLIENT_URL` variable
- example:
```
ATLAS_URI =mongodb+srv://admin:@cluster0.8aezk.gcp.mongodb.net/whatsappClone?retryWrites=true&w=majority
SECURITY_KEY = D73373D9B4ED6FEC5B8B2DAF6WA929B1C7D14CDC88B196EBDCCEA77AFF7BB9
CLIENT_URL = http://localhost:3000/
```
- Inside `client` folder, create a new file called `.env` which stores your information about client side such as `REACT_APP_SECURITY_KEY` and `REACT_APP_BACKEND_URL` informations

- store your security key inside `REACT_APP_SECURITY_KEY` variable, note that this value must same as `SECURITY_KEY` in `server/.env` file
- store your server url inside `REACT_APP_BACKEND_URL`
- example:

```
REACT_APP_SECURITY_KEY = D73373D9B4ED6FEC5B8B2DAF6WA929B1C7D14CDC88B196EBDCCEA77AFF7BB9
REACT_APP_BACKEND_URL = http://localhost:5000
```

- Install all dependencies

- Client side: on the `client` directory type `npm install`(or `yarn`)
- Server side: on the `server` directory type `npm install`(or `yarn`)

- Run it on node js:
- Client side: on the `client` directory type `npm start` (or `yarn`)
- Server side: on the `server` directory type `npm start` (or `yarn`)

## Like my work?

Buy Me a Coffee at ko-fi.com