Design and Implementation of a Full-Stack Real-Time Chat Application

Using the MERN Stack with WebSocket Communication

Ayyaz Khira

Department of Computer Science and Engineering

Parul University, Vadodara, Gujarat, India

ayyazkhira008@gmail.com

ABSTRACT:

Abstract — This paper presents the design, architecture, and implementation of a production-grade, full-stack real-time chat application built using the MERN stack — MongoDB, Express.js, React, and Node.js — augmented with Socket.io for bidirectional WebSocket communication. The system supports user registration and authentication via JSON Web Tokens (JWT), real-time one-to-one messaging with instant delivery, online presence indicators, and media sharing through cloud-based image storage powered by Cloudinary. The frontend is developed using React 18 with Zustand for global state management, Vite as the build tool, and Tailwind CSS with DaisyUI for a themeable, responsive user interface. This paper discusses the challenges addressed in real-time web communication, documents the system architecture and data models, and evaluates the scalability and security properties of the implemented solution. The application demonstrates the viability of the MERN stack for building scalable, real-time communication platforms suitable for production deployment.

Keywords — MERN Stack, WebSocket, Socket.io, Real-Time Messaging, JWT Authentication, React, Node.js, MongoDB, Cloudinary, Zustand, TailwindCSSa