Chat App is a full-stack real-time messaging application built on the MERN stack — MongoDB, Express, React, and Node.js — with Socket.io layered on top for bidirectional, event-driven communication. Every piece of the system runs from a single Node.js process: Express handles REST requests, Socket.io manages persistent WebSocket connections, and the compiled React SPA is served as static files from the same origin. This single-origin design keeps production deployment straightforward and eliminates cross-origin complexity entirely.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/khushboodaryani/Chat-App/llms.txt
Use this file to discover all available pages before exploring further.
How the Layers Fit Together
The backend and frontend share one HTTP server. When the Node.js process starts,http.createServer(app) produces a plain HTTP server that Express attaches to. Socket.io wraps that same server instance so WebSocket upgrade requests are handled on the same port as every REST call — no separate WebSocket service, no extra port to expose.
In production the Vite build output (frontend/dist) is served as static files by Express. A catch-all GET * route ensures that any path not matched by an API route returns index.html, allowing React Router to take over client-side navigation.
Request Flow
Browser makes a request
The user’s browser either loads the React SPA over HTTP or opens a WebSocket connection via
socket.io-client. Both hit the same host and port.Express routes the request
API calls (
/api/auth, /api/messages, /api/users) are dispatched to their respective routers. Static asset requests are resolved from frontend/dist. Any unrecognised path falls through to the index.html catch-all.MongoDB persists or retrieves data
Route handlers interact with Mongoose models —
User, Message, and Conversation — to read and write documents in the MongoDB Atlas cluster.Socket.io broadcasts real-time events
After a message is saved, the message controller calls
getReceiverSocketId to look up the recipient’s live socket and emits a newMessage event directly to that connection.Layer Breakdown
| Layer | Technology | Role |
|---|---|---|
| Presentation | React 18, Tailwind CSS, DaisyUI | Renders the chat UI; manages routing, auth guards, and toast notifications |
| API | Express (Node.js) | Exposes REST endpoints for auth, messaging, and user discovery; enforces JWT middleware |
| Real-Time | Socket.io (server + client) | Maintains persistent WebSocket connections; pushes new messages and online-user updates to connected clients |
| Data | MongoDB + Mongoose | Stores User, Message, and Conversation documents; relationships are expressed via ObjectId references |
Single-Origin Deployment
Because Express servesfrontend/dist at the root path, the browser loads the React app and makes all subsequent API and WebSocket requests to the exact same origin. There is no need to configure CORS headers in production — the cors option in the Socket.io constructor is only required for local development where the Vite dev server runs on a different port.
During local development the Vite dev server proxies API requests to the Express backend, so you still get hot-module replacement without hitting CORS errors.
Explore Each Layer
Frontend Architecture
React component tree, Zustand store, context providers, custom hooks, and the UI library stack.
Backend Architecture
Express route structure, JWT middleware, static file serving, and Socket.io server bootstrap.
Database Models
MongoDB schemas for User, Message, and Conversation, plus the populated query pattern.
API Reference
Full reference for every REST endpoint — request shapes, responses, and authentication requirements.