A blazing-fast, WhatsApp-inspired real-time chat app — Web Push Notifications, Voice Notes, Socket.io events, emoji reactions, reply threads, image sharing, and 32 switchable themes. Zero polling. Pure vibes.
🚀 Live Demo · 🐛 Report Bug · ✨ Request Feature
|
|
| Tool | Version | Purpose |
|---|---|---|
 |
19 | UI framework |
 |
8 | Build tool & dev server |
 |
v4 | Utility-first styling |
 |
v5 | Component library + 32 themes |
 |
latest | Lightweight global state |
 |
4.x | Real-time event handling |
 |
v7 | Client-side routing |
 |
latest | HTTP client with interceptors |
| Tool | Version | Purpose |
|---|---|---|
 |
v24 | Runtime |
 |
5 | HTTP server + API routing |
|
4.x | WebSocket server |
 |
latest | MongoDB ODM |
 |
latest | Session tokens |
 |
latest | google-auth-library |
 |
latest | Security headers middleware |
 |
latest | brute-force prevention |
 |
latest | Image storage & CDN |
| Service | Role |
|---|---|
 |
Cloud database |
|
Media CDN |
 |
Full-stack deployment |
Before you begin, make sure you have:
✅ Node.js >= 18
✅ A MongoDB Atlas account (free tier works great)
✅ A Cloudinary account (free tier works great)
git clone https://github.com/UTKARSHH20/fullstack-chat-app.git
cd fullstack-chat-app# Backend
npm install --prefix backend
# Frontend
npm install --prefix frontendCreate a .env file inside the backend/ directory:
# ── Database ──────────────────────────────────────────
MONGODB_URL=your_mongodb_atlas_connection_string
# ── Server ────────────────────────────────────────────
PORT=5001
NODE_ENV=development
# ── Auth ──────────────────────────────────────────────
JWT_SECRETKEY=your_super_secret_key
GOOGLE_CLIENT_ID=your_google_client_id
# ── Cloudinary ────────────────────────────────────────
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
# ── Web Push Notifications ────────────────────────────
VAPID_PUBLIC_KEY=your_vapid_public_key
VAPID_PRIVATE_KEY=your_vapid_private_key
VAPID_SUBJECT=mailto:test@example.comCreate a .env file inside the frontend/ directory:
VITE_VAPID_PUBLIC_KEY=your_vapid_public_key
VITE_GOOGLE_CLIENT_ID=your_google_client_id
⚠️ Never commit.envto version control. It is already listed in.gitignore.
Open two terminals and run:
# Terminal 1 — Backend (http://localhost:5001)
cd backend && npm run dev
# Terminal 2 — Frontend (http://localhost:5173)
cd frontend && npm run devThen visit http://localhost:5173 🎉
# From the project root
npm run build # installs deps + builds the React app
npm start # starts Express, which serves the built frontendThis app deploys as a single service on Render — the Express backend serves the compiled React frontend in production. No separate static hosting needed.
📋 Render Configuration (click to expand)
| Setting | Value |
|---|---|
| Build Command | npm install --prefix backend && npm install --prefix frontend && npm run build --prefix frontend |
| Start Command | npm run start --prefix backend |
| Node Version | 24 |
| Environment Variables | (set all variables from the .env section above) |
The backend uses
express.staticto servefrontend/distand a catch-allapp.use()handler for SPA routing. Note:app.get("*")is intentionally avoided due to an Express 5 + path-to-regexp v8 incompatibility.
fullstack-chat-app/
│
├── 📂 backend/
│ └── src/
│ ├── controllers/
│ │ ├── auth.controller.js
│ │ └── message.controller.js
│ ├── lib/
│ │ ├── cloudinary.js
│ │ ├── db.js
│ │ ├── socket.js
│ │ ├── webpush.js
│ │ └── utils.js
│ ├── middleware/
│ │ └── auth.middleware.js
│ ├── models/
│ │ ├── message.model.js
│ │ └── user.model.js
│ ├── routes/
│ │ ├── auth.route.js
│ │ └── message.route.js
│ └── index.js
│
├── 📂 frontend/
│ ├── public/
│ │ └── service-worker.js
│ ├── components/
│ │ └── Navbar.jsx
│ ├── lib/
│ │ ├── axios.js
│ │ └── socket.js
│ ├── pages/
│ │ ├── ChatPage.jsx
│ │ ├── LoginPage.jsx
│ │ ├── ProfilePage.jsx
│ │ ├── SettingsPage.jsx
│ │ └── SignUpPage.jsx
│ └── src/
│ ├── store/
│ │ ├── useAuthStore.js
│ │ ├── useChatStore.js
│ │ └── useThemeStore.js
│ ├── App.jsx
│ └── main.jsx
│
├── .gitignore
└── package.json
┌──────────────┐ hash pw ┌──────────────┐ JWT cookie ┌────────────────┐
│ Local Auth │ ───────────────► │ bcryptjs │ ───────────────► │ HTTP-only │
│ (User/Pass) │ │ (10 rounds) │ │ Secure Cookie │
└──────────────┘ └──────────────┘ └────────────────┘
▲
┌──────────────┐ ID Token ┌──────────────┐ │
│ Google OAuth │ ───────────────► │ google-auth │ ─────────────────────────┘
│ (One-tap) │ │ validator │
└──────────────┘ └──────────────┘
- Local Authentication: User signs up → password hashed with
bcryptjs(10 salt rounds). On login, a JWT is signed with 15-day expiry and set as an HTTP-only, secure,SameSite=Strictcookie. - Google OAuth: User logs in/signs up via Google Identity Services → ID token verified server-side via
google-auth-library→ user account created/resolved → JWT cookie issued. - Session Persistence: On page refresh,
checkAuth()re-validates the session cookie and reconnects the WebSockets. - Security Middleware: All authentication endpoints are rate-limited (max 20 requests per 15 minutes), and express inputs are validated using custom middleware. All response headers are secured via Helmet.
⚡ Real-time Architecture
Express and Socket.io share a single HTTP server instance. A userId → socketId map held in memory enables direct message routing to specific clients — no broadcasting to everyone, no unnecessary noise.
🔔 Web Push Integration
A robust implementation of the Web Push API using Service Workers and VAPID keys. If the recipient is offline (no active Socket connection), the backend automatically triggers a native OS-level push notification to alert them.
↩️ Reply Threading
Replied messages store a replyTo snapshot (sender name + message text) directly on the message document. The thread context is always preserved even if the original message is later deleted — no orphaned threads.
🔧 Express 5 Wildcard Fix
path-to-regexp v8 (used internally by Express 5) rejects bare "*" route patterns at startup. The SPA catch-all fallback uses app.use() instead, which bypasses the regex engine entirely and works perfectly.
🔍 Sidebar Privacy Design
Instead of listing all registered users (which would expose your entire user base), the sidebar only shows people you've already messaged. A dedicated GET /api/messages/search?q= endpoint powers the "New Chat" modal for discovering new people.
📱 Mobile Layout
No framework tricks needed — a simple hidden md:flex toggle on the sidebar and chat panel gives a native-feeling single-panel experience on mobile, with proper back navigation on small screens.
# Fork the repo, then:
git checkout -b feature/your-feature-name
git commit -m "feat: describe your change"
git push origin feature/your-feature-name
# Open a Pull Request ✅Please keep PRs focused — avoid mixing unrelated changes in a single PR.
Distributed under the MIT License. See LICENSE for more information.
Built with ☕ and way too many Stack Overflow tabs
⭐ If this project helped you, consider dropping a star — it genuinely means a lot! ⭐