CHAPTER ONE

INTRODUCTION
1.1 Introduction
An Chat application is a software application that enables users to exchange messages and
communicate with each other in real-time. It allows individuals or groups to have
conversations, share information, and collaborate instantly over the internet. Chat
Application is designed to provide a responsive and interactive experience, where messages
are delivered and displayed immediately as they are sent. This means that users can engage
in conversations and receive updates in real-time, without significant delays.
1.2Background of Study
Chat apps have been around since the 1980s, when CompuServe released the first widely
available online chat service, CB Simulator. In 1971, American computer scientist Murray
Turoff invented instant messaging (IM) as a chat function on a government computer
network. Chat systems allow users to communicate in real time over the internet. The
process involves a chat client, server connection, server side software, persistent connection,
live chat software, and artificial intelligence.
WhatsApp Messenger, or simply WhatsApp, is an internationally available American
freeware, cross-platform centralized instant messaging (IM) and voice-over-IP (VoIP) service
owned by Meta Platforms (Metz, 2016). It allows users to send text messages and voice
messages (WhatsApp, 2019), make voice and video calls, and share images, documents, user
locations, and other content (Forbes, 2017).The Internet’s takeover of the global
communication landscape was almost instant in historical terms: it only communicated 1%
of the information flowing through two-way telecommunications networks in the year 1993,
already 51% by 2000, and more than 97% of the telecommunicated information by 2007.
Today the Internet continues to grow, driven by ever greater amounts of online information,
commerce, entertainment, and social networking.
The first online chat system was called Talkomatic, created by Doug Brown and David R.
Woolley in 1973 on the PLATO System at the University of Illinois. It offered several
channels, each of which could accommodate up to five people, with messages appearing on
all users’ screens character-by-character as they were typed. Talkomatic was very popular
among PLATO users into the mid-1980s. In 2014, Brown and Woolley released a web-based
version of Talkomatic.
Instant messaging (IM) is a type of online chat that offers real-time text transmission over
the Internet. A LAN messenger operates in a similar way over a local area network. Short
messages are typically transmitted bi-directionally between two parties, when each user
chooses to complete a thought and select “send”. Some IM applications can use push
technology to provide real-time text, which transmits messages character by character, as
they are composed. More advanced instant messaging can add file transfer, clickable
hyperlinks, Voice over IP, or video chat.
Non-IM types of chat include multicast transmission, usually referred to as “chat rooms”,
where participants might be anonymous or might be previously known to each other (for
example collaborators on a project that is using chat to facilitate communication). Instant
messaging systems tend to facilitate connections between specified known users (often using
a contact list also known as a “buddy list” or “friend list”). Depending on the IM protocol,
the technical architecture can be peer-to-peer (direct point-to-point transmission) or client-
server (an Instant message service center retransmits messages from the sender to the
communication device). One the problems faced by instant messaging since its inception is
its inability to instantly translate one language to another so that users speaking different
language can easily communicate. It is on this background however that this research work
was embarked on to design an Chat Application System
1.3 Statement of the Problem
The major problems regarding the delivery of chat application system in the society include:
1. Unable to access colleagues or ask questions freely without moving from ones desk;
2. Group work cannot be done independently with intermediate synchronous response
from all members in the group in one location;
3. Slow message delivery to all client on the system;
4. File transfer has never been possible using a private and more secure way;
5. Message broadcast within split of second has always been a challenge.

1.4 Aim and Objectives of the Study

The aim of the study is to Design and Implementation of a Chat Application System using
WhatsApp as a case study. In achieving this aim, the following specific objectives were laid
out as follows:
1. To design a chat application system;
2. To develop a conceptual design for a secure, accessible and user-friendly web based
chat application;
3. To develop a system that will demonstrate its functionality, using the WAMP (cross-
browser Apache/MySQL/PHP) web server framework;
4. To perform tests on the said system to assure functionality, accessibility and usability
of the system;
5. To evaluate the existing literature of instant messaging and access the already made
Chat Application System and improve on their deficiencies.

1.5 Significance of the Study

Justification for engaging in this study can be drawn from the following reasons:
1. The need to demonstrate the effectiveness of employing mobile driven information
systems as a viable complement to systems based on the regular Web, within the
university information framework; and
2. The need to achieve a greater degree of responsiveness among stakeholders in the web
based chat application system – students, lecturers and system administrators –
enabling them collaborate effectively to enhance studies and also result-related
complaints.
1.6 Scope of the study
This research work is limited to the Design and Implementation of a Chat Application
System using WhatsApp as a case study.

1.7 Definition of Terms

Beta testing: Testing carried out on software independent of its manufacturer by external
users

Internet application: A Web site with dynamic, i.e. data-source oriented user-specific,
content, which usually requires some form of user authentication.

Mobile device: Any device with the functionality for information management and transfer
free from spatial and temporal constraints. Such devices include mobile phones, smart
phones, PDAs (personal digital assistants), tablets and readers, among Others.

Mobile Web: The Internet, as accessible to mobile devices and computer system
RAD: rapid application development, a style of programming in which emphasis is placed
on speed and delivery, usually employing extensive use of IDE (integrated development
environment) capability.

UML: Unified Modeling Language, the international standard for specifying, visualizing,
constructing and documenting the artifacts of software systems.

User authentication: the process within the context of an Internet application wherein
eligible users are granted clearance to enter – and use – the application;
 CHAPTER TWO
LITERATURE REVIEW

2.1Introduction
Messaging apps now have more global users than traditional social networks—which mean
they will play an increasingly important role in the distribution of digital information in the
future. In 2016, over 2.5 billion people used at least one messaging app. That’s one-third of
the world’s entire population, with users ranging from various age grades. Today, it’s
common place for offices to use a messaging app for internal communication in order to
coordinate meetings, share pitch decks, and plan happy hours. And with the latest bot
technology, chat apps are becoming a hub for employees to do work in their apps without
leaving the chat console. For many people, chat apps are a given part of their workday. But
how did these chat apps become so popular?
2.2Historical Overview
2.2.1 INSTANT MESSAGING: CHILD OF THE 90’S
Chat apps (and their subsets, chat rooms) bring to remembrance images of the 1990s, with its
dial-up internet and classic sitcoms, however, commercial chat apps date back to the 1980s.
CompuServe released CB Simulator in 1980, and 1985 brought the launch of Commodore’s
Quantum Link (also known as Q-Link). An online service, it allowed multiuser chat, email,
file sharing, and games. If Q-Link sounds familiar, that’s because it is: in 1991, the company
changed its name to America Online (AOL). But AOL wouldn’t launch its signature product,
AOL Instant Messenger (AIM), until 1997. In the meantime, the Vodafone GSM network
enabled the first SMS in 1992. And in 1996, ICQ launched as the first widely-adopted instant
messaging platform. 6 The late 1990s brought dramatic changes in the chat app market. Both
Yahoo! And MSN launched their own instant messengers (in 1998 and 1999, respectively),
and AOL bought out competitor ICQ’s parent company, Mirabilis, for a fee around $287
million upfront, with an additional $120 million paid out later. That’s about $612.7 million
today!

Figure 2.1: Commercial chat apps in 90’s

As AIM pioneered Chabot, like SmarterChild, it also increased its market share. Its rivalry
with MSN Messenger began almost as soon as the competitor launched in 1999. By 2006,
AIM controlled 52% of the IM market. Its dominance, however, was short lived. Struggling
to monetize and facing increasing competition from new apps like Skype and Google Talk,
AIM fell out of favour, eventually eliminating its entire development team in 2012.
2.2.2. COMMERCIAL CHAT APPS IN THE 10s

Figure 2.2: Commercial chat apps in 10’s

With the inception of smart phones, chat apps continued to thrive; in 2013, chat apps finally
surpassed SMS in message volume. By 2015, WhatsApp alone hosted 30 billion messages
per day; SMS logged only 20 billion. And in the summer of 2016, Facebook Messenger hit
one billion users.
2.2.3. THE SLOW GROWTH OF ENTERPRISE CHAT APPS
Despite developing around the same time, the history of enterprise chat apps is markedly
different than the story of their consumer-facing counterparts. The very first enterprise chat
apps do not enjoy the same place in our collective memory as AIM and ICQ. Early contender
Yammer launched in 2008; Microsoft acquired the platform in 2012. Clearspace began in
2006, rebranding several times until its rebirth as Jive six years later. Other enterprise chat
programs, usually integrated with other social features like blogs and wikis, blipped in and
out of existence. None of this initial crop of enterprise apps proved a runaway success, and
many theories exist as to why later programs have overshadowed them. One thing is certain:
these programs predated the rise of smart phones, and mobility certainly fomented the
creation of secondgeneration commercial apps like WhatsApp and Snapchat.
2.2.3.1 ENTERPRISE CHAT: THE NEXT GENERATION
As the first decade of the new millennium closed, an enterprise chat app renaissance slowly
began. Though email had been widely used for the previous twenty years, companies soon
began looking for a better way to communicate quickly; email-based workflows are slower
and do not allow for many business functions that are now critical to work, like
screensharing or video calls. Some one-to-one chat applications existed, like GChat and
Outlook Messenger, but group messaging applications had yet to take off. In January 2010,
three graduates of Rensselaer Polytechnic Institute—Chris Rivers, Garret Heaton, and Pete
Curley—launched Hipchat, a web-based chat and instant messaging service. Shortly
thereafter, Atlassian acquired it in March 2012. Its premium version addressed several
enterprise concerns by adding screens haring, history retention controls, and the ability to run
within corporate firewalls. 9 In August 2013, the enterprise chat space exploded. Slack,
which stands for “Searchable Log of All Conversation and Knowledge,” grew out of an
internal tool used during the development of Glitch, a defunct online game. Though not the
first (or even the most revolutionary) office chat app, Slack’s growth—it now has four
million users—has dwarfed most other programs. A mere 1.25 years after launching, it
reached a valuation of $1 billion. By April 2015, Slack was worth almost three times that.
Slack–with its channels, DMs, and private groups–is reminiscent of IRC, which might help
explain its popularity. A host of similar apps have since incorporated these features. 2015
saw the launch of Cisco Spark, which has since evolved into an entire ecosystem of SDKs,
APIs, and a developer site. Microsoft designed MS Teams to compete directly with Slack; it
launched in early 2017 as an integrated component of Office 365. As businesses prioritize
digital transformation, enterprise chat apps continue to enjoy overwhelming popularity.
What’s to come? Chatbots, machine learning, and increased integration are all popular with
both enterprise and commercial users, who discover new ways to chat every day.
2.2.4 REGIONAL AND DEMOGRAPHIC STRONGHOLDS
When devising one’s strategy for messaging apps, it's vital to select the right platform mix
for the targeted populace, based on TWO core criteria:
1. Regional Strongholds: Only a small group of apps like WhatsApp, Facebook Messenger,
and Viber can be said to be truly global—and even those platforms struggle in certain
countries. Meanwhile, messengers like WeChat, LINE, and KakaoTalk completely dominate
specific markets but have negligible traction in others.
2. Demographics: It's a common misconception that messaging apps are a uniformly
millennial phenomenon. Some apps like Snapchat and LINE skew both young and female,
but others like Tango (which boasts 100 million monthly, active users, by estimate)
predominantly appeal to those aged 25–54 and strongly over-index with Hispanic and
African-American users.
2.2.5 INDUSTRY CHALLENGES
1. FRAGMENTATION: The social media landscape is entering a period of hyper
fragmentation that may be a challenge to publishers: Facebook, Twitter, and Instagram
continue to loom large, but social media managers can now launch official channels on
roughly 10 chat apps with over 50 million monthly, active users each.
2. ANALYTICS: For organizations accustomed to robust, real-time data, the lack of good
analytics tools for messaging apps remains a major deterrent to adoption. The challenge is
twofold: Strong analytics dashboards take time to build, and many messengers are privacy
centric by nature.
2.2.6 INDUSTRY OPPORTUNITIES
1. HIGHER ENGAGEMENT: Since many chat apps provide publishers with push
notifications or chatbot experiences (programmable robots that converse with users), they
can deliver significantly higher engagement rates.
2. AUDIENCE DEVELOPMENT: With billions of active users across multiple major chat
apps, there is the opportunity in building large audiences fairly quickly on several platforms.
3. A CHANCE TO CONNECT WITH USERS IN A NEW WAY: Messaging apps offer a
host of features not unavailable on social networks or other platforms. Programmers can
creatively leverage these tools to socialize in new ways.
2.3 Related Work
Several comparable works that sought to create multilingual chat software have been
published recently. To accomplish their objectives, these works have used a variety of
methods and technology. The objectives, technique, and technology used in these works will
be discussed in more detail in this section of the literature study. Google Translate, a machine
translation tool that enables users to translate text, speech, images, and web pages between
any combination of more than 100 languages, is one of the most well-known examples of
multilingual chat programs (Google Translate, n.d.). To produce high-quality translations, the
system makes use of statistical and neural machine translation approaches. Nevertheless,
despite major advancements in machine translation made by Google Translate, there are still
some limitations, notably for translations requiring cultural context or subjectmatter
expertise (Hovy, 2019).
Skype Translator, a real-time speech translation service that enables users to communicate
across languages in voice and text (Microsoft, 2014), is another illustration of a multilingual
chat application language processing methods and machine learning algorithms to translate
conversations accurately in real time. The accuracy of translations can, however, differ based
on elements including the speaker's accent, the background noise, and the speaker's speaking
rate, according to user experience research (Earley & Ang, 2020).
Discord’s expanded beyond gaming communities to serve broader audiences, introducing
features like stage channels for audio events and enhanced moderation tools.Discord inc.,
2020-2021
A rising number of companies are now interested in creating multilingual chat systems that
leverage machine learning and artificial intelligence to enhance user experience and
translation accuracy. Sequence-to-sequence models, for instance, have been used to perform
machine translation jobs and have produced cutting-edge outcomes in terms of translation
quality (Sutskever et al., 2018).
Telegram enhanced its voice chat capabilities, allowing for unlimited participants in voice
calls within channels and introducing features like voice chat scheduling and raise hand
functionality. Telegram’s introduction of voice chats 2.0- telegram, 2021.
Although machine learning approaches have shown promise in enhancing translation
accuracy, they also necessitate a sizable amount of training data, which can be difficult for
languages with limited resources. The needs of users and cultural conventions must also be
carefully taken into account when creating interfaces for multilingual chat apps (Earley &
Ang, 2020).

Slack (2018) - A popular team chat app for businesses, offering features like file sharing, video
conferencing, and integrations with other tools. It’s free for unlimited users, with paid plans
starting at $8.75/user/month.

Microsoft Teams (2017) - A team chat app developed by Microsoft, integrating with other
Microsoft tools like Office 365. It offers features like file sharing, video conferencing, and
integrations with other apps. Its pricing is included in the Microsoft 365 plans.

Zoom (2020/2021) - A video conferencing app that also offers chat features, popular for remote
meetings and virtual events. It offers a free plan for up to 40-minute meetings, with paid plans
starting at $14.99/month.

Google Workspace Chat (2019) - A chat app developed by Google, integrating with other
Google tools like Google Drive and Google Calendar. It offers features like file sharing, video
conferencing, and integrations with other apps. Its pricing is included in the Google Workspace
plans.

Google Hangouts is being rebranded into two business-focused apps, Hangouts Meet and
Hangouts Chat, although the retirement timeline for regular users has not been announced yet.
(Year: 2020)

ChatGPT-4, a language model, was trained on data predating 2021 and may not excel in
reasoning about current events. (Year: 2021)

Instagram, a Meta-owned platform, took two-and-half years to reach a certain milestone. (Year:
2019)

2.4 Summary
CHATTY is a social-networking tool that leverages on technology advancement thereby
allowing its users communicate and share media. It offers a wonderful one stop shop
experience for keeping in touch with people you know. It can be use for messaging, placing
voice messages, making voice and video calls, share updates and photos, share locations,
enhance local socializing in pidgin English, play games and make monetary financial
transactions.
CHATTY has the potential to become a widely used socializing app in Africa with specific
focus on the West African sub region with a grass root pilot scheme take off in Nigeria due to
the continent rich multi ethnic culture and a wide range of her special way of communication
called pidgin English in Nigeria. The numerical strength of the Nigerian population which is
estimated to be above 200million people presently affords a viable economic space as a
rallying point for this application.
With the gradual acceptance of adult literacy gaining roots in Africa and the various
government policies to drive education to the grass roots, CHATTY will be a welcome
development and very user friendly to the average Nigerian citizen among which includes
the local peasant farmers, market women, artisans, the low-income earners, less privilege and
the lower social stratification individuals who are numerous in population. The introduction
of the Pidgin English feature is a primary drive and force of attraction as it helps break the
rank of the academic division between those who claim the Queens English is the best,
thereby creating fun and increased cross fertilization of ideas, with a resultant economic
boost.
While emphasis must be made to fore runners of similar inventions, which cuts across
technology divides, it must be well understood that the basic fundamental of the CHATTY
which is embedded in messaging service, evolve as an app where you can comfortably make
financial transactions as well.
 CHAPTER THREE
SYSTEM ANALYSIS AND DESIGN
DESIGN METHODOLOGY
3.1 Methodologies for Chat Application
In chat application we are using various technologies and new methodologies to solve our
problems. Below are the detailed description about the technology used and methods we
are applying in our project.
Technology Used:
Here we are developing a Online Chat Application using react.js for the frontend,
and MongoDB, express.js and node.js for the backend involves a structured methodology.
ER Model of Chat Application:
An Entity-Relationship Diagram (ERD) for a Chat Application models the entities and their
relationships within the system. Below is a simplified ERD for a Chat Application. In
Synopsys we make a rough ER Diagram to give a idea about the working of the project.

Let’s Draw an ER Model of Chat Application:

Data Flow Diagram of Chat Application:

Data Flow Diagram (DFD) serves as a visual representation of the flow of information
within the system. This diagram illustrates how data, such as book information, user details,
and transaction records, moves between various components of the Chat Application.
 Processes, represented by circles or ovals.
 Data stores, depicted by rectangles, represent where information is stored.
 Data flows, indicated by arrows, showcase how data moves between processes.
The DFD provides a concise yet comprehensive overview of the Chat Application’s data
flow and interactions, aiding in the analysis, design, and communication of the system’s
functional aspects.

Use Case Diagram of Chat Application:

Use case diagram referred as a Behaviour model or diagram. It simply describes and
displays the relation or interaction between the users or customers and providers of
application service or the system. It describes different actions that a system performs in
collaboration to achieve something with one or more users of the system. Use case
diagram is used a lot nowadays to manage the system.
Here is a Use Case Diagram for Chat Application:

3.2 Features for Chat Application

Our chat application aims to revolutionize communication by providing a comprehensive
platform with a wide array of features tailored to meet the diverse needs of users. The key
features of the project include:
1. Real-time Messaging: Instantaneous communication through real-time
messaging capabilities, ensuring quick delivery and synchronization of messages
across all devices.
2. Multimedia Support: Seamless sharing of multimedia content such as images,
videos, documents, and links within chat conversations, enhancing the interactive
experience.
3. User Authentication: Secure user authentication mechanisms to verify user
identities and protect against unauthorized access, ensuring the confidentiality
and integrity of user data.
4. User Profiles and Settings: Personalized user profiles with customizable settings,
allowing users to manage their preferences, privacy settings, and account details.
5. Search Functionality: Robust search functionality enabling users to easily search
and retrieve past conversations, messages, and media content, facilitating efficient
communication.
6. Admin Panel: An intuitive administrative dashboard empowering administrators
with features for user management, chat moderation, analytics, and system
configuration, ensuring smooth operation and enforcement of community
guidelines.
 7. Security Measures: Stringent security measures including end-to-end encryption,
secure data transmission, and protection against common security threats,
safeguarding user privacy and data integrity.
8. Scalability and Performance: Scalable architecture designed to handle a large
volume of concurrent users and maintain optimal performance under heavy loads,
ensuring a seamless user experience.
9. Mobile Compatibility: Compatibility with mobile devices through responsive
design and mobile app development for iOS and Android platforms, enabling
users to stay connected on the go.

3.3 Impact for Chat Application

The creation and implementation of our virtual chat platform hold the potential to greatly
influence communication and cooperation across multiple domains. An outline of the
expected impact is provided below:
 Improved Communication: By giving consumers a practical platform for instant
messaging, the chat application will expedite communication. This will enable
enhanced productivity in both personal and professional contexts, as well as
quicker decision-making and more seamless coordination.
 Enhanced Collaboration: The programme will promote creativity and
collaboration by allowing users to exchange multimedia content within chat chats.
Teams will be able to easily share files, ideas, and feedback, which will improve
teamwork and project results.
 Enhanced Connectivity: The app will allow users to communicate with friends,
family, coworkers, and clients from anywhere in the world, bridging geographical
divides. Among users, this greater connectedness will fortify bonds and promote a
feeling of community.
 Enhanced Accessibility: The programme will guarantee accessibility for users on
the go thanks to its compatibility with desktop and mobile devices. Users will be
able to interact and work together anytime, anyplace thanks to this accessibility,
which will increase convenience and flexibility.
 Empowerment via Personalisation: Users will be able to adjust their chat
experience to fit their tastes and requirements if they have the option to customise
their profiles and settings. The platform’s user engagement and happiness will
increase as a result of this customisation.
 Administrative Effectiveness: The application’s administrative panel gives
administrators the ability to efficiently manage users, keep an eye on chat
behaviour, and impose community rules. This will cut down on administrative
burden while guaranteeing a secure and friendly environment for all users.
 Protection and Privacy: The programme will give top priority to user privacy
and data protection by implementing strong security measures like end-to-end
encryption and secure authentication. Users will feel more confident as a result,
and they will be encouraged to interact openly without worrying about data
breaches or unauthorised access.
 Performance and Scalability: Built for maximum performance and scalability,
the application will be able to handle a high volume of users and messages
 without compromising responsiveness or speed. This scalability will provide a
consistent user experience and facilitate the expansion of user communities.

Overall, the chat application is poised to make a positive impact by enhancing

communication, fostering collaboration, increasing connectivity, and prioritizing security
and user satisfaction. It has the potential to transform the way people interact and
collaborate in both personal and professional contexts, paving the way for a more
connected and productive digital future.

3.4 Software Requirements:

This software package is developed using html , react for front end . Node.js and
MongoDB Server as the back end to store the database for backend .
 Operating System: Windows 7, 8, 9, 10 .
 Frontend: Html , Css , Javascript, react.js.
 Backend: Node.js, Express.js
 Database: MongoDBServer (back end)

3.5 Hardware Requirements:

 Processor: Intel core i3 or above for a stable experience and fast retrieval of data.
 Hard Disk: 40GB and above
 RAM: 256 MB or more, recommended 2 GB for fast reading and writing
capabilities which will result in better performance time.

3.6 PROGRAM FROM THE DATABASE

This is a normalization that interprets the database from

USER LOGIN TABLE

Field Type Constraint

Username or Email Varchar(255) Not Null
Password Varchar(255) Not Null

USER REGISTRATION TABLE

Field Type Constraint

Name Varchar(200) Not Null
ID Int(10) Primary Key
Email Address Varchar(200) Not Null
Address Medium Text Not Null
Phone Number Int(15) Not Null
Password Varchar(255) Not Null
ADMIN REGISTRATION TABLE

Field Type Constraint

Name Varchar(200) Not Null
ID Int(10) Primary Key
Email Address Varchar(200) Not Null
Phone Number Int(15) Not Null
Password Varchar(255) Not Null
 CHAPTER FOUR
SYSTEM IMPLEMENTATION
4. Coding or Implementation of Chat Application
At this stage, the fundamental development of the product starts. For this, developers use a
specific programming code as per the design. Hence, it is important for the coders to follow
the protocols set by the association. Conventional programming tools like compilers,
interpreters, debuggers, etc. are also put into use at this stage.

In our project we are using MERN stack to build the project so in this stage we are going to
code our project. Before going further lets talk about the environment we need for the
project.

4.1 Environment Creation:

In this stage we are going to create the environment to build our project, We will install all
required software and extensions for ease in the coding part.
Required Softwares:
 VsCode: Vs Code is a widely used text editor for development purpose .
 Google Chrome: You need to install a web browser to execute the html code. You
can use any of your favourite web browser.

4.2 Implementation of Chat Application Project | Frontend Development:

In this stage we are going to develop our frontend part of the project.
This is how our page will looks like:

Fig1: Chat Room.

Prerequisites:
 MongoDB
 Express.js
 React.js
 Node.js
 MERN Stack
Approach to create Chat Application:
 First, We will create a backend server which will serve a middleman between
mongDB and React FrontEnd.
 We will create an Interactive and Simple UI design for the frontEnd in which the
message is sent and the other user responds to it. All the messages along with
userName will be sent to backend using above created backend.
 We will use Socket.IO toupport real time chat.
 Lastly, we will create a database in MongoDB to store the messages.
Steps to Create the Project:
Step 1: Create a new project folder and navigate to it:

mkdir chat-backend
cd chat-backend

Step 2: Initialize a Node application and install required dependencies:

npm init -y
npm install express mongoose cors socket.io

Folder Structure (Backend):

Dependencies (Backend):
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"mongoose": "^8.0.4",
"socket.io": "^4.7.3"
}

Step 3: To start the server run the following command.

node server.js

Step 4: Creating the frontend of the app by using the following command
cd ..
npx create-react-app chat-frontend
cd chat-frontend
Step 5: Install the required dependencies.
npm install axios react-router-dom socket.io-client

Folder Structure(Frontend):

Fig 2: source Code

Dependencies(Frontend):

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
"react-scripts": "5.0.1",
"socket.io-client": "^4.7.3",
"styled-components": "^6.1.8",
"web-vitals": "^2.1.4"
}

Step 6: To start the frontend run the following command.

npm start
Output:

Fig3: login page

Fig4: Registration page

Fig5: logout page

Fig6: Chat Room light mode

Fig7: Chat Room Dark mode

Fig8: Homepage
4.3 Testing of Online Chat Application
Testing is a crucial phase in the development of a Online Chat Application to ensure that it
meets its intended requirements, functions correctly, and is free of bugs.

Below are some key steps and considerations for the testing phase of a Online Chat
Application:
1. Unit Testing:

 Test individual modules or components of the system in isolation to ensure they

function as intended.

 We have a major shortening and redirect module which is used to shorten and
redirect URLs, in this testing step we take we make sure proper functionality of
each component.
2. Integration Testing:

 Verify that different modules and components of the Online Chat Application
work together seamlessly.
 Test data flow and interactions between various parts of the system.
3. Functional Testing:

 Validate that the Online Chat Application its intended functions accurately and
efficiently.
4. User Interface (UI) Testing:

 Ensure that the user interface is user-friendly, intuitive, and visually appealing.
 Check for consistency in design elements and responsiveness across different
devices.

5. Performance Testing:

 Assess the system’s performance under normal and peak load conditions.
 Check response times, scalability, and overall system stability.

6. Security Testing:

 Identify and rectify any security vulnerabilities in the system.

 Ensure that user data is handled securely, and unauthorized access is prevented
specially in case of location.
 CHAPTER FIVE
CONCLUSION
5.1 Summary
There is always a room for improvements in any apps and this being in its primary phase
needs a loads of it. But I will keep working on it and improving it with technological
advancements in coming times. Right now, we are just dealing with text communication. There
are several chat apps which serve similar purpose as this project, but these apps were rather
difficult to use and provide confusing interfaces. I have built this application keeping in mind
that even the very beginner with technology can operate this application with ease. A positive
first impression is essential in human relationship as well as in human computer interaction.
This project hopes to develop a chat service Web app with high quality user interface. In future
we may be extended to include features such as file transfer, video message, voice message,
audio and video calls etc.

5.2 Recommendation
Nothing is perfect in this world. So, we are also no exception. Although, we have tried our best
to present the information effectively, yet, there can be further enhancement in the Application.

We have taken care of all the critical aspects, which need to take care of during the development
of the Project.
Like the things this project also has some limitations and can further be enhances by someone,
because there are certain drawbacks that do not permit the system to be 100% accurate.

The application is yet to be released and a lot of enhancements are already thought of which are
proposed to be implemented in the final version of the web-application. The web-application has
also provided feedback page on its home page so that the users can provide their inputs of any
functionalities/facilities they would like to have in the web application.

The system is highly flexible one and is well efficient to make easy interactions with the client.
The key focus is given on data security, as the project is online and will be transferred in
network. The speed and accuracy will be maintained in a proper way.
This will be a user-friendly one and can successfully overcome strict and severe validation
checks.
 References
Chen, IH. e al (2011). "Talancing Chat App Security Ding and find Encryption." IEEE
Transactions on Dependable anal Store Computing 40(4), 30-445
Chen, Q. & Wu, Z. (2020) "Mobile Chat App Adoption Anting Different Age Group A
Crom-Cultural Study Journal of Cross-Cultural Pyclology. 25(3), 245-200
Kim, D. & Pak, S. (2020). "The Rale of Chat Apps in Social Interaction A Comparative
Analysis of Ling and WeChat" Computers in Horman Behavior, 22(1), 210-225
Lee, S., & Kim, Y. (2023), "User Experience Design Principles for Mobile Clut
Applications taternational Joal of Human-Computer leteraction, 35(2), 180-105
L. W. & Zheng, Y. (2019). "Chat App Unge Patterna Among Different Demographie
Groups A Quantitative Analysis." Journal of Computer Modinted Communication, 18(2),
75-89.
Liu, X., et al. (2016) "Understanding ser Preferences for Chat App Notifications An
Empirical Study Proceedings of the ACM on Human-Computer Interaction, 28(3), 150-165.
Park, M. & Choi, S. (2020). The Impact of Chat App Features on User
Engagement: A Case Study of WhatsApp" Journal of Information Technology
Management, 25(1), 60-75
Wang, Q. & Li, J. (2022). "Privacy Concems in Chat Applications: A User Perspective."
Journal of Cybersecurity, 15(3), 305-320
Yang, L., & Wang, H. (2019). "The lafluence of Chat App Design on User Behavior: A
Comparative Study." Journal of Interactive Systems Research, 20(1), 110-125
Zhang, L., & Wu, H. (2019). "Analyzing User Satisfaction with Chat App Interfaces A
Usability Study" International Journal of Human-Computer Interaction, 28(4), 350-365.