e-ISSN: 2582-5208

International Research Journal of Modernization in Engineering Technology and Science

( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:05/Issue:02/February-2023 Impact Factor- 6.752 www.irjmets.com

CHATTING WITH EASE: DESIGNING AND IMPLEMENTING A USER-

FRIENDLY CHAT APPLICATION
Seema Dahiya*1, Vishal Behl*2, Varun Sharma*3, Rohan Jain*4,
Rajat Kumar Goyal*5
*1Assistant Professor, Dept. Of Computer Science And Engineering, HMR Institute Of
Technology & Management, Delhi, India.
*2,3,4,5Student, B. Tech, Dept. Of Computer Science And Engineering, HMR Institute Of
Technology & Management, Delhi, India.
DOI : https://www.doi.org/10.56726/IRJMETS33321
ABSTRACT
This paper suggests designing a chat application that would allow users to interact with each other instantly. An
end-to-end chat application allows users to communicate with each other in real-time. Developing such an
application requires the use of a range of tools and technologies, etc. The application will be built using a client-
server architecture, where the server will handle all the data processing and communication between clients.
The application will be designed with a Graphical User Interface (GUI) and will include features such as text
messaging, file sharing, etc. The application will be developed using MERN where MongoDB is used as a
database. The application will also support various security measures to protect the data of its users. The
development of this application will leverage existing open-source libraries and frameworks to deliver a robust,
secure, and feature-rich experience to its users. In addition to facilitating real-time communication, chat
applications also offer a number of other benefits. For example, many chat applications allow users to create
groups where they can discuss specific topics or share information with a larger group of people. This can be
useful for teams and organizations, as it allows members to collaborate and share ideas more easily.
Keywords: MERN (Mongodb, Node.Js, Express.Js, React Native), Security, Graphical User Interface (GUI), Chat
Application, Real-Time, Single Sign On (SSO).
I. INTRODUCTION
A chat application is a type of software that enables users to communicate with each other in real time. It
typically allows users to exchange text messages, images, audio clips, and video clips with one another using
this feature. Some chat applications also allow users to create group conversations and audio or video calls.
Chat applications are used for personal and professional communication, as well as for entertainment and
gaming.[1]
Of course, like any technology, chat applications are not without their drawbacks. One of the main concerns
surrounding chat applications is the issue of security and privacy. Many chat applications have faced criticism
for their handling of user data, and there have been instances of hackers and other malicious actors accessing
user information. Users should be conscious of the risks associated with chat applications and take steps to
safeguard their information.
Additionally, chat applications can be a breeding ground for misinformation and fake news, as users can easily
share unverified or false information with others.
A core point of numerous instant runner guests is the capability to see whether a friend or colleague is online
and connected through the named service -- a capability known as presence. As the technology has evolved,
numerous IM guests have added support for features similar as the train transfer and image sharing within an
IM session.[2]
Chat applications are still widely used and important for communication, even with the worries people may
have. As the technology advances, it is expected that chat applications will remain a prominent part of how
people interact.

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[75]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:05/Issue:02/February-2023 Impact Factor- 6.752 www.irjmets.com
II. OBJECTIVE
1. Design a user-friendly, intuitive interface: Design a user interface that facilitates simple interaction with the
chat application. Ensure that the interface is intuitive and easy to understand.
2. Develop a secure system: Develop a secure system that ensures that all users’ data is encrypted and that all
communications are secure. Ensure that all user data is stored securely and that the chat application is not
vulnerable to attack.
3. Assist in verifying user identity: Create a user authentication system that allows users to securely sign in
and out of the chat application. Ensure that user authentication is secure and that users’ data is securely stored.
4. Develop communication features: Develop features such as file sharing and text messaging to facilitate
communication between users. Ensure that these features are secure and can be used without any disruption.
5. Implement notifications: Develop notifications that alert users when they receive messages or when
someone contacts them.
To summarize the development of an end-to-end chat application that allows users to communicate with each
other in real-time. The application should include features such as one-on-one chat, group chat, file sharing, and
other messaging functions. The application should also provide a secure and reliable platform for users to
communicate with each other.
PROBLEM STATEMENT
• The project is to create an online chat application that will enable users to communicate with each other in
real-time.
• The chat application should also be secure, reliable, and easy to use.
• The chat application should offer the ability to create groups and to customize the user experience.
• The chat application should enable users to send and receive text messages, share files, etc.
INNOVATIVE IDEAS OF THE PROJECT
1. Voice and Video Calling: Adding voice and video calling would let users communicate more naturally, as if
they were in the same room.
2. Offer Real-time translation: Implement a real-time translation feature that allows users to communicate
with people who speak different languages.
3. Forums: Allow users to create and join forums on a variety of topics to facilitate discussions and community
building.
4. Incognito Keyboard: An incognito keyboard is a type of virtual keyboard that does not store any data about
the keys that are pressed or the words that are typed. This can be useful in situations where you want to keep
your typing activities private, such as when typing sensitive information like passwords or personal details.
5. Integration with Other Apps: Allowing users to integrate other apps with their chat application would give
them more options and features.
FUTURE SCOPE
1. Screenshot Alert: The screenshot notification alerts a user when another user has taken a screenshot of
their content such as the profile picture, chats. When a user takes a screenshot, the other person will be notified
that a screenshot was taken of their content with an in-app notification saying that reads “[Username] took a
screenshot of your profile picture” & “[Username] took a screenshot of the chat”. This feature is designed to
help protect users’ privacy, as it encourages users to be aware of who is taking their private information.
2. Chat Lock: A chat lock feature is a feature that allows users to lock their chats with another user or group of
users, preventing anyone else from accessing or viewing the contents of the chat. It is a useful tool for those
who want to keep their conversations private and secure.
3. Chatbots: Chatbots could be used to offer customer support and provide automated responses to commonly
asked questions.
4. Location Sharing: Incorporating location sharing would allow users to easily share their current location
with their contacts.

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[76]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:05/Issue:02/February-2023 Impact Factor- 6.752 www.irjmets.com
5. Implement Anti-Malware Scan: Implement an anti-malware scanning system in chat application. This will
help to detect any malicious documents such as images, files sent by any user. It will also help to alert the user if
any malicious software is detected.
POSITIVE IMPACT
Chat applications provide real-time communication, allowing users to interact with each other instantly. This
feature is beneficial for businesses and organizations where prompt and efficient communication is vital.
Another advantage of chat applications is their versatility and accessibility. These applications can be used on a
wide range of devices, including smartphones, tablets, and computers, making it easy for users to stay
connected no matter where they are. Additionally, many chat applications are available for free, making them
an affordable option for individuals and organizations alike.
III. TECHNOLOGY USED
Realtime chat applications are designed using HTML, CSS3, JavaScript and Bootstrap, which make them more
attractive, useful and user-friendly. Markup languages make the applications more engaging and imaginative. [3]
1. Socket IO: Socket.IO is an efficient way for developers to create interactive, real-time applications that
feature bidirectional communication between the server and the client. It supports Web-Sockets and other
techniques such as JSON long polling and JSONP long polling through a single API, allowing developers to create
features like real-time dashboards, chat apps, and multiplayer games. Socket.IO allows users to form
connections between their clients and servers, enabling them to share data in real-time. [4]
2. Mongo DB: MongoDB is a database management system designed to rapidly develop web applications and
internet infrastructure. MongoDB is a document-oriented NoSQL database that is used for high-volume data
storage. Its data model and persistence strategies enable it to provide high read-and-write throughput and the
capacity to scale easily with automatic failover, regardless of the number of database nodes needed. It is
classified as a NoSQL database because it does not use a standard table-based relational database structure. [5]
MongoDB is built for scalability, high availability, and performance.
3. Express JS: Express is a free and open-source web application framework written in JavaScript, released
under the MIT License, which offers a comprehensive set of features to develop web and mobile applications. It
is especially created to create web applications and APIs and is highly regarded as the go-to server framework
for Node.js. [6]
4. Crypto.JS: Crypto.JS is a JavaScript library of cryptographic functions designed for use in web applications. It
is used to perform various tasks such as encryption, decryption, hashing, key generation, and digital signature
verification. It is open-source and supports various algorithms such as AES, RSA, SHA, MD5, and HMAC.
Crypto.JS is a collection of cryptographic algorithms that are written in JavaScript and are gaining popularity.
They are speedy, and their interface is straightforward and consistent. [7]
5. React Native: React Native is a JavaScript framework that enables developers to create native mobile apps
using React, a JavaScript library which is well-known for constructing user interfaces. With React Native,
components are expressed in a declarative way, allowing developers to create a rich mobile UI. React Native
directly renders native components and APIs, resulting in improved speed and performance. [8]
6. Node.JS: Node.JS is a cross-platform JavaScript runtime environment that enables the server-side execution
of JavaScript code.[9] It is used to create server-side and networking applications and is well-known for its non-
blocking I/O API and asynchronous event-driven architecture, which makes it efficient and lightweight. Node.JS
was designed with real-time, push-based architectures in mind, but is now predominantly used for non-
blocking, event-driven servers such as web sites and back-end API services.
7. JavaScript: JavaScript is a programming language that allows you to create content and features that update
themselves automatically, control multimedia, animate pictures, and more on the web. It is primarily used for
web development but can also be used to develop applications for server and mobile platforms. JavaScript
offers dynamic abilities like creating objects at runtime, variable parameters, function variables, generate
dynamic scripts, examine objects, and retrieve source code. [10]
8. JSON Web Token (JWT): A JWT-based login screen may include a username and password form, followed by
a JWT that is sent to the server. The server verifies the JWT and upon successful verification, the user is allowed
access. This process is repeated each time the user attempts to access the application, providing a secure and
www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science
[77]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:05/Issue:02/February-2023 Impact Factor- 6.752 www.irjmets.com
reliable authentication system. It is composed of three distinct parts: the header, the payload, and the signature.
They are particularly helpful when making API calls since they are stateless, meaning they do not require any
server-side storage. They are also used as a mechanism for Single Sign-On (SSO) solutions, allowing users to log
into multiple sites using a single set of credentials.
9. REST API: An API that follows the REST architectural style is an interface that uses HTTP requests to GET,
PUT, POST, and DELETE data.[11] This concept of web development typically applies only to the client-side of a
web application, and is a way for different components of a computer system to communicate with each other.
They provide a way for developers to interact with these systems in a structured and consistent manner. It is an
architectural pattern used to describe how software applications should interact with each other. REST APIs
are often utilized to create web services that can be accessed by different clients, such as mobile phones, web
browsers, and other applications.
10. Bcrypt: Bcrypt is a password hashing function that utilizes the Blowfish cipher to generate secure
passwords. [12] Bcrypt is a popular algorithm for hashing passwords because it is resilient against brute force
attacks and is very secure. It uses a salt and a key derivation function to generate an encrypted representation
of a password which can then be stored in a database. By increasing the iteration count over time, bcrypt can
scale with the advancements in computing power, offering the greatest benefit.
11. Multer: Multer is a Node.js middleware that is specially designed to handle multipart/form-data, with its
primary purpose being the uploading of files. [13] It is written on top of the multi-party module. Multer extends
the request object with two components: a body object and file or files object. The body object holds the values
of form's text fields, and the files object keeps the files uploaded through the form.
12. React Native Elements: It is a library of React Native components. It helps developers create beautiful,
polished, and performant React Native apps quickly and easily. The library offers a wide range of components
for UI, such as buttons, cards, lists, forms, input fields, and so on. It also supports theming, allowing developers
to create custom designs for their apps. React Native Elements is a great choice for developers who need a
library of UI components that are both responsive and performant. It is also an excellent choice for developers
who are looking to quickly create beautiful mobile apps. The goal of React Native Elements is to offer a
comprehensive UI toolkit for creating apps in React Native, with many excellent UI components from
developers in the open-source community. [14]
IV. HOW END-TO-END ENCRYPTION WORKS
End-to-end encryption (E2EE) is a method of transmitting data where only the sender and the intended
recipient can access the information. It involves the use of a client-side application, along with an encryption
protocol that encrypts the message before it is sent to the server, and decrypts it when it is received.
The encryption is done using a shared secret key that is unique to the two parties involved. This secret key is
used as part of the encryption process, which scrambles the message so that it can only be decrypted by the
intended recipient.
The encryption process is designed to ensure that the message is secure from interception and alteration by
any third-party. This is achieved by ensuring that the message is encrypted before it is sent, and that the
encryption key is only known to the sender and recipient.
In addition, end-to-end encryption also ensures that the message is securely stored on the server, as it is
encrypted and cannot be accessed by anyone other than the sender and recipient. This helps to ensure that the
message remains private and secure, even if the server is hacked or compromised. [15]

Figure 1: End-to-End Encryption Works

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[78]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:05/Issue:02/February-2023 Impact Factor- 6.752 www.irjmets.com
V. METHODOLOGY
The MERN stack can be used to build a real-time chat application. With React, you can create a front-end user
interface that allows users to communicate with each other. Node.JS enables the construction of a web-socket
connection that enables real-time communication between the server and clients. Express.JS, on the other hand,
is used to create a server that facilitates communication between the clients and the server. Finally, MongoDB is
used to store chat messages and user data. Once all these components have been created and configured, you
can then link them together to create the end-to-end chat application. To summarize, the beginning of this
project is the development cycle, with requirements and analysis to determine the project objectives, followed
by a design phase to determine the appearance. Then, the implementation part will begin with back-end
development using JavaScript to create a minimum viable product, with other backlogs developed in sprints.
The back-end will use ReactJS and MongoDB for the database. If the back-end is complex, full front-end
development with HTML, CSS, JavaScript, and React JS will be done. Finally, tests will be done, and
documentation managed.[16]
VI. ARCHITECTURE

Figure 2: Flowchart of Architecture

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[79]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:05/Issue:02/February-2023 Impact Factor- 6.752 www.irjmets.com
A typical chat application architecture consists of client-server architecture, where the client is the User
Interface, and the server provides the necessary infrastructure to host an application, database, and
communication channels.
The client and server communicate with each other using a protocol like HTTP, TCP/IP, etc. The client usually
contains user interface elements like menus, text boxes, buttons, etc. and handles user input. The server, on the
other hand, is responsible for managing user data, handling requests and responses, and managing the
application logic. It also typically contains a database to store user data.
The communication infrastructure is then used to establish a secure connection between the client and the
server. This could be through HTTPS, TLS, or any other secure protocol. This is important to ensure the
confidentiality of user data.
Finally, the application logic is responsible for managing user interactions and providing the necessary
functionalities. This includes sending messages, creating chat rooms, managing user profiles, etc.
VII. CONCLUSION
Developing chat application can open up opportunities to communicate with people from around the world,
create new relationships, and build a community all in one place. With the right tools and dedication, you can
create a chat application that can be used by people of all ages and backgrounds. With the right design, features,
and support, chat application could become the go-to destination for conversations and socializing. Overall,
developing a chat application using the MERN stack requires a strong understanding of web development
concepts and technologies, but the end result is a powerful and scalable application that can be used by a wide
audience.
Chat applications are a great way to communicate with friends, family, colleagues, and customers. They provide
an efficient and convenient way to communicate with others, and can be used for both personal and
professional purposes. By taking advantage of the features offered by chat applications, users can easily stay
connected, regardless of their location.
VIII. REFERENCES
[1] Developing Chat Application using Firebase, p-ISSN: 2395-0072 IRJET-V8I4198 (Volume: 08 Issue: 04,
Apr 2021)
[2] https://www.techtarget.com/searchunifiedcommunications/definition/instant-messaging
[3] AN OVERVIEW OF REAL-TIME CHAT APPLICATION, ISSN: 2456-3315 IJRTI2206316 (Volume 7, Issue
6)
[4] Tyson Cadenhead, author. Socket.IO Cookbook, 2015
[5] Kyle Banker, Douglas Garrett, Peter Bakkum, Shaun Verch, Tim Hawkins, authors. MongoDB in Action,
Second Edition Covers MongoDB Version 3.0, 2016
[6] https://expressjs.com/
[7] https://cryptojs.gitbook.io/docs/
[8] Nader Dabit, author. React Native in Action: Developing iOS and Android Apps with JavaScript, 2019
[9] https://www.netguru.com/glossary/node-js
[10] https://developer.mozilla.org/en-US/docs/Web/JavaScript
[11] https://ahmetozlu.medium.com/mastering-rest-architecture-rest-api-details-f560e4d93f2
[12] https://auth0.com/blog/hashing-in-action-understanding-bcrypt/
[13] https://expressjs.com/en/resources/middleware/multer.html
[14] https://reactnativeelements.com/docs
[15] https://heimdalsecurity.com/blog/wp-content/uploads/end-to-end-encryption.png
[16] CHAT APPLICATION USING MERN STACK (MongoDB, Expressjs, Reactjs, Nodejs), IJARIIE-ISSN(O)-
2395-4396 (Vol-8 Issue-3 2022)

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[80]