PostsPortfolioResumeAris AI
Back to projects
SocketSpace - Real-Time Chat Application

SocketSpace - Real-Time Chat Application

Aryan Kanojia / October 31, 2025

Live Project Link

SocketSpace is a high-performance, full-stack real-time chat platform built with the MERN stack (MongoDB, Express, React, Node.js). It offers an engaging, smooth messaging experience with secure authentication, media sharing, and automated notifications — all designed for scalability and responsiveness.

Key Features

  • Custom JWT Authentication: Implements a complete stateless auth system using JSON Web Tokens. Passwords are securely hashed with bcrypt, and sessions are maintained via httpOnly cookies.
    [See: backend/src/controllers/auth.controller.js, backend/lib/utils.js]

  • Real-Time Chat (Socket.io): Enables instant, bidirectional communication where messages appear live without reloading. Socket connections are authenticated using the same JWT cookies.
    [See: backend/src/lib/socket.js, backend/middleware/socket.auth.middleware.js]

  • Online Presence: Tracks active users through a global userSocketMap, broadcasting online/offline updates in real-time.
    [See: backend/src/lib/socket.js]

  • Cloud Image Uploads: Supports sending images in chats by uploading base64-encoded images to Cloudinary, storing the returned URLs in MongoDB.
    [See: backend/src/controllers/message.controller.js, backend/lib/cloudinary.js]

  • Profile Picture Management: Users can update and sync their profile photos, which are also hosted on Cloudinary.
    [See: backend/src/controllers/auth.controller.js]

  • Automated Welcome Emails: Integrates with Resend to send personalized welcome emails to new users on signup.
    [See: backend/src/emails/emailHandlers.js]

  • Security & Rate Limiting: Protected with Arcjet middleware, providing AI-based rate limiting and bot detection to secure API and auth endpoints.
    [See: backend/middleware/arcjet.middleware.js]

  • Optimistic UI Updates: The frontend uses Zustand to instantly show messages while backend processing occurs, ensuring a near-instant user experience.
    [See: frontend/src/store/useChatStore.js]

  • Audio Feedback: Subtle keyboard and notification sounds enhance interactivity, with toggles available for user preference.
    [See: frontend/src/hooks/useKeyboardSound.js, frontend/src/components/ProfileHeader.jsx]

Architecture Overview

SocketSpace follows a decoupled architecture with an independent frontend (React + Vite) and backend (Express + Socket.io).

Frontend (React + Vite)

  • Built using React and Vite for fast development and production builds.

  • Routing: Managed through react-router.
    [See: frontend/src/main.jsx]

  • State Management: Global states (auth, messages, users) handled by Zustand for simplicity and reactivity.
    [See: frontend/src/store/useAuthStore.js]

  • Styling: Designed with Tailwind CSS and DaisyUI for a modern and responsive UI.
    [See: frontend/tailwind.config.js]

Backend (Node.js + Express)

  • Provides REST APIs and hosts the Socket.io server for real-time messaging.

  • Data Models: Defines User and Message schemas with Mongoose.
    [See: backend/models/User.js, backend/models/Message.js]

  • REST API: Exposes endpoints for authentication and chat management, secured with JWT middleware.
    [See: backend/src/routes/auth.route.js, backend/src/routes/message.route.js]

  • Socket.io Integration: Socket server authenticates users via JWT and handles real-time events like newMessage and getOnlineUsers.
    [See: backend/src/lib/socket.js, backend/middleware/socket.auth.middleware.js]

Real-Time Message Flow

  1. User sends a message: The frontend optimistically renders it while calling the /api/messages/send/:id endpoint.
  2. Backend processing: The sendMessage controller validates input, uploads any attached image to Cloudinary, and saves the message to MongoDB.
    [See: backend/src/controllers/message.controller.js]
  3. Socket emission: The server emits a newMessage event to the recipient’s socket using their socket ID.
    [See: backend/src/lib/socket.js]
  4. Frontend update: The recipient’s Zustand store listens for newMessage and instantly updates the chat UI.
    [See: frontend/src/store/useChatStore.js]

Technology Stack

  • Frontend: React, Vite, React Router, Zustand, Axios, Tailwind CSS, DaisyUI
  • Backend: Node.js, Express, Socket.io
  • Database: MongoDB (Mongoose ODM)
  • Authentication: Custom JWT (bcryptjs, httpOnly cookies)
  • Security: Arcjet (Rate Limiting & Bot Detection)
  • Image Hosting: Cloudinary
  • Email Service: Resend

Final Thoughts

SocketSpace showcases how to build a secure, real-time communication system from the ground up using modern JavaScript technologies.
It demonstrates mastery over state management, Socket.io events, and JWT-based security, while maintaining a smooth and interactive user interface.
This project is a strong example of blending frontend performance with backend robustness to create a real-time SaaS-grade chat experience.