QUICK-CHAT MERN STACK CHAT APPLICATION USING SOCKET.IO by IRJET Journal

QUICK-CHAT MERN STACK CHAT APPLICATION USING SOCKET.IO

Swagata Kadam1 , Dr. Sudhir N. Shelke2 , Prof. Atul Kapgate 3

Dept. of CSE, Guru Nanak Institute of Technology, Nagpur, Maharashtra, India

Abstract - In the digital communication era, real-time chatapplicationsarecrucialforeffectiveandinstantaneous 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 Tailwind CSS offering a sleek and responsive design. The application integratesJWTforsecureauthenticationandauthorization, manages user presence using React Context and Socket.io, and leverages Context API for efficient global state management.Comprehensiveerrorhandlingisimplemented 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, serving as a reference for developers aiming to build scalable and secure real-time web applications. In today’s digital age, communication plays a crucialroleinconnectingindividualsacrosstheglobal.With theincreasingdemandforreal-timemessagingapplications, building a single message chat application has become a popular endeavour.

The chat application encompasses essential features such asuserregistrationandauthentication,login&logout,and ability to send and receive messages in real time.

Key Words: MERN Stack, Real-Time Chat, Socket.io, JWT, Tailwind CSS, React Context, Error Handling, Realtime, Communication, Web Development.

1.INTRODUCTION

Chat applications have become an integral part of our daily lives, revolutionizing how we communicate in personal, professional, and social contexts. These applicationsfacilitateinstantmessaging,allowingusersto exchange text, media, and even conduct video calls. The evolutionofchatapplicationscanbetracedbacktoearly internetmessagingserviceslikeIRC(InternetRelayChat) and AIM (AOL Instant Messenger), evolving into sophisticated platforms like WhatsApp, Slack, and Microsoft Teams. These modern applications support a rangeoffunctionalitiesincludinggroupchats,filesharing, voice and video calls, and integration with other digital services.

Theriseofmobiledevicesandubiquitousinternetaccess hasfurtheracceleratedtheadoptionofchatapplications, makingthemapreferredmodeofcommunicationacross

variousdemographics.Asaresult,theseapplicationsare no longer just tools for casual conversation; they have become essential for business operations, customer service, and collaborative work environments. The versatilityofchatapplicationshasledtotheirintegration with other platforms such as CRM systems, project management tools, and social media, enhancing productivityanduserengagement.

The competitive landscape of chat applications drives innovation, with companies constantly introducing new featurestoenhanceuserengagementandexperience.This competitionnotonlypushestechnologicalboundariesbut also leads to higher standards of security and privacy. Given the increasing concerns over data privacy and security, ensuring the protection of user data from unauthorizedaccessandbreachesisparamount.Modern chat applications must implement robust security protocolstosafeguarduserinformation.Additionally,the implementation of end-to-end encryption and regular securityauditsarebecomingstandardpracticestoensure dataintegrityandusertrust.

Buildingachatapplicationinvolvesboththeclient-side (front-end)andserver-side(back-end)development.The MERNstack,consistingofMongoDB,Express.js,React,and Node.js,offersacomprehensiveframeworkfordeveloping theseapplications.ThisstackleveragesJavaScriptacross both the client and server sides, providing a seamless development experience and efficient performance. Moreover,themodularityoftheMERNstackallowsforthe integrationofadditionalfunctionalitiessuchasreal-time

Fig 1 Evolution of Chat Applications

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 12 Issue: 12 | Dec 2025 www.irjet.net p-ISSN: 2395-0072

communication, third-party service integration, and scalabilityoptimizations.

Purpose of the Study: The primary objective of this study is to develop a scalable, secure, and user-friendly real-timechatapplicationusingmodernwebtechnologies. Thisinvolvesunderstandingthevariouscomponentsofthe MERNstack,implementingrealtimecommunicationwith Socket.io, and ensuring secure user authentication and authorization with JWT. The study also aims to address challenges related to state management, user presence tracking, and error handling. Furthermore, the project explores the optimization of database queries and the efficient handling of large volumes of data, which are crucial for maintaining performance as the application scales.

2. METHODS AND MATERIAL

A. System Architecture and Technology Stack

System Architecture:

Fig: MERN + socket.io Architecture

A. Architectural Overview

The proposed system is a real-time web-based chat applicationdevelopedusing the MERN stack (MongoDB, Express.js,React.js,andNode.js)integratedwithSocket.IO for real-time bidirectional communication. The architecture follows a three-tier model consisting of the presentation layer, application layer, and data layer, ensuringmodularity,scalability,andmaintainability.

ThesystemcombinesRESTfulAPIsforauthenticationand dataretrievalwithWebSocket-basedcommunicationfor instantmessagedelivery.

B. Architectural Layers

1. Presentation Layer (Client Side)

The presentation layer is implemented using React.js, responsibleforrenderingtheuserinterfaceandmanaging client-sidestate.

Functions:

 Userauthentication(loginandregistration)

 Chatinterfacerendering

 Real-timemessagedisplay

 Socketconnectionmanagement

Technologies Used:

 ReactHooks(useState,useEffect)

 AxiosforRESTfulAPIcommunication

 Socket.IOClientforreal-timemessaging

TheclientcommunicateswiththebackendusingHTTP requests for REST APIs and establishes a persistent WebSocket connection via Socket.IO for real-time messaging.

2. Application Layer (Server Side)

The application layer is built using Node.js with Express.js,actingasthecorelogichandler.

a) RESTful API Module

Thismodulemanagesnon-real-timeoperations:

 UserauthenticationusingJWT

 Chatroomcreationandmanagement

 Retrievalofhistoricalmessages

REST APIs ensure data consistency and stateless communication.

b) Real-Time Communication Module

Socket.IO enables real-time communication by maintaining persistent WebSocket connections between clientsandtheserver.

Responsibilities:

 Managingsocketconnections

 Broadcastingmessagestochatrooms

 Trackingonlineandofflineusers

 Ensuringlow-latencymessagedelivery

3. Data Layer (Database)

ThedatalayerusesMongoDB,aNoSQLdatabase,tostore applicationdataefficiently.

Collections:

 User Collection: Stores user credentials and profileinformation

 ChatCollection: Maintainschatroomdetailsand participants

 Message Collection: Stores message content, senderID,chatID,andtimestamps

MongoDB’s document-based structure supports highwritethroughputandscalability

4. Authentication and Security Mechanism

ThesystememploysJSONWebTokens(JWT)forsecure authentication.

Authentication Flow:

 Usersubmitslogincredentials.

 ServervalidatescredentialsandgeneratesaJWT.

 Tokenissenttotheclientandstoredsecurely.

 TokenisattachedtosubsequentAPIrequestsand Socket.IOconnections.

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 12 Issue: 12 | Dec 2025 www.irjet.net p-ISSN: 2395-0072

This mechanism ensures secure access control and preventsunauthorizedsocketconnections.

5.Message Transmission Workflow

1. The sender composes a message on the client interface.

2. The message is transmitted to the server using Socket.IOevents.

3. The server validates and stores the message in MongoDB.

4. The message is broadcast to all users in the correspondingchatroom.

5. The receiving clients display the message in real time.

This flow ensures both real-time delivery and message persistence.

6. Scalability and Fault Tolerance

Tohandlealargenumberofconcurrentusers,thesystem supportshorizontalscalability.

Scalability Features:

 Loadbalancerfortrafficdistribution

 RedisadapterforSocket.IOeventsynchronization

 StatelessRESTAPIsforeasyserverreplication

These features enhance system performance and fault tolerance.

7. Advantages of the Proposed Architecture

 Lowlatencyreal-timecommunication

 Modularandscalabledesign

 Efficienthandlingoflargemessagevolumes

 Separation of concerns between REST and realtimeservices

Technology Stack: MERN Stack :

Fig: MERN tech. stack

TheMERNstackisapopularfull-stackJavaScriptsolution that includes MongoDB, Express.js, React, and Node.js. EachcomponentoftheMERNstackplaysavitalroleinthe developmentofawebapplication:

MongoDB

ANoSQLdatabasethatstoresdatainflexible,JSON-like documents.MongoDB’sschema-lessdesignallowsforthe storageofvarieddatastructuresandisparticularlywellsuited for applications with evolving data models. This flexibility makes MongoDB an ideal choice for chat applications,wherethedataschemacanchangefrequently asnewfeaturesareadded.Additionally,MongoDB’sability to handle large volumes of unstructured data efficiently makes it scalable for applications with a growing user base.[5]

Express.js

A minimal and flexible Node.js web application framework that provides robust features for web and mobileapplications.Express.jssimplifiesthedevelopment of server-side logic and APIs by offering a variety of middlewareandroutingoptions.Itplaysacrucialrolein handlingHTTPrequestsandresponses,managingsessions, andinteractingwithdatabases.Express.jsalsoallowsfor the integration of various authentication methods, includingJWT,OAuth,andsession-basedauthentication.

React

AJavaScriptlibraryforbuildinguserinterfaces.React’s component-basedarchitectureallowsdeveloperstobuild reusable UI components, making it easier to manage complex UIs. In the context of a chat application, React enables the creation of dynamic, responsive, and interactiveinterfaces.ItsvirtualDOMfeatureoptimizesUI rendering by updating only the components that have changed, resulting in improved performance. React’s ecosystemalsoincludestoolslikeReactRouterforclientsideroutingandReduxforadvancedstatemanagement.

Node.js

A JavaScript runtime built on Chrome’s V8 JavaScript engine.Node.jsallowsdeveloperstorunJavaScriptonthe server,providingascalableandefficientenvironmentfor web applications. Node.js is particularly well-suited for real-time applications like chat, due to its non-blocking, event-driven architecture. This allows Node.js to handle multiplesimultaneousconnectionswithhighthroughput, making it an ideal choice for the backend of chat applications.

Socket.io

Socket.io is a JavaScript library that enables real-time, bidirectional communication between web clients and servers.ItabstractsWebSocketsandprovidesafallbackto long polling, ensuring reliable real-time communication across various environments. Socket.io is crucial for implementing features such as real-time messaging, presenceupdates,andnotificationsinthechatapplication. One of the key advantages of Socket.io is its ability to maintain low-latency communication, which is essential for delivering a seamless user experience in real-time

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 12 Issue: 12 | Dec 2025 www.irjet.net p-ISSN: 2395-0072

applications.Italsosupportsvariousroomandnamespace functionalities, allowing for scalable and organized communicationchannelswithinthechatapplication.

TailwindCSS

TailwindCSSisautility-firstCSSframeworkthatenables rapiddevelopmentofcustomuserinterfaces.Itprovides low level utility classes that Can be composed to build complex designs. TailwindCSS allows developers to maintain a consistent design language across the application by using a predefined set of design utilities. Daisy UI builds on TailwindCSS by offering a set of predesigned components that can be easily customized and integratedintotheapplication.Thesecomponentsinclude buttons,forms,alerts,andmodals,whichareessentialfor buildingtheuserinterfaceofachatapplication.Together, these tools enable the development of a responsive and visually appealing front-end that can adapt to various screensizesanddevices

JWT (JSON Web Token)

JWTisacompact,URL-safetokenformatthatisusedfor securelytransmittinginformationbetweenparties.Inthe contextofachatapplication,JWTisusedtomanageuser authentication and authorization. It ensures that only authenticateduserscanaccessthechatfunctionalityand providesamechanismforverifyinguseridentity.JWTsare statelessandcanbeeasilyintegratedwithRESTfulAPIs, makingthemapopularchoiceformanagingusersessions in modern web applications. Additionally, JWTs can includecustomclaimsthatstoreuserrolesorpermissions, enablingfine-grainedaccesscontrolwithintheapplication.

React Context

State management is a critical aspect of real-time applications. React Context is used for managing less dynamic state, such as user preferences and theme settings.Itprovidesasimpleandefficientwaytopassdata throughthecomponenttreewithoutrelyingonprops

Error Handling

Robust error handling is essential for ensuring the reliability and stability of the chat application. On the server side, errors are managed through middleware, whichallowsfor centralized errorhandlingandlogging. This approach simplifies debugging and ensures that errorsarehandledconsistentlyacrosstheapplication.On

theclient side,React error boundariesareusedtocatch and handle errors in the UI, providing a graceful degradation of functionality and user-friendly error messages.Additionally,loggingandmonitoringtoolscan be integrated to track errors and performance issues in real-time,allowingdeveloperstoaddressproblemsbefore theyimpacttheuserexperience.Propererrorhandlingnot onlyimprovestheoverallstabilityoftheapplicationbut alsoenhancesusertrustbyensuringasmoothandreliable communicationexperience.

3. RESULTS AND DISCUSSION

Theproposedsystem, Quick-Chat,aMERNstack–based real-timechatapplicationintegratedwithSocket.IO,was successfully implemented and evaluated to analyse its performance,scalability,andreliability.Theexperimental analysis focused on message delivery latency, database efficiency, and system stability under concurrent user loads.

A. Functional Results

TheQuick-Chatsystemsuccessfullysatisfiedallfunctional requirements:

 Secureuserregistrationandauthenticationusing JWT

 One-to-oneandgroupchatfunctionality

 Real-time message transmission without page reloads

 PersistentmessagestorageusingMongoDB

 Accurate retrieval of chat history after user reconnection

The use of Socket.IO enabled seamless real-time bidirectionalcommunication,significantlyimprovinguser interaction.

B. Performance Evaluation

1. Message Delivery Latency

The message delivery latency in Quick-Chat was measured as the time elapsed between message transmission by the sender and its reception by the recipient.

Number of Users Average Latency (ms) 2 45 10 58 50 82

The results indicate that Quick-Chat maintains low latency even with an increasing number of concurrent users, demonstrating the effectiveness of Socket.IO for real-timecommunication.

Fig 3 JWT Flow Diagram

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 12 Issue: 12 | Dec 2025 www.irjet.net p-ISSN: 2395-0072

2. Database Performance

MongoDB efficiently handled high-frequency message insertionsinQuick-Chatwithoutnoticeableperformance degradation.Indexedqueriesensuredfastretrievalofchat history,evenunderheavyloadconditions.

C. Scalability Analysis

TheQuick-Chatsystemdemonstratedeffectivescalability bysupportingmultipleconcurrentsocketconnections.The stateless REST architecture enabled horizontal scaling, while room-based event broadcasting reduced unnecessarynetworkoverhead

D. Reliability and Data Consistency

AllmessagesinQuick-Chatwerestoredinthedatabase before being delivered to recipients, ensuring reliable messagepersistence.Intheeventoftemporarynetwork failures,messagesweresuccessfullyretrieveduponuser reconnection,maintainingdataconsistency.

E. Comparative Analysis

Comparedtotraditionalpolling-basedchatapplications, Quick-Chatexhibited:

 Lowermessagedeliverylatency

 Reducedserverresourceconsumption

 Improveduserexperience

These results confirm the advantages of WebSocketbasedcommunicationforreal-timesystems.

F. Discussion

The experimental results validate that Quick-Chat effectivelycombinesRESTfulAPIsandWebSocket-based communicationtodeliverascalableandlow-latencyrealtime chat solution. The architecture is well-suited for modern communication platforms requiring instant messageexchange.

4.FUTURE ENHANCEMENTS

The Following Enhancements are Planned for Future Versions of the Chat Application:

 End-to-End Encryption: To ensure complete privacy, end-to-end encryption will be implemented, so thatonlythecommunicatinguserscanreadthemessages.

 File Sharing: Adding the capability for users to sharefiles,documents,andvideos,withinthechat.

 Video and Voice Calls: Integrating WebRTC for videoandvoicecallfunctionality.

 ImprovedMobileExperience:Optimizingtheuser interfaceandperformanceformobiledevices.

 AI-Powered Features: Incorporating AI for featureslikechatbots,messagesuggestions,andsentiment analysis.

5. CONCLUSION

Thedevelopmentofareal-timechatapplicationusingthe MERN stack, Socket.io, TailwindCSS, and other modern web technologies showcases the potential for creating scalable,secure,andefficientapplications.Theapplication provides a robust and responsive user experience, with features such as real-time messaging, presence updates, andresponsivedesign.Futureworkincludesimplementing end-to-endencryptionforenhancedsecurity,optimizing performance for mobile users, and adding new features suchasfilesharingandvideocalls.Theseimprovements willfurtherenhancethefunctionalityandsecurityofthe chatapplication,providingacomprehensivesolutionfor real-timecommunication.

6. REFERENCES

1. Fielding,R.T.(2000). ArchitecturalStylesandthe DesignofNetwork-basedSoftwareArchitectures. University ofCalifornia,Irvine.(OriginofRESTAPIconceptsusedin MERNapplications)

2. Tilkov, S. (2010). Node.js: JavaScript on the server. IEEE Internet Computing, 14(6), 66–67. (FoundationforusingNode.jsinbackendarchitecture)

3. MongoDBInc.(2024). MongoDBDocumentation. Retrieved from https://www.mongodb.com/docs (DatabasereferenceforMERN)

4. React Team (Meta). (2024). React Documentation. Retrieved from https://react.dev/ (Frontendframeworkreference)

5. Express.js Foundation. (2024). Express Documentation. Retrieved from https://expressjs.com/ (BackendroutingandAPIdevelopment)

6. Socket.io Developers. (2024). Socket.io Documentation Real-time communication engine. Retrieved from https://socket.io/ (Real-timechatimplementationreference)

7. Multer GitHub Repository. (2024). Middleware for handling multipart/form-data. Retrieved from https://github.com/expressjs/multer (Iffileuploadsorprofileimagesareusedinthechatapp)

8. JWT(JSONWebToken)IETFStandard.(2015). RFC 7519 JSON Web Token (JWT). Retrieved from https://www.rfc-editor.org/rfc/rfc7519 (AuthenticationreferenceusedinMERNapps)

9. Bachmann, F., & Bass, L. (2001). Introductionto the Attribute Driven Design Method. Carnegie Mellon University. (Forsystemarchitectureanddesignmethodology)

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 12 Issue: 12 | Dec 2025 www.irjet.net p-ISSN: 2395-0072

10. NPM Registry. (2024). Nodemon Package Documentation. Retrieved from https://www.npmjs.com/package/nodemon (DevelopmenttoolcommonlyusedinMERNbackend)

11. AxiosGitHubRepository.(2024). HTTPclientfor the browser and Node.js. Retrieved from https://github.com/axios/axios (UsedforAPIcommunicationinMERN)

12. W3C. (2017). HTML5 Specification. Retrieved from https://www.w3.org/TR/html5/ (Frontendstructuralreference)