A Synopsis Report on

EXPENSE TRACKER
A Synopsis Submitted in partial fulfillment of the requirement for the award of
the degree of
BACHELOR OF TECHNOLOGY
In

INFORMATION TECHNOLOGY
By:
ANKUR SINGH(100200515)
ABHISHEK (100200502)

UNDER THE GUIDANCE OF

MR. ARPIT CHHABRA SIR

(PROFESSOR, INFORMATION TECHNOLOGY DEPARTMENT)

DEPARTMENT OF INFORMATION TECHNOLOGY

SIR CHHOTU RAM INSTITUTE OF ENGINEERING &

TECHNOLOGY.
 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 which to a substantial extent has been
accepted for the award of any other degree or diploma of the university or other
institute of higher learning, except where due acknowledgment has been made
in the text.

ANKUR SINGH(100200515)

ABH
 TABLE OF CONTENTS

• ACKNOWLEDGEMENT

• ABSTRACT

• INTRODUCTION

• PROJECT OBJECTIVES

• TECHNICAL REQUIREMENTS

• ABOUT THE LANGUAGES USED IN THIS PROJECT

• WHAT IS A CHAT APPLICATION?

• DATABASE SCHEMA

• DETAIL PROCESS DIAGRAM

• FUTURE SCOPE
 ACKNOWLEDGEMENT

Working on our project “Chat Application” has been a great learning

experience. It introduced us to the vast world of APIs and their use in building
applications for ease of our day-to-day lives. We got to learn about how to build
an application in the right manner while learning about how to do
programming with ReactJs with components like NodeJS, Express frames with
HarperDB
We would like to express our special thanks and gratitude to Mr. Arpit
Chhabra Sir for guiding this project as a mentor.

DATE SIGNATURE
 ABSTRACT
There are so many advancements in the field of technology and as the
environment around us grows, we must grow with it as well. Our idea of
modernization in technology leads us to design something which will lead to
advancement in social media application use.

This project aims to build a real-time chat application using ReactJS as the front-
end framework and NodeJS and Express as the back-end platform. The
application will enable users to create accounts, log in, and join chat rooms to
communicate with other users in real-time. The chat rooms will be
implemented using HarperDB real-time database, which allows for quick and
efficient updates as messages are sent and received.

The user interface will be designed using ReactJS, with a responsive design that
adapts to different screen sizes and devices. The chat functionality will be
implemented using NodeJS and Express with components such as message
input fields, message displays, and user lists. The application will support
features such as message deletion, user blocking, and notification alerts for new
messages.

INTRODUCTION
Chat applications have become increasingly popular in recent years, especially
with the growing need for remote communication and collaboration. These
applications provide users with the ability to communicate instantly with each
other, regardless of their location. In this context, a real-time chat application
built using technologies such as React.js, NodeJS, Express, HarperDB and
Socket.IO can offer a highly responsive and dynamic user experience. In recent
years, several technologies have emerged to support the development of these
applications, including React.js, NodeJS, Express, HarperDB and Socket.IO.

Core Features for Every Chat Application

Regardless of the intended use case, the following chat features will be
necessary to support any basic messaging experience.

• Application registration page and user authentication mechanism

• Message text editing field with keyboard
• Conversation window with sent and received messages clearly distinguished
from each other and ordered chronologically
• List of contacts with easy contact import and editing functionality
• Ability to package and send a message
• Ability to receive, interpret, and display a message
• Notifications, unread message counts, and/or message states (read/unread)
• Storage of past messages• User presence indication (available, away, offline,
time last active)

PROJECT OBJECTIVES
The chat application is built using ReactJS and NodeJS. The main aspect is
where one user can send text and images from one end and the other receives
the same from their end. Also, users can create a chat group, add any number
of people to their wish and share the text, images apparently the other
members of the group receive the same in the chat room.

SOME FACTS & STATISTICS

• Real-time chat applications are popular among businesses and

organizations to connect with customers and clients.
• React and Firebase are popular technologies for building real-time chat
applications.
• Real-time chat applications can improve customer satisfaction and
engagement and can save time and money for businesses.
• Real-time chat applications are used in a variety of industries, including
healthcare, e-commerce, and finance.
• Building real-time chat applications requires a strong understanding of
web development technologies and user experience design.

Hence, See, Chat Applications are very much necessary. Hence, including this as
our Project is not only providing us immense pleasure but also making
ourselves think of being beneficial to this ultra modernized society and
contributing our part of knowledge to society.

TECHNICAL REQUIREMENTS
Hardware Required

RAM: - Minimum 4GB

Storage: - Minimum 8GB

Operating System: - Windows/MAC

Keyboard
Mouse

Software Required

ReactJS

NodeJS

Express

Hasper DB

Socket.IO

ABOUT THE LANGUAGES USED IN THIS PROJECT

REACTJS: - ReactJS is a declarative, efficient, and flexible JavaScript library
for building reusable UI components. It is an open-source, component-based
front-end library responsible only for the view layer of the application. It was
created by Jordan Walke, who was a software engineer at Facebook. It was
initially developed and maintained by Facebook and was later used in its
products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in
its newsfeed section, but it was released to the public in the month of May
2013.

NodeJS: - Node.js is an open-source, cross-platform JavaScript runtime

environment used for executing JavaScript code outside of a web browser.

Node.js is a great web framework for beginners because it works great for
data-intensive applications, like streaming and real-time apps, and Node.js
makes it easy to start building the back end.

Express.js: - Express.js is a small framework that works on top of Node.js

web server functionality to simplify its APIs and add helpful new features. It
makes it easier to organize your application’s functionality with middleware
and routing. It adds helpful utilities to Node.js HTTP objects and facilitates the
rendering of dynamic HTTP objects.

Hasper DB: - Harper DB combines database, application, and data

streaming services into a single hyper-performant solution, delivering
enterprise-quality apps at a lower cost and with less development effort.

It deploys user-programmed applications and pre-built add-ons on top of the

data they depend on for a high throughput, ultra-low latency back end.
Socket.io: - Socket.IO is a library that enables low-latency, bidirectional and
event-based communication between a client and a server. The Socket.IO
connection can be established with different low-level transports: Socket.IO
will automatically pick the best available option, depending on:

1. the capabilities of the browser

2. the network (some networks block WebSocket and/or Web Transport
connections).

WHAT IS A CHAT APPLICATION?

Apart from browsing through websites and sending & receiving emails, what
other activity do we most commonly do on the Internet? Most of you must
have unanimously agreed upon instant messaging. The ability to have a text
conversation with anyone across the globe, that to for free, is one of the best
appeals of instant messaging or chatting. From being dinosaurs that could
only speak standard English letters, chat applications have come a long way
just like the rest of computing and Internet. Today, Chat applications cover
free voice calls, free video calls, emoticons, stickers and the ability to converse
in text in any computer-supported written language in the world. In fact,
chatting applications have evolved to such ubiquity that not just humans, even
machines use chat to talk to each other.

Have we ever paused for a moment and thought about how this seemingly
simple technology works? Let us dive deep into this para?

The components of a chat application

A chat application has the following components: a messaging application, a

server and a persistent connection.

The messaging application is the part that you see. This is the part of the
system that resides on your phone, laptop or personal computer as a small app.
There is a text box where you type messages and another text box where all the
previous messages in the conversation are shown along with the timelines.
There is a button to send messages and, on the desktop / laptop, pressing the
Enter / Return key will do the job. There is a trigger to open a set of emoticons
that you can use. You can achieve the same using a combination of symbols
that look like the same emoticon when looked sideways. Finally, for more
sophisticated apps, there will be voice / video calls.

Before being ready for use, the messaging app connects to a central server. It
is only because of this connection that you can send messages to others who
are connected to the same server and others are able to see you online and
send messages to you. To establish a connection, the user must first
authenticate with his/her credentials.
On the server side of the equation, there is a server-side software that listens
for connections from the instant messaging client. The server maintains a map
of which connections belong to which user, so that messages can be reliably
relayed to the correct recipient and marked as being sent by a certain sender.
Finally, the third component is a persistent connection. This jargonistic word
simply means that the instant messaging app must remain connected to the
server ALL the time. A user is seen online and can send and receive messages
ONLY as long as the connection is held stably. Internet failures, unreliable
Internet connection, company firewall rules and Internet provider restrictions
will often cause the connection to fail and the instant messaging app either
does not work or suffers dropped messages.

Benefits of CHAT APPLICATIONS

Chat apps, by default, render you a win-win situation – it gives your users a
medium to communicate with each other. At the same time, it keeps you
informed about what they need from your brand. When built right, the ideas
for your business’ roadmap for the next few years will emerge from
somewhere across the chat conversations between your users and your
customer support executives. Apart from these, there are several benefits of
chat application development.

So, what features must your app have to make it more engaging and
interactive? Let’s get into the details one by one:

• Engaging In-App Messaging Features

In – app Messaging is an instantaneous form of communication. In fact, text
messaging has become the primary interaction channel for millennials across
the globe. When you develop chat within an app, you get to connect from 2
users with each other to several users within the same space. The latter
especially works perfectly for collaboration tools used by large enterprises.
In-app messaging also benefits user engagement, retention, and satisfaction.

• Unparalleled Scalability

As the user base grows, your chat application must be able to handle a high
volume of users, sessions and channels. Setting up a highly resilient
infrastructure set up with availability on a variety of devices and operating
systems can make your app highly competent.

In turn, the performance and reliability of your chat app will grow
exponentially if a clear strategy is set right when you make your first steps.

• Complete Security

Building a chat app is a huge responsibility when it comes to taking care of

user privacy and safety, the advantages and disadvantages of a chat app, and
attaining the purpose of a chat application. A few free chat apps hold
accusations of having breached the usage of customer information due to
failures in the implementation of a secure infrastructure.

At the same time, several other apps have made their way into building a
strong and secure messaging environment with end-to-end encryption,
HIPPA, and moderation controls.

CONCLUSION
To sum up, there are several advantages and benefits of chat app development
as mentioned above. From connecting your users to generating leads that
convert, chat apps can help developers explore the bigger picture of app
development.

DATAFLOW DIAGRAM OF CHAT APPLICATION

Multiuser Chat Application Data flow diagram is often used as a preliminary
step to create an overview of the Chat without going into detail, which can
later be elaborated.it normally consists of overall application dataflow and
processes of the chat process. lt contains all of the userflow and their entities
such all the flow of Chat, Chat History, Chat Profile, Multi Chat, User, Group
Chat, Smiley Chat. All the below diagrams have been used forthe visualization
of data processing and structured designof the Chat process and working flow.

ZERO LEVEL FLOW DIAGRAM OF ONLINE CHAT

APPLICATION

This is the Zero Level DFD of Multiuser Chat Application, where we have
elaborated the high-level process of Chat. It's a basic overview of the whole
Multiuser Chat Application or process being analyzed or modeled. It's
designed to be an at-a-glance View of User, Group Chat and Smiley Chat
showing the system as a single high-level process, with its relationship to
external entities of Chat, Chat History and Chat Profile, । should be understood
by a wide audience, including Chat, Chat Profile and User In zero level DFD of
Multiuser Chat Application, we have described the high-level flow of the Chat
system.

High Level Entities and Processes flow of Chat Application

High Level Entities and proccess flow of Multiuser Chat Application Managing
all the Chat

० Managing all the Chat History

• Managing all the Chat Profile

• Managing all the Multi Chat

• Managing all the User

• Managing all the Group Chat

• Managing all the Smiley Chat

FIRST LEVEL FLOW DIAGRAM OF ONLINE CHAT

APPLICATION

First Level DFD (1 st Level) of Multiuser Chat Application shows how the
system is divided into sub-systems (processes), each of which deals with one
or more of the data flows to or from an external agent, and which together
provide all the functionality of the Multi Us Chat Application system. It also
identifies internal data stores of Smiley Chat, Group Chat, User, Multi Chat,
Chat Profile that must be present for the Chat system to do its job and shows
the flow of data between the various parts of Chat, Chat Profile, Group Chat,
Smiley Chat, User of the system. DFD Level 1 provides a more detailed
breakout of pieces of the 1st level DFD.

Main Entities and Output of First Level DFD (1ST Level DFD)

• Processing Chat records and generate report of all Chat

• Processing Chat History records and generate report of all Chat History

• Processing Chat Profile records and generate report of

all Chat Profile

• Processing Multi Chat records and generate report of all Multi Chat

• Processing User records and generate report of all User

• Processing Group Chat records and generate report of all Group Chat

• Processing Smiley Chat records and generate report of all Smiley Chat

SECOND LEVEL FLOW DIAGRAM OF ONLINE CHAT

APPLICATIONS

DFD Level 2 then goes one step deeper into parts of Level 1 of Chat. It may
require more functionalities of Chat to reach the necessary level of detail
about the Chat functioning. First Level DFD (1st Level) of Multiuser
ChatApplication shows how the system is divided into sub-systems
(processes). The 2nd Level DFD contains more details of Smiley Chat, Group
Chat, User, Multi Chat, Chat Profile, Chat History, Chat.

Low level functionalities of Chat Applications

• Admin logins to the system and manage all the functionalities of Multiuser
Chat Application

•Admin can add, edit, delete and view the records of Chat, Chat Profile, User,
Smiley Chat

• Admin can manage all the details of Chat History, Multi Chat, Group Chat

•Admin can als০ generate reports of Chat, Chat History, Chat Profile, Multi Chat,
User, Group Chat

• Admin can search the details of Chat History, User, Group Chat

•Admin can apply different level of filters on report of Chat, Multi Chat, User

• Admin can track the detailed information of Chat History, Chat Profile, Multi
Chat, User

FUTURE SCOPE OF CHAT APPLICATIONS

The main objective of the project is to develop a Chat Application. We have

taken a wide range of literature reviews to achieve all the tasks, where we
came to know about some of the products that are existing on the market. We
did detailed research in that path to cover the loopholes that existing systems
are facing and to eradicate them in our application. In the process of research,
we came to know about the latest technologies and different algorithms.
The product has been successfully developed in terms of extendibility,
portability, and maintainability and tested to meet all requirements that are
Authentication
Integrity
Confidentiality
Which are specified as the three basic concepts for secure communication
over a network.

Future Scope:

With the knowledge we have gained by developing this application, we are

confident that in the future we can make the application more effective by
adding these services.
• Extending this application by providing Authorization service.
• Creating Database and maintaining users.
• Increasing the effectiveness of the application by providing Voice Chat.
• Extending it to Web Support.