This project is a WhatsApp clone built with the MERN stack. It includes a basic messaging feature where users can send and receive messages in real-time. The frontend is updated instantly upon receiving a new message using Pusher for real-time communication.
- Frontend: React.js
- Backend: Node.js, Express.js
- Database: MongoDB
- Real-time updates: Pusher
-
Clone the repository:
git clone https://github.com/usama739/whatsapp-clone.git cd whatsapp-clone
-
Install server dependencies:
cd whatsapp-backend npm install
-
Install client dependencies:
cd ../whatsapp-mern npm install
-
Backend Configuration:
- Create a
.env
file in thewhatsapp-backend
directory and add the following environment variables:MONGO_URI=your_mongodb_connection_string PORT=your_server_port PUSHER_APP_ID=your_pusher_app_id PUSHER_KEY=your_pusher_key PUSHER_SECRET=your_pusher_secret PUSHER_CLUSTER=your_pusher_cluster
- Create a
-
Frontend Configuration:
- Create a
.env
file in thewhatsapp-mern
directory and add the following environment variables:REACT_APP_PUSHER_KEY=your_pusher_key REACT_APP_PUSHER_CLUSTER=your_pusher_cluster
- Create a
-
Start the backend server:
cd whatsapp-backend nodemon server.js
-
Start the frontend server:
cd ../whatsapp-mern npm start
-
Open your browser and navigate to
http://localhost:3000
.