Chat App

Final Report

Submitted by

Mukul Vishala (2300680140077)

Mrinal Gandhi (2300680140076)
Nikhil Tyagi (2300680140083)

in partial fulfillment for the award of the degree

of

MASTER OF COMPUTER APPLICATION

PROJECT SUPERVISOR PROJECT COORDINATOR

Mr. Ajeet Singh Dr. Uruj Jaleel

Associate Professor Associate Professor

Associate Professor (Dr.) SatishKumar Soni

HEAD
MCA DEPARTMENT

MEERUT INSTITUTE OF ENGINEERING ANDTECHNOLOGY,

MEERUT(U.P.)

DR. A. P. J. ABDUL KALAM TECHNICAL UNIVERSITY, LUCKNOW

UNIVERSITY IN LUCKNOW, UTTAR PRADESH
2024
 CERTIFICATE

This is to certify that the Mini Project Report entitled “Chat App”, which is submitted by Mukul Vishala,
Nikhil Tyagi, Mrinal Gandhi in partial fulfillment of the requirements for the award of the degree of Master of
Computer Applications, submitted to MIET MEERUT, is a record of the students' own work carried out under
our supervision.

Signature Signature Signature

(Supervisor) (Project Coordinator) (External Examiner)

 DECLARATION

We hereby declare that this submission is our own work and that, to the best of our knowledge and
belief, it contains no material previously published or written by another person, nor material to a
substantial extent has been accepted for the award of any other degree by the university or other
institute of higher learning, except where due acknowledgement has been made in the text.

Signature:

Name: Mukul Vishala

Roll No: 2300680140077

Signature:

Name: Mrinal Gandhi

Roll No: 2300680140076

Signature: Nikhil Tyagi

Name: Nikhil Tyagi

Roll No: 2300680140083

 ACKNOWLEDGEMENT

First and foremost, we would like to express our gratitude to our Mentor, “Mr. Ajeet Singh Sir”, who
was a continual source of inspiration. She pushed us to think imaginatively and urged us to do this
Project without hesitation. Her vast knowledge, extensive experience, and professional competence
in Data Science enabled us to successfully accomplish this project. This endeavour would not have
been possible without her help and supervision. We could not have asked for a finer mentor in our
studies. This initiative would not have been a success without the contributions of each and every
individual. We were always there to cheer each other on, and that is what kept us together until the
end.
SL.NO. Description Page No.

5
1 Abstract
6
2 Introduction
7
3 Objective
8
4 Scope
9
5 Feasibility Study
10-11
6 Work Flow
12
7 Components of the System
13
8 Input and Output
14
9 Hardware & Software Requirements
15-17
10 Diagram
18-21
11 Output Screen
22-46
12 Code
47
13 Future Scope and Further
Enhancements
48
14 Limitations
49
15 Conclusion
50
16 Bibliography

4|Page
 1. ABSTRACT
In today's digital age, communication plays a crucial role in connecting
individuals across the globe. With the increasing demand for real-time
messaging applications, building a single message chat application has become
a popular endeavor. This abstract introduces a chat application developed using
the ReactJs (FireBase, Express.js, React.js, and Node.js) technology stack,
highlighting its key features and functionality.
The proposed chat application leverages the this technology stack to provide
a robust and scalable solution. FireBase is good database, ensures efficient
data storage and retrieval, enabling seamless storage of user profiles and
message history. Express.js, a web application framework for Node.js,
facilitates the creation of a server-side backend that handles authentication,
routing, and interaction with the database. Node.js acts as the runtime
environment, executing JavaScript code on the server-side, enabling high-
performance communication. React.js, a JavaScript library, serves as the
frontend framework, providing an interactive and responsive user interface.
The chat application encompasses essential features such as user registration
and authentication, login & logout, and ability to send and receive messages in
real time.

5|Page
 2. INTRODUCTION
Welcome to our Single Message Chat Application! With the power of
technology, we've created a seamless platform for you to connect
and communicate with others in a simple and efficient way. Using the
which stands for FireBase, Express.js, React.js, and Node.js,
we have built a robust and dynamic application that allows you to
exchange messages with ease. Let's take a closer look at each component:

FireBase: Our application utilizes FireBase, a popular NoSQL database,

to store and manage the chat messages. This ensures fast and efficient
retrieval of conversations, enabling real-time messaging.

Express.js: We leverage Express.js, a flexible and minimalistic web

application framework for Node.js, to handle server-side operations. It
simplifies the process of routing, handling requests, and managing
middleware, making the application more scalable and efficient.

React.js: The frontend of our chat application is built using React.js, a

powerful JavaScript library for building user interfaces. React.js allows us
to create a dynamic and responsive user experience, making real-time
messaging seamless and enjoyable.

Node.js: We rely on Node.js, a server-side JavaScript runtime

environment, to power the backend of our chat application. Node.js
enables event-driven, non-blocking I/O operations, resulting in a highly
scalable and efficient server architecture.

We're excited to have you on board and experience the convenience and
efficiency of our single message chat application. Start chatting and
connecting with us.

6|Page
 3. OBJECTIVE
The objective of this project is to build a single message chat application
using the (FireBase, Express.js, React.js, Node.js) stack
technology. The application will allow users to send and receive messages
in real-time within a single conversation.

Key Features:
• User Registration and Authentication: Users will be able to create
accounts and log in to the application using their credentials. User
authentication will ensure secure access to the chat functionality.

• Real-time Messaging: Users will be able to send and receive

messages in real-time within a single conversation. The chat
interface should update instantly when a new message is sent or
received.

• Conversation History: The application should store and display the

chat history, allowing users to scroll through previous messages
within the conversation.

• Profile Picture: Uses will be able to pick an Avatar as their profile

picture and then set it as their profile picture.

• Deployment: Deploy the application to a web server or cloud

platform to make it accessible to users over the internet.

By achieving these objectives, you will create a single message chat

application using the MERN technology stack that provides users
with a seamless and real-time messaging experience.

7|Page
 4. SCOPE
A single message chat application using the (FireBase, Express.js,
React.js, Node.js) technology stack can have various scopes and features. Here
are some possible scopes for a single message chat application:
• User Authentication: Implement a user authentication system to allow
users to create accounts, log in, and maintain their profiles.

• Real-Time Messaging: Enable real-time messaging capabilities using

technologies like Socket.io or Web-Sockets to ensure instant message
delivery and updates.

• User Name and Email Storage: Store name and email id of user in a
FireBase database.

• Emoji’s and Reactions: Enable users to react to messages using emoji’s or

predefined reactions, enhancing the interactive experience.

• Cross-platform Compatibility: Ensure that the chat application works

seamlessly across multiple platforms, including web browsers, mobile
devices, and desktop applications.

• Message Encryption: Implement end-to-end encryption to ensure the

privacy and security of messages exchanged between users.

It's also essential to consider scalability, performance optimization, and

security measures when developing your chat application.

8|Page
 5. FEASIBILITY STUDY
Feasibility study is made to see if the project on completion will serve the
purpose the organization for the amount of work.
Effort and the time that spend on it. Feasibility study lets the developer
foresee the future of the project and the usefulness. A Feasibility study of
a system proposal is according to its workability, which is the impact on
the organization, ability to meet their user needs and effective use of
resources. Thus when a new application is proposed it normally goes
through a feasibility study before it is approved for development.
The document provides the feasibility of the project that is being designed
and lists various area that were considered very carefully during the
feasibility study of this project such as Technical, Economic and
operational feasibilities.

The purpose of this feasibility study is to assess the viability and potential
success of developing a single message chat application using the MERN
(MongoDB, Express.js, React.js, Node.js) technology stack. The
application aims to provide users with a simple and efficient way to
exchange messages in real-time. The following factors will be considered
in this study:
Technical Feasibility:
a. Expertise: Evaluate the availability of developers with the necessary
skills and experience in technology.
b. Infrastructure: Assess the required hardware and software
infrastructure for development, testing, and deployment of the
application.
c. Scalability: Determine if the can handle the expected
number of users and message volume efficiently.
Market Feasibility:
a. Target Audience: Identify the potential user base and their specific
needs for a single message chat application.
b. Competition: Analyze the existing chat applications and their market
share to determine the potential for success and competitive advantage
of the proposed application.
9|Page
 6. WORK FLOW
This Document plays a vital role in the development life cycle (SDLC) as it
describes the complete requirement of the system. It is meant for use by
the developers and will be the basic during testing phase. Any changes
made to the requirements in the future will have to go through formal
change approval process.

The Waterfall Model was first Process Model to be introduced. It is also

referred to as a linear-sequential life cycle model. It is very simple to
understand and use. In a waterfall model, each phase must be completed
before the next phase can begin and there is no overlapping in the phases.
Waterfall model is the earliest SDLC approach that was used for software
development.

The waterfall Model illustrates the software development process in a

linear sequential flow; hence it is also referred to as a linear-sequential
life cycle model. This means that any phase in the development process
begins only if the previous phase is complete. In waterfall model phases
do not overlap.

Waterfall Model design

Waterfall approach was first SDLC Model to be used widely in Software
Engineering to ensure success of the project. In "The Waterfall" approach,
the whole process of software development is divided into separate
phases. In Waterfall model, typically, the outcome of one phase acts as
the input for the next phase sequentially.
Following is a diagrammatic representation of different phases of
waterfall model.

10 | P a g e
The sequential phases in Waterfall model are:
• Requirement Gathering and analysis: All possible
requirements of the system to be developed are
captured in this phase and documented in a requirement
specification doc.
• System Design: The requirement specifications from
first phase are studied in this phase and system design is
prepared.
• Implementation: With inputs from system design, the
system is first developed in small programs called units,
which are integrated in the next phase.
• Integration and Testing: All the units developed in the
implementation phase are integrated into a system after
testing of each unit.

• Maintenance: There are some issues which come up in

the client environment. To fix those issues patches are
released.

11 | P a g e
 7. COMPONENTS OF THE SYSTEM

The User Interface (UI) component presents the visual elements of the
chat application, including login/signup forms, chat interface, and user
list, ensuring an intuitive user experience.

The Authentication component handles user authentication and

authorization, allowing users to securely create accounts, log in, and
maintain session persistence.

The User Management component enables users to manage their

profiles, update personal information, and view other registered users
within the chat application.

The Chat Management component facilitates real-time message

exchanges, stores and retrieves messages from a database, and
dynamically updates the chat interface for seamless communication.

The Database component stores and manages user information,

messages, and chat history, ensuring data integrity and reliable data
retrieval.

The Real-time Communication component establishes a bidirectional

communication channel, enabling instant message delivery and real-time
updates between the server and clients.

The Emoji component enhances the chat experience by allowing users to

send and receive emojis, adding an element of fun and expression to their
conversations.

12 | P a g e
 8. INPUT & OUTPUT

The main inputs, outputs and the major function in details are:

INPUT

• User can sign-in using email and password.

• User can login using the same email and password which they have
used in sign-in.

• User can visit the chat window and can chat to anyone who has an
account in the application.

• User can logout from the chat window.

OUTPUT

• User can see their other users in the application.

• User can view the messages.

• User can also interact with the other users and can send emojis.

13 | P a g e
 9. HARDWARE AND SOFTWARE REQUIREMENTS

HARDWARE REQUIREMENTS:
• Computer that has a 1.6GHz or faster processor

• 1 GB (32 Bit) or 2 GB (64 Bit) RAM (Add 512

MB if running in a virtual machine)

• HDD 20 GB Hard Disk Space and Above

Hardware Requirements
• 5400 RPM hard disk drive

• DVD-ROM Drive

SOFTWARE REQUIREMENTS:

•WINDOWS OS (7/10/11)

•Visual Studio Code

•Server

•Postman

•Node js

14 | P a g e
10.DIAGRAM

15 | P a g e
16 | P a g e
17 | P a g e
 11.OUTPUT SCREEN

• User registration/create account page :

• User login page :

18 | P a g e
• The User Interface :

• Opening/home page :

19 | P a g e
• When user wants to logout they can by simple click :

20 | P a g e
• After logout if you tick remember me on login the details are autofill :

21 | P a g e
 13.FUTURE SCOPE AND FURTHER ENHANCEMENTS

A single message chat application built using the (FireBase,

Express.js, React.js, Node.js) technology stack can be further enhanced
and expanded in several ways to improve its functionality and user
experience. Here are some future scope and further enhancements for
your single message chat application:

Real-time Messaging: Implement real-time messaging using technologies

like Web-Sockets or a library like Socket.IO. This will allow users to see
messages instantly without needing to refresh the page.

User Authentication and Authorization: Enhance the application by

implementing user authentication and authorization mechanisms. This
will enable users to create accounts, log in, and have personalized chat
experiences.

Emoji’s and Reactions: Enable users to express their emotions and

reactions using emoji’s or predefined reactions. Implement a reaction
system similar to social media platforms where users can add emoji’s or
"like" messages.

Mobile Application: Consider developing a mobile application version of

the chat application for both iOS and Android platforms. This can broaden
the user base and provide a seamless mobile chat experience.

47 | P a g e
 14.LIMITATIONS

There are several limitations that you may encounter when developing a
single message chat application using the (FireBase, Express.js,
React, Node.js) technology stack. Here are a few potential limitations:

Scalability: The MERN stack can handle moderate levels of traffic and
users, but it may face scalability challenges when dealing with a large
number of concurrent connections or heavy message traffic. Scaling the
application to handle high loads might require implementing techniques
such as load balancing, horizontal scaling, or using a dedicated messaging
service.

Performance: As the number of messages increases, fetching and

rendering all the messages on the client side could lead to performance
issues. It's important to implement pagination or infinite scrolling to limit
the number of messages loaded at a time and optimize the rendering
process.

Security: Security is a critical aspect of any chat application. MERN

provides tools and libraries for handling security concerns, such as
authentication and authorization, but it's essential to ensure that proper
security measures are implemented to protect user data, prevent
unauthorized access, and secure communication channels.

Offline functionality: ReactJs does not natively support offline

functionality. If users need to access the chat application or send
messages while offline, you would need to implement additional
techniques such as client-side caching or using a service worker to handle
offline data synchronization.

Mobile app development: While ReactJs is well-suited for web

applications, if we plan to develop a mobile app version, additional
frameworks or technologies, such as React Native or Flutter, would be
required. This introduces the need for separate codebases and additional
development efforts.
48 | P a g e
 15.CONCLUSION

In conclusion, building a single message chat application using the

(Express.js, React.js, Node.js) technology stack provides
several benefits and advantages.

The technology offers a comprehensive solution for developing a chat

application that supports real-time communication. By leveraging web-
sockets or similar technologies, users can instantly exchange messages.

Thes technology supports the creation of cross-platform applications,

allowing users to access the chat application from various devices and
operating systems.

Using JavaScript throughout the entire stack provides a developer-

friendly environment. It reduces the learning curve, promotes code
consistency, and facilitates easier code maintenance.

Thes technology benefits from a large and active community. This means
developers can find extensive resources, tutorials, and libraries to assist
in the development process and troubleshoot any issues.

While considering the advantages of the this tech it's crucial to take
into account the specific requirements and constraints of your project.
Proper planning, architectural considerations, and adherence to best
practices are essential for ensuring a secure, efficient, and user-friendly
single message chat application.

This tech provides a unified and consistent development experience

since JavaScript is used throughout the entire stack. This reduces the
learning curve for developers and allows for easier code maintenance.

49 | P a g e
 16.BIBLIOGRAPHY

• React Documentation- Retrieved from https://react.dev/learn

• Node.js Documentation- Retrieved from

https://nodejs.org/en/docs

• Express Documentation- Retrieved from

https://expressjs.com/en/4x/api.html

• FireBase Documentation- Retrieved from

https://docs.firebase.com/manual

• Socket.io Documentation- Retrieved from

https://socket.io/docs/v4

• W3Schools- Retrieved from https://www.w3schools.com

• Emoji Mart- Retrieved from

https://www.npmjs.com/package/emoji-mart

-Thank You

------------X-----------

50 | P a g e