Authors :
Abhinav Chauhan; Manjeet Singh; Deepshika Bhargava
Volume/Issue :
Volume 9 - 2024, Issue 12 - December
Google Scholar :
https://tinyurl.com/58a3es4e
Scribd :
https://tinyurl.com/59c6krz4
DOI :
https://doi.org/10.5281/zenodo.14535279
Abstract :
In the digital communication era, real-time
chat applications are crucial for effective and
instantaneous interaction. This paper explores the
architecture, implementation, and deployment of a real-
time chat application built using the MERN stack
(MongoDB, Express.js, React, Node.js) with Socket.io for
real-time data exchange. The front-end is enhanced with
TailwindCSS and Daisy UI, offering a sleek and
responsive design. The application integrates JWT for
secure authentication and authorization, manages user
presence using React Context and Socket.io, and
leverages Zustand for efficient global state management.
Comprehensive error handling is implemented both on
the server and client sides, ensuring a robust and reliable
system. This study provides insights into the technical
challenges encountered, solutions adopted, and future
improvements, serv-ing as a reference for developers
aiming to build scalable and secure real-time web
applications.
Keywords :
MERN Stack, Real-Time Chat, Socket.io, JWT, TailwindCSS, Daisy UI, Zustand, React Context, Error Handling, Realtime Communication, Web Development.
References :
- Fette, I., & Melnikov, A. (2011). The WebSocket Protocol. RFC 6455, IETF.
- Fielding, R. T., & Taylor, R. N. (2000). Architectural styles and the design of network-based software architectures. Doctoral dissertation, University of California, Irvine.
- Tilkov, S., & Vinoski, S. (2010). Node.js: Using JavaScript to build high-performance network programs. IEEE Internet Computing, 14(6), 80-83.
- Mikowski, M. S., & Powell, J. C. (2013). Single page web applications: JavaScript end-to-end. Manning Publications Co.
- Chodorow, K. (2013). MongoDB: The Definitive Guide: Powerful and Scalable Data Storage. O’Reilly Media, Inc.
- Banks, A., & Porcello, E. (2017). Learning React: Functional Web Development with React and Redux. O’Reilly Media, Inc.
- Haviv, A. Q. (2014). MEAN Web Development. Packt Publishing Ltd.
- Dabit, N. (2021). Full Stack Serverless: Modern Application Development with React, AWS, and GraphQL. O’Reilly Media, Inc.
- Wang, V., Salim, F., & Moskovits, P. (2013). The Definitive Guide to HTML5 WebSocket. Apress.
- Grigorik, I. (2013). High Performance Browser Networking: What every web developer should know about networking and web performance. O’Reilly Media, Inc.
- Express.js Documentation. (n.d.). Retrieved from https:// expressjs.com/en/4x/api.html
- MongoDB Documentation. (n.d.). Retrieved from https://docs. mongodb.com/
- Zustand Documentation. (n.d.). Retrieved from https://github. com/pmndrs/zustand
- Daisy UI Documentation. (n.d.). Retrieved from https://daisyui. com/docs/
- OWASP. (2021). OWASP Top Ten. Retrieved from https://owasp. org/Top10
In the digital communication era, real-time
chat applications are crucial for effective and
instantaneous interaction. This paper explores the
architecture, implementation, and deployment of a real-
time chat application built using the MERN stack
(MongoDB, Express.js, React, Node.js) with Socket.io for
real-time data exchange. The front-end is enhanced with
TailwindCSS and Daisy UI, offering a sleek and
responsive design. The application integrates JWT for
secure authentication and authorization, manages user
presence using React Context and Socket.io, and
leverages Zustand for efficient global state management.
Comprehensive error handling is implemented both on
the server and client sides, ensuring a robust and reliable
system. This study provides insights into the technical
challenges encountered, solutions adopted, and future
improvements, serv-ing as a reference for developers
aiming to build scalable and secure real-time web
applications.
Keywords :
MERN Stack, Real-Time Chat, Socket.io, JWT, TailwindCSS, Daisy UI, Zustand, React Context, Error Handling, Realtime Communication, Web Development.