EXPENSE TRACKER

A desertion submitted in partial fulfillment of the requirements for the award of degree

(Bachelor of Computer Science)

By

MOHAMED HARRIS S
REG. NO.: 2113171058034

UNDER THE GUIDANCE OF

Prof. Dr. J. Adam Kani,

Assistant Professor

PG DEPARTMENT OF COMPUTER SCIENCE THE NEW

COLLEGE (AUTONOMOUS) CHENNAI - 600014

1|Page
 PG DEPARTMENT OF COMPUTER SCIENCE

THE NEW COLLEGE (AUTONOMOUS)

CHENNAI - 600014

BONAFIDE CERTIFICATE

This is to certify that the project work Entitled “EXPENSE TRACKER” is a

bonafide record work done by Mr.MOHAMMED HARRIS S,
Reg.No.:2113171058034 in a partial fulfillment of the requirement for the
award of the Degree of Bachelor of Computer Science.

Project Guide Head of the Department

Submitted for the Viva Voce Examination held on …………....

Internal Examiner External Examiner

Place :

Date :

2|Page
 ACKNOWLEDGEMENT

“In the name of Allah, the most Beneficent, the most Merciful”

I would like to thank our Principal Dr. M. Asrar Sheriff, M.Sc.,

M.Phil., Ph.D., for his guidance.

I thank Dr. P. HAKKIM DIVAN MYDEEN, M.Sc., M.Phil., Ph.D.

Head of the Department, for his guidance and helpful mind to
complete this project.

I am extremely grateful to my project guide Prof. Dr. J. Adam Kani

M.Sc., M.Phil.,M.Tech.,P.hD., Assistant Professor of Computer
Science, for suggesting to me the guidance at the right time and

discussions on a very useful topic needed in the course of the work.

I'm also grateful to all the staff of the Department of Computer

Science. My heartfelt thanks goes to my parents and friends who
encouraged me to do this mini project, and only because of their Best
wishes and invaluable help, this project is seeing the light of the day.

(MOHAMMED HARRIS S)

3|Page
S.N Contents Page
o No.
1. Introduction
2. System Analysis
3. Requirement Specification
4. System Design
5. Software Description
6. System Testing And
Implements
7. ER Diagram
8. Table Structure
9. Form Layout
10. Data Reports
11. Source Code
12. Conclusion
13. Future Enhancement
15. Bibliography

4|Page
INTRODUCTION

5|Page
INTRODUCTION
The Expense Planner Web Application is a comprehensive and intuitive tool designed to
revolutionize personal finance management.

This platform offers users a seamless experience to track, analyze, and optimize
their expenses
effortlessly.

Incorporating user-friendly interfaces and robust functionalities, the app

enables individuals to categorize expenditures, set budgets, visualize spending patterns

Existing System and it’s Limitations

There are only few expense tracker web application and they are very complicated
comparing to mine.

Need of Proposed System

My system provide clean and user-friendly design for easy navigation and accessibility.
Clear visuals, well-organized layouts, and intuitive controls for seamless user interaction.
Quick and effortless expense entry with options for categorization and adding notes.
Real-time updates and synchronization for immediate visibility of spending habits.

Intended Audience
Anyone who wanted to manage their expense and income.For example students, small
business owners , working professionals , etc.

6|Page
SYSTEM ANALYSIS

7|Page
 SYSTEM ANALYSIS

INTRODUCTION

After analyzing the requirements of the task to be performed, the next step is to
analyze the problem and understand its context. The first activity in the phase is studying the
existing system and other is to understand the requirements and domain of the new system.
Both the activities are equally important, but the first activity serves as a basis of giving the
functional specifications and then successful design of the proposed system. Understanding
the properties and requirements of a new system is more difficult and requires creative
thinking and understanding of existing running system is also difficult, improper
understanding of present system can lead diversion from solution.

ANALYSIS MODEL

SPIRAL MODEL was defined by Barry Boehm in his 1988 article, “A spiral Model
of Software Development and Enhancement. This model was not the first model to discuss
iterative development, but it was the first model to explain why the iteration models.

As originally envisioned, the iterations were typically 6 months to 2 years long. Each
phase starts with a design goal and ends with a client reviewing the progress thus far.
Analysis and engineering efforts are applied at each phase of the project, with an eye toward
the end goal of the project.

The steps for Spiral Model can be generalized as follows:

The new system requirements are defined in as much details as possible. This usually
involves interviewing a number of users representing all the external or internal users
and other aspects of the existing system.

A preliminary design is created for the new system.

A first prototype of the new system is constructed from the preliminary design. This
is usually a scaled-down system, and represents an approximation of the
characteristics of the final product.
8|Page
A second prototype is evolved by a fourfold procedure:

1. Evaluating the first prototype in terms of its strengths, weakness, and risks.

2. Defining the requirements of the second prototype.

3. Planning an designing the second prototype.

4. Constructing and testing the second prototype.

At the customer option, the entire project can be aborted if the risk is deemed too
great. Risk factors might involved development cost overruns, operating-cost
miscalculation, or any other factor that could, in the customer’s judgment, result in a
less-than-satisfactory final product.

The existing prototype is evaluated in the same manner as was the previous prototype,
and if necessary, another prototype is developed from it according to the fourfold
procedure outlined above.

The preceding steps are iterated until the customer is satisfied that the refined
prototype represents the final product desired.

The final system is constructed, based on the refined prototype.

The final system is thoroughly evaluated and tested. Routine maintenance is carried
on a continuing basis to prevent large scale failures and to minimize down time.

9|Page
The following diagram shows how a spiral model acts like:

Spiral Model

ADVANTAGES

10 | P a g e
 Estimates(i.e. budget, schedule etc .) become more realistic as work progresses,
because important issues discovered earlier.

It is more able to cope with the changes that are software development generally
entails.

Software engineers can get their hands in and start woring on the core of a project
earlier.

STUDY OF THE SYSTEM

GUI’S
In the flexibility of the uses the interface has been developed a graphics concept in mind,
associated through a browsers interface. The GUI’S at the top level have been categorized as

1. Administrative user interface

2. The operational or generic user interface

The administrative user interface concentrates on the consistent information that is
practically, part of the organizational activities and which needs proper authentication for the
data collection. The interfaces help the administrations with all the transactional states like
Data insertion, Data deletion and Date updation along with the extensive data search
capabilities.
The operational or generic user interface helps the users upon the system in transactions
through the existing data and required services. The operational user interface also helps the
ordinary users in managing their own information helps the ordinary users in managing their
own information in a customized manner as per the assisted flexibilities

11 | P a g e
NUMBER OF MODULES
The system after careful analysis has been identified to be presented with the following
modules:
The Modules Involved in the project is:

1 Login and Register page

2 Dashboard
3 Analytic view

1. LOGIN AND REGISTER PAGE :

Login Page Functionality:

User Input Handling: Users can input their email and password into designated fields.

Validation: The system checks if the provided email contains the '@' symbol, ensuring it
resembles a valid email format.

Database Query: It queries the Firestore database to find a user with the provided email.

Password Decryption and Comparison: If a user with the provided email exists, it decrypts the
stored password and compares it with the password provided by the user.

User Authentication: If the password matches, the user is authenticated, and their details are
stored locally. They are then redirected to the main page.

Feedback: Notifications are displayed to inform the user whether the login was successful or
unsuccessful.

Register Page Functionality:

User Input Handling: Users can input their name, email, and password into designated fields.

Validation: It ensures the email provided by the user contains the '@' symbol, indicating a
valid email format.

Database Check: It checks if a user with the provided email already exists in the database to
prevent duplicate registrations.

12 | P a g e
Password Encryption: The provided password is encrypted using AES encryption before
being stored in the database for security purposes.

Database Update: If the user is new, their details are added to the Firestore database.

Feedback: Notifications are displayed to inform the user whether the registration was
successful or unsuccessful.

General Observations:

Both pages handle user input securely, ensuring the validity of email formats and encrypting
passwords.

They interact with the Firestore database to manage user authentication and registration.

Notifications are provided to give users feedback on their actions, whether successful or
unsuccessful.

These pages together create a basic but functional user authentication system for the
application, allowing users to log in securely and register for new accounts.

2. DASHBOARD:

Transaction Form Component:

This component allows users to add or update their transactions.

Users can input details such as the transaction name, type (income or expense), amount, date,
category, and reference.

Depending on the form mode ("add" or "edit"), the component adjusts its behavior
accordingly, either adding a new transaction or updating an existing one.

It provides real-time validation and feedback to ensure accurate data entry.

13 | P a g e
Transaction Table Component:

The table component displays a list of transactions in a tabular format.

Each row represents a single transaction, displaying details like name, type, amount, date,
category, and reference.

Users can perform actions on each transaction, such as editing or deleting it.

Transaction data is retrieved from the backend and populated dynamically, providing an up-
to-date view of the user's financial activity.

User Authentication and Authorization:

User authentication ensures that only authenticated users can access the dashboard,
maintaining data privacy and security.

Authorization mechanisms may be implemented to restrict certain actions (e.g., editing or

deleting transactions) based on user roles or permissions.

Notification System:

The notification system provides feedback to users based on their interactions with the
application.

Notifications inform users about the success or failure of their actions, such as adding,
updating, or deleting transactions.

Color-coded notifications (e.g., green for success, red for error) enhance clarity and highlight
important messages.

Loading State Management:

The loading state management ensures a smooth user experience by indicating when
asynchronous operations (e.g., adding, updating, or deleting transactions) are in progress.

14 | P a g e
Visual cues, such as loading spinners or progress indicators, inform users that the system is
processing their requests.

Integration with Firebase Backend:

The project leverages Firebase Firestore for data storage and retrieval.

CRUD (Create, Read, Update, Delete) operations are performed on the Firestore database to
manage user transactions.

Real-time synchronization with Firestore enables seamless data updates across devices and
ensures data consistency.

Date Formatting:

Dates are formatted using the moment library to ensure consistency and readability across
different locales.

Formatting dates in a standard format (e.g., "DD-MM-YYYY") enhances usability and

reduces ambiguity.

3. ANALYTIC VIEW:

Total Transactions:

Shows the total number of transactions recorded in the specified time frame.

Further categorized into income and expense transactions, displaying the counts for each.

Transaction Distribution:

Utilizes ring progress components to visually represent the proportion of income and expense
transactions.

Each ring displays the percentage of income or expense transactions relative to the total
number of transactions.

15 | P a g e
Income transactions are represented in teal, while expense transactions are in red.

Total Turnover:

Reflects the total amount of money involved in all recorded transactions.

Segregated into income and expense amounts, showing the sum for each.

Turnover Distribution:

Similar to transaction distribution, but now focuses on the distribution of income and expense
amounts.

Ring progress components visually display the proportion of income and expense amounts
relative to the total turnover.

Income amount is represented in green, and expense amount is represented in red.

Income Categories:

Lists various categories under which income transactions fall.

For each category, it shows the percentage of the total income amount attributed to
transactions in that category.

Progress bars visually represent this percentage, with the bar color corresponding to the
category's color.

Expense Categories:

Similar to income categories, but focused on expense transactions.

Lists expense categories and their corresponding percentages of the total expense amount.

Progress bars visually represent these percentages, with the bar color indicating the category's
color.

16 | P a g e
Filters:

Offers users the flexibility to filter transactions based on frequency and type.

Frequency options include last week, last month, last year, or a custom date range.

Users can filter transactions by type, selecting between all transactions, income only, or
expense only.

PROJECT INSTRUCTIONS

Based on the given requirements, conceptualize the Solution Architecture. Choose the
domain of your interest otherwise develop the application for ultimatedotnet.com.
Depict the various architectural components, show interactions and connectedness and
show internal and external elements. Design the web services, web methods and
database infrastructure needed both and client and server.

Provide an environment for upgradation of application for newer versions that are
available in the same domain as web service target.

PROPOSED SYSTEM

To debug the existing system, remove procedures those cause data redundancy, make
navigational sequence proper. To provide information about audits on different level and also
to reflect the current work status depending on organization/auditor or date. To build strong
password mechanism.

NEED FOR COMPUTERIZATION

We all know the importance of computerization. The world is moving ahead at lightning
speed and everyone is running short of time. One always wants to get the information and
perform a task he/she/they desire(s) within a short period of time and too with amount of
efficiency and accuracy.

17 | P a g e
 The application areas for the computerization have been selected on the basis of
following factors:

Minimizing the manual records kept at different locations.

There will be more data integrity.
Facilitating desired information display, very quickly, by retrieving information from
users.
Facilitating various statistical information which helps in decision-making?

To reduce manual efforts in activities that involved repetitive work.

FUNCTIONAL FEATURES OF THE MODEL

As far as the project is developed the functionality is simple, the objective of the
proposal is to strengthen the functioning of Audit Status Monitoring and make them effective
and better. The entire scope has been classified into five streams knows as Coordinator Level,
management Level, Auditor Level, User Level and State Web Coordinator Level. The
proposed software will cover the information needs with respect to each request of the user
group viz. accepting the request, providing vulnerability document report and the current
status of the audit.

WORKING OF THE SYSTEM

The entire scope has been classified into five streams known as: -

Coordinator Level

(Addressing the information management needs of coordinator)

Management Level

(Addressing the information management needs of management)

Auditor Level

(Addressing the information management needs of auditors)

18 | P a g e
User Level

(Addressing the information management needs of the user group)

State Web Coordinator level

(Addressing the needs of coordinator of the state)

INPUT AND OUTPUT

The main inputs, outputs major functions of the system are as follows

User Input:

Filter Selection:

Users can select the type of transactions they want to view (e.g., expenses, income).

Users can choose the time frame for transaction viewing:

Last 7 days

Last 30 days

Last 365 days

Custom date range

Transaction Management:

Users can add a new transaction by providing details such as date, type, amount, etc.

Users can edit existing transactions by selecting them from the transaction list and modifying
the details.

19 | P a g e
User Output:

Transaction Display:

Upon applying filters, users see a list of transactions matching their criteria.

Each transaction entry displays details such as date, type, amount, etc.

Analytics Visualization:

Users can switch to the analytics view to visualize their spending patterns and trends.

Graphs or charts depict insights such as total expenses over time, category-wise spending
distribution, etc.

Transaction Form:

When adding or editing a transaction, users interact with a modal form.

The form prompts users to input details like date, type, amount, etc.

Notifications:

Users receive notifications for successful transactions, errors during data fetching, or any
other critical events.

User Interaction Flow:

User Opens the App:

User navigates to the app's homepage.

20 | P a g e
Filtering Transactions:

User selects the type of transactions to view (e.g., expenses only).

User chooses to view transactions for the last 30 days.

Transaction Display:

App fetches and displays transactions matching the selected filters.

User sees a list of expenses incurred in the last 30 days.

Adding a Transaction:

User clicks on the "Add Transaction" button.

The transaction form modal pops up.

User fills in the details (date, type, amount) and submits the form.

Editing a Transaction:

User selects a transaction from the list.

User clicks on the "Edit" button.

The transaction form modal opens with pre-filled details of the selected transaction.

User makes changes and saves the edited transaction.

Viewing Analytics:

User switches to the analytics view to visualize spending trends.

Graphs/charts show insights such as monthly expenses, category-wise spending, etc.

Receiving Notifications:

User receives a notification if there's an error while fetching transactions or saving edits.

21 | P a g e
PROCESS MODELS USED WITH JUSTIFICATION

ACCESS CONTROL FOR DATA WHICH REQUIRE USER

AUTHENTICATION

USER NAME:
The component provides a field for users to enter their name.

This input is captured and stored in the component's state or form state.

It ensures that users can input their names comfortably.

EMAIL:
Users are prompted to input their email address.

The component ensures that the entered email is captured securely.

Any validations or formatting checks may occur to ensure the email format is correct.

PASSWORD:
Users can input their passwords securely in a password field.

The component ensures that the entered password is not visible to others.

It include features like password strength validation and requirements.

22 | P a g e
 REQUIRMENT
SPECIFICATIONS

23 | P a g e
HARDWARE REQUIREMENTS
PROCESSOR: INTEL i5 8th gen
PROCESSOR SPEED: 1.6 GHZ
RAM: 8 GB
MONITOR: 1080 FULL HD LED DISPLAY
KEYBOARD: STANDARD KEYBOARD
OPERATING SYSTEM: WINDOWS 11
HDD: 1TB
SSD: 256GB
MOUSE: MOUSEPAD TRACK

SOFTWARE REQUIREMENTS

FRONT END: VISUAL STUDIO CODE (VSC)

BACK END:FIREBASE,VISUAL STUDIO CODE (VSC)
OPERATING SYSTEM: WINDOWS 11

TECHNOLOGY
FRONT END: REACT.
BACK END: FIREBASE.
DATABASE: FIRESTORE DATABASE.

24 | P a g e
SYSTEM DESIGN

25 | P a g e
 SYSTEM DESIGN:
In this phase, we provide a physical shape to all the models that are created in the analysis
phase. The design phase is used to physically create different elements of the project. This
phase involves the following sub-phases.

Module Design:

In this step, we identify the modules and sub-modules of the project. Module is the functional
unit of a project. The modularity of a project depends upon the functional requirements and
also the users of the project. In this step, we identify the modules and sub-modules of the
project. Module is the functional unit of a project. The modularity of a project depends upon
the functional requirements and also the users of the project.

In this project, following functional modules are identified.

Login and Register page: This module involves all the functionalities meant for the
registration and login of the user account.

Dashboard: This module involves all the functionalities meant for the dashboard.

Analytic: This module involves all the functionalities meant for the analytic

Data Design:

Data dictionary is a document, which describes the database design of the project. In this step,
we generate the data dictionary using the E-R Model of the system. Each entity is represented
as a table here. The Data dictionary describes the tables, their fields, data types and constraints
on the fields. The Data Design transforms the information domain model created during
analysis into the data structure that will be required to implement the software.
Data Design is the first of three design activities that are conducted during software
engineering. The impact of data structure on program structures and procedural complexity
cases data design to have a profound influence on software quality. The concept of
information hiding and data abstraction provides the foundation for an approach to data

26 | P a g e
design. The primary activity during data design is to select logical representation of data
objects (data dictionary) identified during the requirements definitions and specifications
phase.

It is the process of designing database files, which are the key source of information to
the system. The files should properly, designed planed for collection, accumulation, editing
the required information. The objectives of the file design are to provide affective auxiliary
storage and to contribute to the overall efficiency of the computer program components to the
system.

FIRST NORMAL FORM:

A relation R of this system is said to be in first normal form, if all domains contain
atomic values.

In this project the Data in each table has atomic values but the data are redundant. so, I
consider next normal form i.e., Second normal form.

SECOND NORMAL FORM:

A relation R of this system is in second normal form as if every irreducibly dependent

on primary key. Coming to child tables we will be having a reference to the primary key of
master table.

In this project I normalized the data tables up to second normal form.

Interface Design:

In this step, we design all the interfaces for the application. Interface is the medium
between the user and the system. We consider all the client specifications while designing
the screens and reports.

Every user interface has been designed so that the system provides all the
characteristics like easy to use, less number of keystrokes to complete an action, less usage of
left hand, easy to learn, easy to navigate, consistent, error-free and functional.

The entire interface that has designed with the features listed below:

27 | P a g e
 Every action is provided with a prompting message. So that it provides a better
communication.
Every interface maintained consistent navigation, icons, colors, shape and layout.

Every page has been designed so that it optimizes the user’s work efficiency.

Test Case Design:

In this step, we design all the test cases, which are used by the testers to test the
application after construction. Test case is nothing but a sample input or sample activity
performed to test for any errors or bugs in the application. In order to perform system testing,
we’ve developed many test cases. Some of them are as follows.

S.No Input Expected Behavior Observed Status

Behavior Pass(P)

Fail(F)

1 Enter the Wrong login-id and Error Message indicating the -do- P
password to login status of the user
2 Enter correct hint answer in Display the password of the -do- P
password recovery form to user
recover password
3 Enter an existing login-id in the Error message “login_id -do- P

user registration form already exists. Please choose

another one”.
4 Adding invalid transaction Error message “Error adding -do- P
transaction.”
5 Deleting transaction Error message “Error -do- P
deleting transaction”
6 Fetching transaction It should display an error -do- P
message “Error fetching
transactions”

28 | P a g e
 SOFTWARE
DESCRIPTION

29 | P a g e
 FRONT END

VISUAL STUDIO CODE

Visual Studio does not support any programming language, solution or tool
intrinsically; instead, it allows the plugging of functionality coded as a
VSPackage.
When installed, the functionality is available as a Service. The IDE provides
three services: SVsSolution, which provides the ability to enumerate projects
and solutions; SVsUIShell, which provides windowing and UI functionality
(including tabs, toolbars, and tool windows); and SVsShell, which deals with
registration of VSPackages.
In addition, the IDE is also responsible for coordinating and enabling
communication between services. All editors, designers, project types and
other tools are implemented as VSPackages. Visual Studio uses COM to
access the VSPackages.
The Visual Studio SDK also includes the Managed Package Framework
(MPF), which is a set of MANAGED wrappers around the COM-interfaces
that allow the Packages to be written in any complaint
language. However, MPF does not provide all the functionality exposed by the
Visual Studio COM interfaces.] The services can then be consumed for
creation of other packages, which add functionality to the Visual Studio IDE.
Support for programming languages is added by using a specific VSPackage
called a Language Service.
A language service defines various interfaces which the VSPackage
implementation can implement to add support for various functionalities.
Functionalities that can be added this way include syntax coloring,
statement completion, brace matching, parameter information tooltips,
member lists, and error markers for background compilation. If the interface
is implemented, the functionality will be available for the language.
Language services are implemented on a per-language basis. The
implementations can reuse code from the parser or the compiler for the
language. Language services can be implemented either in native code or
managed code. For native code, either the native COM interfaces or the
Babel Framework (part of Visual Studio SDK) can be used.
For managed code, the MPF includes wrappers for writing managed language
services.

30 | P a g e
 Visual Studio does not include any source control support built in but it defines
two alternative ways for source control systems to integrate with the IDE. A
Source Control VSPackage can provide its own customised user interface.
In contrast, a source control plugin using the MSSCCI (Microsoft Source
Code Control Interface) provides a set of functions that are used to implement
various source control functionality, with a standard Visual Studio user
interface.
MSSCCI was first used to integrate visual source safe with Visual Studio 6.0
but was later opened up via the Visual Studio SDK. Visual Studio
.NET 2002 used MSSCCI 1.1, and Visual Studio .NET 2003 used MSSCCI 1.2.
Visual Studio 2005, 2008, and 2010 use MSSCCI Version 1.3, which adds
support for rename and delete propagation, as well as asynchronous opening.

BACK END
FIREBASE
Firebase is a Backend-as-a-Service (Baas).
It provides developers with a variety of tools and services to help them
develop quality apps, grow their user base, and earn profit.
It is built on Google’s infrastructure.
Firebase is categorized as a NoSQL database program, which stores data in
JSON-like documents.
In Firebase, a document is a set of key-value pairs defined by a schema. A
group of documents makes up a collection.
Usage of FIREBASE

Real-time databases for synchronized data across

users User authentication for secure access control

Cloud storage for storing user-generated content

Hosting for deploying web applications swiftly

Push notifications for engaging users across platforms

Analytics for gaining insights into user behavior and app performance
Versions of FIREBASE
Version Year Code Name

31 | P a g e
 Firebase 1.x 2012 Phoenix

Firebase 2.x 2013 Phoenix 2.0

Firebase 3.x 2016 Liberator

Firebase 4.x 2017 Grove

Firebase 5.x 2018 Sunflower

Firebase 6.x 2019 Thorium

Firebase 7.x 2020 Spark

Firebase 8.x 2021 Embers

FIRESTORE DATABASE
Firestore is a flexible, scalable NoSQL document database provided by Firebase,
which is a platform developed by Google for building mobile and web applications.
Here's an overview of Firestore:
Document-Oriented: Firestore is a document-oriented database, meaning it
stores data in JSON-like documents. Each document contains key-value
pairs, where keys are strings and values can be various data types, including
strings, numbers, boolean values, arrays, nested objects, and even binary
data.
Collections and Documents: Firestore organizes data into collections and
documents. A collection is a group of documents, and each document is a set
of key-value pairs. You can think of collections as tables in a relational
database and documents as rows within those tables.
Real-time Updates: One of the key features of Firestore is its ability to provide
real-time updates. It uses WebSockets or other efficient mechanisms to
synchronize data between clients and the server in real-time. This makes
Firestore particularly suitable for applications requiring live data updates,
such as chat apps or collaborative tools. SQL Server full text search etc.

32 | P a g e
Instance of FIRESTORE DATABASE:
Creating a Firebase Project: Go to the Firebase console
(https://console.firebase.google.com/) and create a new project or select an
existing one.

Enabling Firestore: Once your project is created, navigate to the Firestore

section in the Firebase console and enable Firestore for your project.

Initializing Firestore in Your Application: In your mobile or web application code,

initialize Firestore by connecting it to your Firebase project. This usually involves
adding Firebase SDK dependencies to your project and initializing Firestore with
your Firebase project's configuration.

Creating Collections and Documents: With Firestore initialized, you can now start
creating collections and documents to store your data. You can do this
programmatically from your application code or manually in the Firebase console.

Reading and Writing Data: You can read data from Firestore using queries and
write data using set, update, or delete operations. These operations can
be performed from your application code using the Firestore SDK.

Setting Security Rules: It's important to set security rules to control access to
your Firestore data. These rules define who can read and write data and under
what conditions. You can define these rules in the Firebase console or by using
Firebase CLI.

Advantages of Instances
To install different versions in one machine.

To reduce cost.

To maintain production, development, and test environments separately.

33 | P a g e
 To reduce temporary database problems.

To separate security privileges.

To maintain standby server.

34 | P a g e
SYSTEM TESTING AND
IMLEMENTATION

35 | P a g e
 SYSTEM DESIGN:

In this phase, we provide a physical shape to all the models that are created in the analysis
phase. The design phase is used to physically create different elements of the project. This
phase involves the following sub-phases.

Module Design:

In this step, we identify the modules and sub-modules of the project. Module is the functional
unit of a project. The modularity of a project depends upon the functional requirements and
also the users of the project. In this step, we identify the modules and sub-modules of the
project. Module is the functional unit of a project. The modularity of a project depends upon
the functional requirements and also the users of the project.

In this project, following functional modules are identified.

Login and Register page: This module involves all the functionalities meant for the
registration and login of the user account.

Dashboard: This module involves all the functionalities meant for the dashboard.

Analytic: This module involves all the functionalities meant for the analytic

Data Design:

Data dictionary is a document, which describes the database design of the project. In this step,
we generate the data dictionary using the E-R Model of the system. Each entity is represented
as a table here. The Data dictionary describes the tables, their fields, data types and constraints
on the fields. The Data Design transforms the information domain model created during
analysis into the data structure that will be required to implement the software.
Data Design is the first of three design activities that are conducted during software
engineering. The impact of data structure on program structures and procedural complexity
cases data design to have a profound influence on software quality. The concept of
information hiding and data abstraction provides the foundation for an approach to data
design. The primary activity during data design is to select logical representation of data

36 | P a g e
objects (data dictionary) identified during the requirements definitions and specifications
phase.

It is the process of designing database files, which are the key source of information to
the system. The files should properly, designed planed for collection, accumulation, editing
the required information. The objectives of the file design are to provide affective auxiliary
storage and to contribute to the overall efficiency of the computer program components to the
system.

FIRST NORMAL FORM:

A relation R of this system is said to be in first normal form, if all domains contain
atomic values.

In this project the Data in each table has atomic values but the data are redundant. so, I
consider next normal form i.e., Second normal form.

SECOND NORMAL FORM:

A relation R of this system is in second normal form as if every irreducibly dependent

on primary key. Coming to child tables we will be having a reference to the primary key of
master table.

In this project I normalized the data tables up to second normal form.

Interface Design:

In this step, we design all the interfaces for the application. Interface is the medium
between the user and the system. We consider all the client specifications while designing
the screens and reports.

Every user interface has been designed so that the system provides all the
characteristics like easy to use, less number of keystrokes to complete an action, less usage of
left hand, easy too learn, easy to navigate, consistent, error-free and functional.

The entire interface that has designed with the features listed below:

37 | P a g e
 Every action is provided with a prompting message. So that it provides a better
communication.
Every interface maintained consistent navigation, menus, icons, colors, shape and
layout.

Every page has been designed so that it optimizes the user’s work efficiency.

Test Case Design:

In this step, we design all the test cases, which are used by the testers to test the
application after construction. Test case is nothing but a sample input or sample activity
performed to test for any errors or bugs in the application. In order to perform system testing,
we’ve developed many test cases. Some of them are as follows.

S.No Input Expected Behavior Observed Status

Behavior Pass(P)

Fail(F)

1 Enter the Wrong login-id and Error Message indicating the -do- P
password to login status of the user
2 Enter correct hint answer in Display the password of the -do- P
password recovery form to user
recover password
3 Enter an existing login-id in the Error message “login_id -do- P
user registration form already exists. Please choose
another one”.
4 Adding invalid transaction Error message “Error adding -do- P
transaction.”
5 Deleting transaction Error message “Error -do- P
deleting transaction”
6 Fetching transaction It should display an error -do- P
message “Error fetching
transactions”

38 | P a g e
ER-DIAGRAM

39 | P a g e
 Details Dashboard
Login
User name, Password nfirmation

Updating
Valida
User Login Analytic

User Detail
Add Details

Registration Registration

40 | P a g e
TABLE STRUCTURE

41 | P a g e
USER DETAILS TABLE:

42 | P a g e
USER-TRANSACTION TABLE:

43 | P a g e
FORM LAYOUT

44 | P a g e
REGISTER FORM:

45 | P a g e
LOGIN FORM:

46 | P a g e
HOME PAGE:

47 | P a g e
DATA REPORTS

48 | P a g e
RING VIEW REPORT:

49 | P a g e
BAR CHART REPORT:

50 | P a g e
SOURCE CODE

51 | P a g e
REGISTER SOURCE CODE:

import React from "react";

import { useForm } from "@mantine/form";

import {

Button,

Card,

Divider,

Stack,

TextInput,

Title,

Anchor,

} from "@mantine/core";

import { addDoc, collection, getDocs, query, where } from "firebase/firestore"; import

{ fireDb } from "../firebaseConfig"; import cryptojs from "crypto-js";

import { showNotification } from "@mantine/notifications";

import { useDispatch } from "react-redux";

import { HideLoading, ShowLoading } from "../redux/alertsSlice";

function Register() {

const dispatch = useDispatch();

const registerForm = useForm({

initialValues: {

name: "",

email: "",

password: "",

},

});

const onSubmit = async (event) => {

event.preventDefault();

try {

// Check if email contains '@'

if (!registerForm.values.email.includes('@')) {

showNotification({

title: "Invalid email",

52 | P a g e
 color: "red",

});

return;

/ Check if user already exists based on email

dispatch(ShowLoading());

const qry = query( collection(fireDb,

"users"),

where("email", "==", registerForm.values.email)

);

const existingUsers = await getDocs(qry); if

(existingUsers.size > 0) {

showNotification({

title: "User already exists",

color: "red",

});

return;

/ Encrypt password

const encryptedPassword = cryptojs.AES.encrypt(

registerForm.values.password,

"expenease"

).toString();

// Add the user to the Firestore collection

const response = await addDoc(collection(fireDb, "users"), {

...registerForm.values,

password: encryptedPassword,

});

if (response.id) {

showNotification({

title: "User created successfully",

color: "green",

});

} else {

showNotification({

title: "Something went wrong",

color: "red",

});

dispatch(HideLoading());

53 | P a g e
 } catch (error) {

dispatch(HideLoading());

showNotification({

title: "Something went wrong",

color: "red",

});

};

return (

<div className="flex h-screen justify-center items-center auth">

<Card

sx={{

width: 400,

padding: "sm",

}}

shadow="lg"

withBorder

>

<Title order={2} mb={5} color='gray'>

<img src="\image\Designer.png" alt="" style={{ width: 45, height: 45, marginRight:10}} />

EXPENEASE-REGISTER

</Title>

<Divider variant="dotted" color="gray" />

<form action="" onSubmit={onSubmit}>

<Stack mt={5}>

<TextInput

label="Name"

placeholder="Enter your name"

name="name"

{...registerForm.getInputProps("name")}

/>

<TextInput

label="Email"

placeholder="Enter your email"

name="email"

{...registerForm.getInputProps("email")}

/>

<TextInput

label="Password"

placeholder="Enter your password"

54 | P a g e
 name="password"

type="password"

{...registerForm.getInputProps("password")}

/>

<Button type="submit" color="teal">

Register

</Button>

<Anchor href="/login"

color='teal'

>Already have an account? Login</Anchor>

</Stack>

</form>

</Card>

</div>

);

export default Register;

LOGIN SOURCE CODE:

import React from "react";

import { useForm } from "@mantine/form";

import {

Anchor,

Button,

Card,

Divider,

Stack,

TextInput,

Title,

} from "@mantine/core";

import { collection, getDocs, query, where } from "firebase/firestore"; import {

fireDb } from "../firebaseConfig"; import cryptojs from "crypto-js";

import { showNotification } from "@mantine/notifications";

import { useNavigate } from "react-router-dom";

import { useDispatch } from "react-redux";

import { HideLoading, ShowLoading } from "../redux/alertsSlice";

55 | P a g e
function Login() {

const dispatch = useDispatch();

const navigate = useNavigate();

const loginForm = useForm({

initialValues: {

name: "",

email: "",

password: "",

},

});

const onSubmit = async (event) => {

event.preventDefault();

try {

dispatch(ShowLoading());

// Check if email contains '@'

if (!loginForm.values.email.includes('@')) {

showNotification({

title: "Invalid email",

color: "red",

});

dispatch(HideLoading());

return;

const qry = query(

collection(fireDb, "users"),

where("email", "==", loginForm.values.email)

);

const existingUsers = await getDocs(qry);

if (existingUsers.size > 0) {

// decrypt password

const decryptedPassword = cryptojs.AES.decrypt(

existingUsers.docs[0].data().password,

"expenease"

).toString(cryptojs.enc.Utf8);

if (decryptedPassword === loginForm.values.password) {

showNotification({

title: "Login successful",

color: "green",

});

const dataToPutInLocalStorage = {

56 | P a g e
 name: existingUsers.docs[0].data().name,

email: existingUsers.docs[0].data().email,

id: existingUsers.docs[0].id,

};

localStorage.setItem("user", JSON.stringify(dataToPutInLocalStorage));

navigate("/");

} else {

showNotification({

title: "Invalid credentials",

color: "red",

});

} else {

showNotification({

title: "User does not exist",

color: "red",

});

dispatch(HideLoading());

} catch (error) {

dispatch(HideLoading());

showNotification({

title: "Something went wrong",

color: "red",

});

};

return (

<div className="flex h-screen justify-center items-center auth">

<Card

sx={{

width: 400,

padding: "sm",

}}

shadow="lg"

withBorder

>

<Title order={2} mb={5}

color="gray"

>

57 | P a g e
 <img src="\image\Designer.png" alt="" style={{ width: 45, height: 45, marginRight: 15}} />

EXPENEASE-LOGIN

</Title>

<Divider variant="dotted" color="gray" />

<form action="" onSubmit={onSubmit}>

<Stack mt={5}>

<TextInput

label="Email"

placeholder="Enter your email"

name="email"

{...loginForm.getInputProps("email")}

/>

<TextInput

label="Password"

placeholder="Enter your password"

type="password"

name="password"

{...loginForm.getInputProps("password")}

/>

<Button type="submit" color="teal">

Login

</Button>

<Anchor href="/register"

color='teal'

>Don't have an account? Register</Anchor>

</Stack>

</form>

</Card>

</div>

);

export default Login;

HOME PAGE SOURCE CODE:

import React, { useEffect } from "react";

import Header from "../components/Header";

import { Box, Card, Button, Modal, Group, Divider } from "@mantine/core"; import

TransactionForm from "../components/TransactionForm"; import { useDispatch }

from "react-redux";

58 | P a g e
import { fireDb } from "../firebaseConfig";

import { showNotification } from "@mantine/notifications";

import { HideLoading, ShowLoading } from "../redux/alertsSlice";

import { collection, getDocs, orderBy, query, where } from "firebase/firestore"; import

TransactionTable from "../components/TransactionTable"; import Filters from

"../components/Filters";

import moment from "moment";

import Analytics from "../components/Analytics";

function Home() {

const [view, setView] = React.useState("table");

const [filters, setFilters] = React.useState({

type: "",

frequency: "7",

dateRange: [],

});

const user = JSON.parse(localStorage.getItem("user"));

const dispatch = useDispatch();

const [transactions, setTransactions] = React.useState([]);

const [showForm, setShowForm] = React.useState(false);

const [formMode, setFormMode] = React.useState("add");

const [selectedTransaction, setSelectedTransaction] = React.useState({});

const getWhereConditions = () => {

const tempConditions = [];

// type condition

if (filters.type !== "") {

tempConditions.push(where("type", "==", filters.type));

// frequency condition

if (filters.frequency !== "custom-range") {

if (filters.frequency === "7") {

tempConditions.push(

where("date", ">=", moment().subtract(7, "days").format("YYYY-MM-DD"))

);

} else if (filters.frequency === "30") {

tempConditions.push(

where( "date",

">=",

moment().subtract(30, "days").format("YYYY-MM-DD")

59 | P a g e
 )

);

} else if (filters.frequency === "365") {

tempConditions.push(

where( "date",

">=",

moment().subtract(365, "days").format("YYYY-MM-DD")

);

} else {

const fromDate = moment(filters.dateRange[0]).format("YYYY-MM-DD");

const toDate = moment(filters.dateRange[1]).format("YYYY-MM-DD");

tempConditions.push(where("date", ">=", fromDate));

tempConditions.push(where("date", "<=", toDate));

return tempConditions;

};

const getData = async () => {

try {

const whereConditions = getWhereConditions();

dispatch(ShowLoading());

const qry = query(

collection(fireDb, `users/${user.id}/transactions`),

orderBy("date", "desc"),

...whereConditions

);

const response = await getDocs(qry);

const data = response.docs.map((doc) => ({

id: doc.id,

...doc.data(),

}));

setTransactions(data);

dispatch(HideLoading());

} catch (error) {

console.log(error);

showNotification({

title: "Error fetching transactions",

color: "red",

60 | P a g e
 });

dispatch(HideLoading());

};

useEffect(() => {

getData();

}, [filters]);

return (

<Box>

<Header />

<div className="container">

<Card>

<div className="flex justify-between items-end">

<div>

<Filters

filters={filters}

setFilters={setFilters}

getData={getData}

/>

</div>

<Group>

<Button.Group>

<Button

color="blue"

variant={view === "table" ? "filled" : "outline"}

onClick={() => setView("table")}

>

Grid

</Button>

<Button

color="blue"

variant={view === "analytics" ? "filled" : "outline"}

onClick={() => setView("analytics")}

>

Analytics

</Button>

</Button.Group>

<Button

color="green"

onClick={() => {

61 | P a g e
 setShowForm(true);

setFormMode("add");

}}

>

Add Transaction

</Button>

</Group>

</div>

<Divider mt={20}/>

{view === "table" && (

<TransactionTable

transactions={transactions}

setSelectedTransaction={setSelectedTransaction}

setFormMode={setFormMode}

setShowForm={setShowForm}

getData={getData}

/>

)}

{view === "analytics" && <Analytics transactions={transactions} />}

</Card>

</div>

<Modal

size="lg"

title={formMode === "add" ? "Add Transaction" : "Edit Transaction"}

opened={showForm}

onClose={() => setShowForm(false)}

centered

>

<TransactionForm

formMode={formMode}

setFormMode={setFormMode}

setShowForm={setShowForm}

showForm={showForm}

transactionData={selectedTransaction}

getData={getData}

/>

</Modal>

</Box>

);

}export default Home;

62 | P a g e
ANALYTICS SOURCE CODE:
import { Divider, Group } from "@mantine/core";

import React from "react";

import "../stylesheets/analytics.css";

import { RingProgress, Text, Progress } from "@mantine/core";

function Analytics({ transactions }) {

const totalTransactions = transactions.length;

// transactions count

const totalIncomeTransactions = transactions.filter(

(transaction) => transaction.type === "income"

).length;

const totalExpenseTransactions = transactions.filter(

(transaction) => transaction.type === "expense"

).length;

const totalIncomeTransactionsPercentage =

(totalIncomeTransactions / totalTransactions) * 100;

const totalExpenseTransactionsPercentage =

(totalExpenseTransactions / totalTransactions) * 100;

const categories = [

{ label: "Salary", value: "salary" },

{ label: "Freelance", value: "freelance" },

{ label: "Business", value: "Business" },

{ label: "Stocks", value: "Stocks" },

{ label: "Food", value: "food" },

{ label: "Shopping", value: "shopping" },

{ label: "Entertainment", value: "entertainment" },

{ label: "Health", value: "health" },

{ label: "Education", value: "education" },

{ label: "Bonus", value: "Bonus" },

{ label: "Transport", value: "Transport" },

{ label: "Gifts", value: "Gifts" },

{ label: "Others", value: "Others" },

];

// total amount

const totalAmount = transactions.reduce((acc, transaction) => {

return acc + Number(transaction.amount);

}, 0);

63 | P a g e
const totalIncomeAmount = transactions

.filter((transaction) => transaction.type === "income")

.reduce((acc, transaction) => {

return acc + Number(transaction.amount);

}, 0);

const totalExpenseAmount = transactions

.filter((transaction) => transaction.type === "expense")

.reduce((acc, transaction) => {

return acc + Number(transaction.amount);

}, 0);

const totalIncomeAmountPercentage = (totalIncomeAmount / totalAmount) * 100; const

totalExpenseAmountPercentage = (totalExpenseAmount / totalAmount) * 100;

const incomeCategoriesToRemove = ["Food", "Shopping", "Health","Transport","Entertainment","Education"]; const

expenseCategoriesToRemove = ["Salary", "Freelance", "Business","Stocks","Gifts","Bonus"]; const

filteredIncomeCategories = categories.filter(

(category) => !incomeCategoriesToRemove.includes(category.label)

);

const filteredExpenseCategories = categories.filter(

(category) => !expenseCategoriesToRemove.includes(category.label)

);

return (

<div>

<Group mt={20}>

<div className="total-transactions">

<h1 className="card-title">

Total Transactions : {totalTransactions}

</h1>

<Divider my={20} />

<p>Income Transactions : {totalIncomeTransactions}</p>

<p>Expense Transactions : {totalExpenseTransactions}</p>

<Group>

<RingProgress

label={

<Text size="xs" align="center">

Income {totalIncomeTransactionsPercentage.toFixed(2)}%

</Text>

roundCaps

sections={[

64 | P a g e
 value: 100 - totalIncomeTransactionsPercentage,

},

{ value: totalIncomeTransactionsPercentage, color: "teal" },

]}

/>

<RingProgress

label={

<Text size="xs" align="center">

Expense {totalExpenseTransactionsPercentage.toFixed(2)}%

</Text>

roundCaps

sections={[

value: 100 - totalExpenseTransactionsPercentage,

},

{ value: totalExpenseTransactionsPercentage, color: "red" },

]}

/>

</Group>

</div>

<div className="total-turnover">

<h1 className="card-title">Total Turnover : {totalAmount}</h1>

<Divider my={20} />

<p>Income : {totalIncomeAmount}</p>

<p>Expense : {totalExpenseAmount}</p>

<Group>

<RingProgress

label={

<Text size="xs" align="center">

Income {totalIncomeAmountPercentage.toFixed(2)}%

</Text>

roundCaps

sections={[

value: 100 - totalExpenseAmountPercentage,

},

{ value: totalIncomeAmountPercentage, color: "green" },

]}

65 | P a g e
 />

<RingProgress

label={

<Text size="xs" align="center">

Expense {totalExpenseAmountPercentage.toFixed(2)}%

</Text>

roundCaps

sections={[

value: 100 - totalExpenseAmountPercentage,

},

{ value: totalExpenseAmountPercentage, color: "red" },

]}

/>

</Group>

</div>

</Group>

<Group mt={20} grow>

<div className="income-categories">

<h1 className="card-title">Income Categories</h1>

<Divider my={20} />

{filteredIncomeCategories.map((category) => {

const incomeCategoryTransactionsAmount = transactions

.filter(

(transaction) =>

transaction.type === "income" &&

transaction.category === category.value

.reduce((acc, transaction) => {

return acc + Number(transaction.amount);

}, 0);

const incomeCategoryTransactionsPercentage =

(incomeCategoryTransactionsAmount / totalIncomeAmount) * 100;

return (

<div key={category.value}>

<p>{category.label}</p>

<Progress

size={25}

color='teal'

66 | P a g e
 value={incomeCategoryTransactionsPercentage}

label={incomeCategoryTransactionsPercentage.toFixed(2) + "%"}

/>

</div>

);

})}

</div>

<div className="expence-categories">

<h1 className="card-title">Expense Categories</h1>

<Divider my={20} />

{filteredExpenseCategories.map((category) => {

const expenceCategoryTransactionsAmount = transactions

.filter(

(transaction) =>

transaction.type === "expense" &&

transaction.category === category.value

.reduce((acc, transaction) => {

return acc + Number(transaction.amount);

}, 0);

const expenceCategoryTransactionsPercentage =

(expenceCategoryTransactionsAmount / totalExpenseAmount) * 100;

return (

<div key={category.value}>

<p>{category.label}</p>

<Progress

size={25}

color="red"

value={expenceCategoryTransactionsPercentage}

label={expenceCategoryTransactionsPercentage.toFixed(2) + "%"}

/>

</div>

);

})}

</div>

</Group>

</div>

);

export default Analytics;

67 | P a g e
CONCLUSION

68 | P a g e
CONCLUSION:

The package was designed in such a way that future modifications can be done easily. The
following conclusion can be deduced from the development of the project.

Automation of the entire system improves the efficiency

It provides a friendly graphical user interface which proves to be better when
compared to the existing system.
It gives appropriate access to the authorized users depending on their
permissions.
It effectively overcomes the delay in communications.
Updating of information becomes so easier.
System security, data security and reliability are the striking features.
The System has adequate scope for modification in future if it is necessary

69 | P a g e
FUTURE ENHANCEMENT

70 | P a g e
FUTURE ENHANCEMENTS:

User Authentication and Authorization:

Implement user authentication and authorization functionalities to allow users to register,
login, and manage their expenses securely. This would involve features such as user accounts,
password recovery, and user-specific data management.

Expense Categories and Tags:

Enhance the expense tracking capabilities by adding support for categorizing expenses into
different categories or tagging them with relevant labels. This would help users organize and
analyze their expenses more effectively.

Data Visualization and Analytics:

Integrate data visualization tools or libraries to provide users with insightful analytics and
reports about their spending habits. Graphs, charts, and summaries can help users better
understand their financial patterns and make informed decisions.

Budgeting and Goal Setting:

Enable users to set budgets and financial goals within the application. Implement features to
track progress towards these goals and send notifications when approaching or exceeding
budget limits. This can help users maintain financial discipline and achieve their savings
targets.

71 | P a g e
BIBLOGRAPHY

72 | P a g e
 BIBLIOGRAPHY

Windows programming Charles Petzoid

The road to learn react Robin Wieruch

Learning Redux Daniel Bugl

Master Firebase Ashok Kumar S

101 UX Principle Will Grant

73 | P a g e
74 | P a g e