WhatsApp Clone Project

A full-stack WhatsApp clone built with Next.js, Express, and MongoDB.

Installation and Local Development

1. Fetch from git:

git clone https://github.com/DonRaz/WhatsappClone.git

Running Locally

1. run on seperated terminals:

• First terminal - Backend: (using npm)

cd server 
npm install && npm run dev

• Second Terminal - Frontend (using bun)

cd /client/chat-whatsapp-clone
bun install && bun run dev   

2. run single file:

# From project root
./run-locally.sh

This script will:

• Build the shared types
• Start the server in the background
• Start the client in the background
• Allow you to stop both with Ctrl+C

Notes:

1. environment files needs to be renamed (remove the .example) and filled
2. Make sure server/.env contains the correct DATABASE_URL

Environment Variables Setup

This project uses environment variables for configuration:

1. Server (.env in server/):

   • Contains DATABASE_URL, JWT_SECRET, and PORT
   • Required for local development

2. Root (.env in project root):

   • Used by the deployment script
   • Contains all variables needed for production

3. Frontend (.env.production in client/):

   • Generated automatically by the deploy script
   • Do not edit manually

Project Cleanup

Before submitting or deploying, you can clean up unnecessary files:

# Clean up node_modules, build artifacts, etc.
./cleanup.sh

# Clean up and reinstall dependencies
./cleanup.sh --reinstall

In local development, Socket.IO is used for real-time communication.

Production Deployment

1. Ensure root .env file has all required variables
2. Run ./deploy-with-env.sh
3. The script sets all variables in Vercel and deploys both services

In production, Pusher is used for real-time communication.

Features

• Real-time messaging
• User authentication
• Group conversations
• Message status (seen/delivered)
• Responsive design

Update types:

Edit at shared/schemas/index.ts or shared/realtime/index.ts and run:

    cd FullstackFinalProject/shared
    npm run build
    npm version patch && npm publish
    cd FullstackFinalProject/client/chat-whatsapp-clone
    bun i @sraz-sw/fullstack-shared
    cd FullstackFinalProject/server
    npm i @sraz-sw/fullstack-shared

Docs & Insights:

Realtime Features:

• Realtime Architecture Overview
• Realtime Documentation
• Realtime Implementation Plan

File Storage:

• File Storage Abstraction
• Implementation Plan

React Query

• React Query Cheatsheet
• Usage - Auth hook
• Usage - conversations

Other Documentation:

• Environment Variables