Overview
RapidChat is a comprehensive real-time messaging platform designed to facilitate instantaneous 1:1 communication. Built purely on the MERN stack (MongoDB, Express, React, Node.js), it heavily utilizes Socket.IO to handle bidirectional WebSocket data transmission, ensuring messages, online presence, and notifications reach users seamlessly with zero polling.
The application features advanced production-ready integrations including stateless JWT authentication, Cloudinary media processing, Resend transactional emails, and Arcjet for rigorous abuse and bot protection.
Dual Communication Layer
Express.js and Socket.IO cooperatively share the exact same HTTP server origin. Standard REST API endpoints handle heavy lifting like authentication and file processing, while the Socket connection strictly manages low-latency delivery operations.
Core Platform Features
Socket.IO Integration
- Instant Delivery — Messages are routed via WebSockets directly to active client nodes without HTTP polling.
- Online Presence — A live map of active sessions is instantly broadcasted globally so users know when their contacts are online.
- Optimistic UI — The interface instantly reflects outgoing messages to the sender before the backend responds, eliminating visual network latency.
Hardened Infrastructure
- JWT & httpOnly Cookies — Cryptographically verified sessions are locked securely to HTTP-only bounds to mitigate XSS vulnerabilities.
- Arcjet Middleware — Core auth and messaging endpoints are strictly guarded against automated volumetric bot runs, form-shielding bypasses, and scraping.
- Server-Side Authorization — Direct integrations rejecting unauthorized WebSocket handshake attempts gracefully at the server level.
React 19 Ecosystem
- Zustand Stores — Decoupled global client stores (
useAuthStore,useChatStore) flawlessly governing optimistic data patterns and live Socket emissions. - Cloudinary Media — Base64 encoded payload interception to host chat pictures securely via highly distributed CDNs.
- Audio Alerts — Native configurable notification chimes mapped precisely against incoming data pipelines (persisted across sessions).
Technology Stack
Frontend Architecture
React 19, Vite 7, React Router 7, Zustand, Axios, Tailwind CSS 3, daisyUI, and lucide-react.
Backend & Database
Node.js, Express 4, MongoDB (Mongoose 8), bcryptjs, jsonwebtoken, and cookie-parser.
Realtime Logistics
Socket.IO 4 managing bi-directional HTTP upgrades, and socket.io-client
syncing UI logic.
Cloud Infrastructure
Cloudinary (Media), Resend (Transactional emails), and Arcjet (Bot & Rate-limit defense).
Application Architecture
The system utilizes a split execution architecture where REST APIs handle standard state updates, and WebSockets manage event-driven pipelines natively.
Authentication & Handshakes
Upon a successful /api/auth/login REST sequence, Node.js injects a secure JWT inside an httpOnly cookie. Because WebSockets inherit originating cookies automatically, the Socket.IO connection instantly parses the cookie upon its initial connection attempt seamlessly logging the socket instance globally.
Presence Mapping
Inside the server singleton, a dynamic userSocketMap Object precisely tracks <userId> : <socket.id> key combinations. When a new map fires, the server instantly blasts a getOnlineUsers string array via WebSocket broadcast to all active platform clients.
Event Broadcasting
When sending an image or text object, the API authenticates the HTTP request securely, commits the new Message record directly into MongoDB definitively, explicitly checks userSocketMap[receiverId] logically, and emits newMessage exclusively to the exact node connection handling that exact recipient's active frontend view safely bypassing database-read delays.
Project Structure
Frequently Asked Questions
Join the Conversation
Discover the power of real-time bidirectional communication. Experience the platform firsthand by visiting the Live Application to test out the instantaneous WebSocket connections and chat functionality!
