Chat Application Using Mern Stack
Vinoth Kumar G and G. Dhivya
Department of Computer Application, Karpagam Academy of Higher Education, Coimbatore-641 021, Tamil Nadu, India
Keywords. MERN (MongoDB, Express.js, React.js, Node.js), Internet, Chat, Security.
Abstract: The latest evolution of the Internet has brought the entire world within our reach. Everything now revolves
around the internet, from the exchange of information to experiencing reality. The internet has transformed
the world into an interconnected global community, and this project is no exception, as it relies heavily on the
internet. This document highlights the importance of reverse communication in our daily lives and its
profound impact on the technological landscape. The objective here is to create a reverse communication
system based on the MERN stack. This system enables people to send messages privately and publicly, as
well as share various forms of content such as text, images, videos, and more. It's an online platform designed
for people to interact and converse with each other over the internet. Moreover, it is not only more reliable
and secure than traditional communication systems but also surpasses them in popularity. Reverse
communication features are highly sought after by internet enthusiasts and smartphone users alike. Every
year, hundreds of millions of smartphone owners engage in reverse communication activities. These
communication tools offer free and convenient communication options, and most of them are available as free
downloads, making them incredibly appealing to users. These platforms provide a wide range of services and
built-in features to their users, although often, users tend to overlook the broader aspects of their interactions
and conversations.
1 INTRODUCTION strategies to safeguard the security of user data. In
today's world, data theft constitutes a major criminal
The phenomenon of reverse communication wields a concern, with a multitude of cases arising. As a result,
profound impact on our everyday lives. A plethora of companies are compelled to implement stringent
reverse communication platforms have gained measures to protect against data breaches by external
widespread popularity worldwide. Each of these entities. The fundamental reverse communication
platforms introduces novel features that distinguish system should encompass both message transmission
them from their peers. These platform providers and reception processes occurring simultaneously.
engage in spirited competition, continually rolling out Within this system, the concurrent sending and
competitive features with each new release. Their receiving of messages occur seamlessly, facilitated by
contributions hold significant importance for users the MERN technology stack. The rapid expansion and
and profoundly influence their daily routines. Users enhancement of the internet have prompted an
seek out superior internet-based communication increasing number of individuals to opt for web- based
platforms that they perceive as dependable, secure, communication tools.
and trustworthy. Currently, some of the prevalent
reverse communication platforms include WhatsApp,
Facebook, Instagram, Hike, and others. These 2 REVIEW OF LITERATURE
platforms collectively boast billions of avid users SURVEY
across the globe, establishing the companies behind
them as global leaders. These companies have Such tools have revolutionized communication
demonstrated consistent revenue growthand employ across vast distances, necessitating real-time and
vast teams dedicated to developing innovative features multi-platform capabilities to cater to a broad user
to stay ahead in the competitive landscape. These base. Notably, web-based real-time communication
platforms offer diverse features and employ various tools eliminate the need for additional third-party
240
G, V. and Dhivya, G.
Chat Application Using Mern Stack.
DOI: 10.5220/0012612100003739
Paper published under CC license (CC BY-NC-ND 4.0)
In Proceedings of the 1st International Conference on Artificial Intelligence for Internet of Things: Accelerating Innovation in Industry and Consumer Electronics (AI4IoT 2023), pages 240-244
ISBN: 978-989-758-661-3
Proceedings Copyright © 2024 by SCITEPRESS – Science and Technology Publications, Lda.
Chat Application Using Mern Stack
software, making visual communication easily users. This website also provides a valuable directory
accessible. The technology stack utilized in building of race sponsors, addressing the challenge of locating
these tools includes React.js, Node.js with the sponsors during crucial times.
Express framework, and MongoDB for database Moreover, users can create or join chat rooms,
management. Communication relies on servers for facilitating global conversations and fostering
message exchange, facilitated through point-to-point connections with individuals worldwide. These chat
connections between servers. This innovative applications have gained immense popularity among
approach incorporates a response framework, internet users and smartphone owners, with millions
resulting in a six-fold enhancement in performance of users engaging in chat conversations annually.
compared to systems developed using PHP. They offer cost-free communication and are often
This paper focuses on the development of an available as free downloads, making them
Online College Management System, a significant particularly attractive to users. While these
asset for educational institutions. Named College applications offer various services and built-in
ERP and built on the MERN stack, this system serves features, they sometimes overshadow their core
academic professionals and their diverse purpose – simple and effective communication.
responsibilities. Its primary purpose is to streamline In conclusion, the recent evolution of the internet
access to critical information within an educational has effectively brought the entire world within our
organization. To achieve this, users must register with reach, revolutionizing the way we exchange
the system, which functions as an information hub for information and engage in online transactions. This
the institution. Both students and staff, both paper underscores the significance of chat
specialized and non-specialized, can access and applications in modern daily life and their impact on
upload data to the system's database. In today's the technological landscape. The project aims to
rapidly evolving business landscape, understanding develop a chat system based on Java multithreading
customer demand in an efficient and timely manner is and network design, enabling secure private and
paramount. The shift to online commerce has become public communication, as well as seamless sharing of
integral to the lives of the younger generation. E- various media content. This online system is designed
commerce platforms offering a wide array of products to foster interaction and collaboration on the internet,
have transformed basic needs into accessible luxuries. prioritizing reliability and security over traditional
This design introduces an interactive web interface communication systems. The utilization of Java,
for viewing diverse products and enables registered multithreading, and client-server architecture ensures
users to purchase items using various payment the robustness and scalability of the chat application,
methods. Additionally, it provides an accessible making it suitable for deployment in various private
avenue for business owners to manage incoming organizations, such as colleges and IT institutions.
orders.To establish an e-commerce web platform,
various technologies have been examined and Proposed System:
incorporated, including React.js, MongoDB, Node.js, The envisioned chat application system, constructed
and Express.js. This project aims to simplify the using the MERN stack, is set to emerge as a
presentation of diverse products and the creation of a comprehensive web application that empowers users
web platform that seamlessly connects customers in effortlessly establishing, overseeing, and erasing
with their desired products. Conversational tools have chat rooms. This system will comprise four
become indispensable for smartphone users, offering fundamental elements: a MongoDB database, an
the capability to exchange text messages, images, and Express.js backend, a React.js frontend, and a Node.js
videos securely and free of charge. This paper server.
endeavors to propose a chat application with End-to- The MongoDB database will serve as the
End encryption, ensuring secure communication repository for all chat rooms and user-related data,
while prioritizing data protection. A set of security encompassing messages dispatched by users.
conditions is presented, serving as the foundation for Meanwhile, the Express.js backend will shoulder the
the development of this chat application, which is responsibilities of user authentication and serve as the
then compared with other popular alternatives to intermediary for communication between the server
validate its End-to-End encryption capabilities. and the database. The React.js frontend will craft the
Additionally, a website has been developed to user interface, enabling users to seamlessly create and
allow users to sign up, log in, and engage in academic administer their chat rooms. Finally, the Node.js
and social interactions, including sharing updates, server will facilitate communication between the
liking, and commenting on posts, and following other frontend and backend components.
241
AI4IoT 2023 - First International Conference on Artificial Intelligence for Internet of things (AI4IOT): Accelerating Innovation in Industry
and Consumer Electronics
The system will feature a user-friendly interface that Furthermore, during user interactions within
simplifies the process of chat room creation and conversations, the database dutifully maintains
management. Users will have the capability to records of messages exchanged and the participants
exchange messages with each other and peruse past involved.
conversations. Additionally, a straightforward The Node.js server assumes the crucial role of
authentication system will permit users to log in and overseeing user authentication procedures. This
log out of their accounts securely. encompasses critical tasks like validating usernames
In summary, the proposed chat application system and passwords, in addition to promptly dispatching
utilizing the MERN stack promises to be an confirmation messages following user registration or
uncomplicated and user- friendly tool. It will empower login.
users to effortlessly create, manage, and delete chat The Express server primarily serves as a conduit,
rooms while ensuring secure communication and data responsible for routing requests originating from the
storage. front-end. Additionally, it capably manages user
sessions and ensures the seamless connection
Existing System: between the front-end and the database.
The current configuration of a chat application On the user-facing front, the React front-end
utilizing the MERN stack comprises essential functions as the user interface. Through this interface,
components, including a MongoDB database, a users gain access to their ongoing conversations, send
Node.js server, an Express server, and a React front- messages, and conveniently search for other users.
end. Moreover, it efficiently handles the presentation of
Within the MongoDB database, user data and notifications and incoming messages, ensuring users
conversations are stored. When a user registers, their are promptly informed when new messages arrive.
email address, username, and password are recorded Technology Used:
in the database. Additionally, when users engage in HTML, CSS, and JavaScript:
conversations, the database maintains records of the MongoDB - A Cross-Platform Document-Oriented
conversation's messages and participants. Database
The Node.js server assumes the role of managing Express.js - A Backend Framework
user authentication. This encompasses tasks such as React.js - A Frontend Library
validating usernames and passwords, as well as Node.js - A JavaScript Runtime Environment
issuing confirmation messages upon user registration HTML, known as the Hyper Text Markup
or login. Language, serves as the industry standard for creating
The Express server primarily functions as a documents intended for webdisplay. It is compatible
conduit for directing requests originating from the with technologies such as Cascading Style Sheets
front-end. Furthermore, it handles user sessions and (CSS) for styling and scripting languages like
upholds the connection between the front-end and the JavaScript for interactivity.
database. CSS, short for Cascading Style Sheets, is a styling
On the user-facing side, the React front-end serves language employed to define the presentation of
as the interface through which users can access their documents written in markup languages like HTML.
conversations, transmit messages, and search for other CSS's primary purpose is to enable the separation of
users. It also takes charge of displaying notifications document structure and styling, encompassing layout,
and messages to users upon receiving new messages. color schemes, and font selections.
JavaScript, often referred to as Java's cousin,
stands as a foundational technology of the World
3 METHODOLOGY Wide Web. Over 97% of websites employ JavaScript
on the client side to enhance web functionality,
The present setup of a chat application employing the frequently incorporating third-party libraries. Major
web browsers dedicate a JavaScript engine to execute
MERN stack is composed of fundamental
code on users' devices.
components, including a MongoDB database, a
In the MERN stack, React.js takes the lead as the
Node.js server, an Express server, and a React front-
declarative JavaScript framework for crafting
end.
Inside the MongoDB database, user data and dynamic client-side applications in HTML. React
enables the creation of user interfaces using reusable
conversations are securely stored. When a user
components, linking them to backend data, and
registers, their email address, username, and
rendering them as HTML.
password are meticulously recorded in the database.
242
Chat Application Using Mern Stack
Figure 1: (a)MERN Architecture (b) Block Diagram (c) Register and Login page (d) JSON Token.
Node.js, positioned as the server-tier component, runs subsequent discussions, which elucidate the proper
the Express.js server-side framework. Express.js is methods for securely storing hashed data to
described as a rapid, unbiased, minimalist web authenticate user-provided passwords during the
framework for Node.js, and it lives up to this login process.
description. Express.js offers robust features for URL
routing, facilitating the matching of incoming URLs
with server functions, and efficiently handling HTTP 5 ALGORITHM
requests and responses.
In the database tier, MongoDB comes into play. Entire books can be dedicated to these topics, and it
MongoDB is a versatile, document-oriented database is advisable to explore more comprehensive resources
suitable for storing various types of data such as user
for a deeper understanding of these subjects, as
profiles, content, comments, uploads, and events. Its
suggested in the references at the end of this text.
compatibility with React, Express, and Node makes it
Jwt Hash Possword Store in Database: The JWT
a seamless choice for web applications.
Hashing Algorithm is a cryptographic technique
employed to securely safeguard passwords in
contemporary web applications. This algorithm is
4 RESULTS AND DISCUSSION based on the JSON Web Token (JWT) standard and
is designed to offer both simplicity and robust
A user's password holds greater sensitivity compared security. To grasp the JWT Hashing Algorithm's
to their session ID due to three fundamental reasons: functionality, it's essential to first comprehend what a
1. Session IDs can be subject to access restrictions. JSON Web Token (JWT) entails.
For instance, despite having a session ID, a system A JWT is an openly recognized standard (RFC
may require the user to re-enter their password for 7519) that delineates a secure method for exchanging
specific actions, such as modifying their account information between two parties in the form of a
email address. JSON object. It comprises three core components: a
2. Session IDs can be invalidated or revoked. header, a payload, and a signature. The header and
3. A user's password is frequently used in various payload serve to identify the user, while the signature
other systems, such as banking websites. If it gets ensures data integrity and verifies that it hasn't been
compromised, it could potentially be exploited in tampered with.
other services, posing a significant risk to the The JWT Hashing Algorithm is specifically
user's security and well-being. employed to store passwords securely. It operates by
Given these considerations, it is of paramount initially combining the password with a salt—a
importance to NEVER store or reuse a user's random string of characters used to thwart attackers
password. We will delve into hashing techniques in from easily deducing the password. This salt is
243
AI4IoT 2023 - First International Conference on Artificial Intelligence for Internet of things (AI4IOT): Accelerating Innovation in Industry
and Consumer Electronics
securely stored alongside the hashed password in a projects to individuals, providing an avenue for
database. When a user attempts to log in, the independent work and entrepreneurship.
password they provide is hashed in the same way with
the salt and then compared to the stored hashed
password in the database. Access is only granted if
these two hashes perfectly match.
REFERENCES
This algorithm is intentionally designed to be
highly secure and is considered one of the most robust Shubham Patil, Saurav Daware, Ameya Bhagat, Prof.
Jayant Sawarkar, Department of Computer
methods for password storage. The use of a unique Engineering, Datta Meghe college of Engineering,
and randomly generated salt for each user makes it Airoli, Navi Mumbai, Maharashtra, India.
exceedingly challenging for attackers to guess the Sourabh Mahadev Malewade, Archana Ekbote,
password. Additionally, the hashed password is not Information Technology Department VCET, Vasai,
stored in plain text, further enhancing security by Palghar, India.
preventing unauthorized access. Akhilesh sarjit M S, Srivishak V, Shiddarth S, Sarvana
In summary, the JWT Hashing Algorithm is a Kumar P, Preethi D, Department of Electronics and
secure method for safeguarding passwords in Communication Engineering, Bannari Amman Institute
contemporary web applications. Built upon the JWT of Technology, Erode, Tamil Nadu, India.
Tanya agarwal, Swapnil Upadhyay, Shreeansh Srivastava,
standard, it prioritizes both simplicity and security. Rohit Sharma, Poornima college of Engineering, India.
By utilizing a unique salt and securely hashing Nithin Katla, Gautham Kumar M, Pidugu Rohith Raj, Dr. S
passwords, it effectively guards against unauthorized Shitharth, Dept. of CSE, Vardhaman college of Eng.,
access and ensures the user's data remains secure. Hyderabad.
Noor Sabah, Jamal M , Kadhim and Ban N. Dhannoon,
Department of computer science , Al-Nahrain
Univerversity.
6 CONCLUSION Sumit Kumar Mishra, Ankit Kumar, Ankush Kaundal,
Upasna Joshi, Department of Computer Science and
In conclusion, I can confidently state that this learning Engineering, Delhi Technical Campus, New Delhi,
experience has been tremendously enriching. Thanks India
to this program, I have gained a deeper understanding Suman Kharel, Jukka Jauhiainen, Degree Programme in
of my specialized skills, and it has provided me with Information Technology, Oulu University of Applied
valuable interactions. Currently, the MERN stack is a Sciences
Bishal Kumar, Kumar Sagar, M Arvindhan, Ankit kr.
widely adopted technology for web and chat
Tiwari, Galgotias University Greater, Noida, India.
applications, enjoying immense popularity among Lavish Mangal, Pushpendre Pratap Singh, Keshav Gupt, Jai
developers worldwide. When we explore the internet, Kumar, Saijal Gupta, Department of Information
we encounter millions of websites and applications Technology, Dr. Akhilesh Das Gupta Institute of
built using MERN and MEAN stacks. Technology and Management, New Delhi, India.
I find myself navigating a different terrain from
what I'm accustomed to, and it's a journey of growth
and independence. This experience has not only
enhanced my professional skills but also my personal
life, instilling the belief that I can achieve more and
continue to acquire new skills independently.
For those considering a career in this field, there
are vast opportunities available. Both private and
public organizations are actively recruiting web
developers and app developers for their online
projects and development efforts. With the rapid
growth of the online industry, the demand for web
and app development professionals is steadily
increasing, promising significant job prospects in the
days to come.
Additionally, individuals well-versed in this field
can explore freelance opportunities. There are
numerous online platforms that offer freelance
244
