Click the link below to view the deployed version of my WhatsApp clone built using the MERN stack.

https://whatsapp-clone-tarun2.web.app/

About the Project:
I built the UI using React.JS and used Material UI and Material Icons for the various Icons and Actions.
This UI is deployed on Firebase using Firebase Hosting.
The backend is built using Node.JS and runs on an Express.JS server and is deployed on Heroku.
The data for the messages is being pulled from a Mongo DB cluster. Mongoose is used to connect the database to the Node.JS backend. Pusher is used for real-time updates for the chats to render on the UI without a refresh.
I use Axios to connect the frontend to the backend.

Send a new message by typing it in the text box and pressing the return key on your keyboard. This message gets saved in a Mongo DB cluster, within a collection, as a document. Pusher is listening to this collection and as it detects an “inserted” action, it updates the UI with the latest message in real time. Received messages can be sent via hitting a backend base URL through an app like Postman.
Only the “send message” functionality is built with the other buttons currently disabled.
This is meant for demonstration purposes only.

Reference video:

https://www.youtube.com/watch?v=ktjafK4SgWM

All credits to David and Sonny