ABSTRACT

In today’s technological society, the major role played in people’s life is played by
earning. Each and every person requires money to live and adapt the standard of living.
The today’s developing generation is growing day by day and in this process of the
betterment of the people’s living quality, the demands of making people's life efficient
and quality of life higher money is the major demand.

Therefore, in context to that particular scenario we as a web developer invested our

technical and logical skills in making a user friendly and using latest technology, we
created a web application called as “The expense management system “web
application.

The expense management system application is a web application that acts as a wallet
to the people and tracks all the transaction and expenses that a person is doing in
his/her daily life.

The project was designed and developed using the MERN stack (MongoDB,
ExpressJS, ReactJS, NodeJS). The front-end and the back-end were being coded
simultaneously to ensure the proper connection between the integral parts of the entire
website. The testing process was also being done constantly to prevent any error and
bug that can affect the rest of the development process. The result is a fully functional
application with an easy-to-navigate user interface to input and track all the
transactions, accompanied by a bar chart to give a more visualized perspective on the
monthly expense.

This project is based on the objective to save money and work smartly for the future
requirements where the user with disability can also operate this application and save
money. This innovation will surely lead to equality in life of people.
 Table Of Content

Chapter 1 : Introduction…………………………………………..3-5

1.1 Introduction………………………………………………………………..4

1.2 Scope Of This Project……………………………………………………4

1.3 Objective…………………………………………………………………..5

1.4 Features……………………………………………………………………5

Chapter 2 : Literature Review……………………………………6-7

2.1 Introduction………………………………………………………………...7

2.2 User Registration & Creation…………………………………………….7

2.3 Adding Income & Expense……………………………………………….7

Chapter 3 : Problem Formulation……………………………….8-9

3.1 Problem Formulation……………………………………………………...9

3.2 Tools Uses…………………………………………………………………..9

Chapter 4 : METHODOLOGY……………………………………..10-16

4.1 Proposed Work & Specification…………………………………………….11

4.2 Visual studio………………………………………………………………….12

4.3 ReactJS……………………………………………………………………….13

4.4 NodeJS………………………………………………………………………..14

4.5 ExpressJS…………………………………………………………………….14

1
 4.6 MongoDB………………………………………………………………………15

4.7 HTML…………………………………………………………………………...16

4.8 CSS……………………………………………………………………………..16

Chapter 5 : APPROACH AND IMPLEMENTATION ……………17-27

5.1 Application Workflow…………………………………………………………..18

5.2 MongoDB’s Data Modeling……………………………………………………19

5.3. Server’s Controllers, Routing, and APIs……………………………………..19

5.4 Connecting to the Database…………………………………………………...20

5.5 Use case Diagram………………………………………………………………21

5.6 ER Diagram……………………………………………………………………...22

5.9 Activity Diagram…………………………………………………………………23

Chapter 6 : OUTCOME OF THE PROJECT ………………………….24-26

Chapter 7 : CONCLUSIONS AND FUTURE PROJECTIONS ………….27-28

REFERENCE………………………………………………………………………………….29

2
 Chapter 1
Introduction

3
1.1 Introduction

In this project we propose a web application known as “ Expense Management System”

which is helpful to manage out income and expense as a daily or periodically or else
whenever we want to remind. It also acts as an indicator or reminder example in the
fastest world which we aren't able to remember what are the things we have to do for
the end of month and what are the payments we have to pay for the particular month.

Due to some conflict or some other stress we forget some times that what are the
income or where the money has to come from or what the payments we have to pay.
This application will help you to make a note for what or the things we have to do for the
end of month. For example, like how much it expenses for monthly and what are the
expenses for a month.

Some of the expense features like food expenses billing expenses like phone,
electricity, taxation and some other personal expenses. In this fast-moving world this
web application will be very useful for a people who was a family and especially for a
business people.

Budgeting is an integral part of the society. Budget Tracking involves recording and
analyzing the incomes and expenses of a person or an organization over a particular
period of time. Today, since we are living in a hurry up and get it done society, many
people are looking forward to efficient ways to budget their time and money.

1.2 Scope Of This Project

This application can take a good market as it is usable by anyone who are willing to
manage their expenses and aiming to save for the future investments and many
more.There is not any range criteria or any kind of profession or gender are focused, it
will used hugely.

4
1.3 Objective

Objective of this project :

1. Simplify expense tracking for individuals and organizations.

2. Provide detailed insights into spending patterns to enable better financial

management.

3. Offer a platform for users to create, update, and delete expenses and categories.

4. Generate comprehensive reports based on user-defined time periods and categories.

1.4 Features

1. Product and Component based

2. Reporting & Charting in more comprehensive way
3. User Accounts to control the access and maintain security
4. Simple Status & Resolutions
5. Multi-level Priorities & Severities.
6. Robust database back-end
7. Various level of reports available with a lot of filter criteria's
8. Accuracy in work.
9. Easy & fast retrieval of information.

5
 Chapter 2
Literature Review

6
2.1 Introduction

A writing audit is a study of insightful sources on a particular research. We found

various similar products that have already been developed in the market. Unlike all
those products,Expense management system provides security and graphical results.
We provide the users to enter their wish-list before any purchase. It generates
notifications to notify users about their timely entry. In order to complete our task, we
used the web based platform to build a portable. We used Visual studio to build our
application. The major language we used for scripting was MERN Stack for producing
better layout. We used MongoDB to implement the database.

2.2 User Registration & Creation

This application like the vast majority of the applications will have a user login screen
and alternatives for enlistment. The user should enlist in this application when the
person in question is using it for the first time. Nonetheless, the client who is now
enlisted can login to the application utilizing their login accreditations that are made by
the user at the enrolment.

2.3 Adding Income & Expense

This application will provide to choose the categories or type of income or expenses.
Every user of the application has the option to add incomes and expenses accordingly.
Each record should have details of the date of occurrence of item, details of items etc.

7
 Chapter 3
Problem Formulations

8
3.1 Problem Formulation

Many users in their daily life try to save money in order to save money and use that for
further use.Therefore in order to simplify their work and help them to save money and
track their expense this application is the best practice to work with. With the rapid
development of cost and expense, we thought that we will try to savemoney so if user is
not able to track the expense or find difficulty in having the record then user can use the
application for their personal use and save as much they want because this will help
one to have daily expense record. Money wastage irritates every person while doing
purchase. So, in our expense tracking app there will be no case of wastage of money.
We will also try that our users are benefited with the application advantages.

3.2 Tools Uses

1. Visual Studio

2. MonogoDB

3. Express.js

4. React.js

5. Nodejs

6. HTML

7. CSS

9
 Chapter 4
METHODOLOGY

10
4.1 Proposed Work & Specification

The proposed expense management system is a web-based application that will allow
users to track and manage their daily expenses. The system will be built using the
MERN stack (MongoDB, ExpressJS, ReactJS, and Node.js).

The system will have the following features:

● User authentication and authorization

● Expense and category management
● Expense tracking by date, category, and description
● Support for attaching receipts or other relevant documents to expense entries
● Reporting and analytics
● Specification Methodology

The following specification methodology will be used to develop the expense

management system:

1. Requirements gathering and analysis: This phase will involve working with the
stakeholders to understand their requirements for the system. The requirements
will be gathered through interviews, workshops, and surveys. Once the
requirements have been gathered, they will be analyzed to identify and prioritize
the most important features.

2. System design: This phase will involve designing the overall architecture of the
system. The design will include the following components:

1. Database schema
2. API design
3. User interface design

3. Implementation: This phase will involve developing the system based on the
design. The system will be developed using the MERN stack.

4. Testing: This phase will involve testing the system to ensure that it meets the
requirements and is free of defects. Unit testing, integration testing, and system
testing will be performed.

5. Deployment: Once the system has been tested and verified, it will be deployed to the
production environment.

11
4.2 Visual studio

Visual Studio is a powerful integrated development environment (IDE) from Microsoft

that can be used to develop a wide variety of applications, including web applications,
desktop applications, mobile applications, and games. It includes a comprehensive set
of features for code editing, debugging, testing, and deployment.

Some of the key features of Visual Studio include:

● Code editing: Visual Studio includes a powerful code editor with features such as
syntax highlighting, code completion, and code refactoring.
● Debugging: Visual Studio includes a powerful debugger that allows you to step
through your code line by line and inspect the values of variables.
● Testing: Visual Studio includes a variety of tools for testing your code, including
unit testing, integration testing, and system testing.
● Deployment: Visual Studio includes tools for deploying your applications to a
variety of platforms, including on-premises servers, cloud servers, and mobile
devices.
Visual Studio also includes a number of additional features that can be helpful for
developers, such as:
● Version control integration: Visual Studio can be integrated with version control
systems such as Git and TFS, which makes it easy to collaborate with other
developers and track changes to your code.
● Extensions: Visual Studio supports a wide range of extensions that can be used
to add new features and functionality to the IDE.
● Community support: Visual Studio has a large and active community of
developers who are always willing to help and answer questions.
Overall, Visual Studio is a powerful and versatile IDE that can be used to develop a
wide variety of applications. It is a popular choice for developers of all skill levels, from
beginners to experts.

Visual Studio and the MERN stack

The MERN stack is a popular web development stack that consists of the following
technologies:
● MongoDB: A NoSQL database
● Express.js: A Node.js framework for building web applications
● React: A JavaScript library for building user interfaces
● Node.js: A JavaScript runtime environment
Visual Studio can be used to develop MERN stack applications by using the following
extensions:

12
 ● MongoDB extension: This extension provides support for MongoDB development
within Visual Studio.
● Node.js extension: This extension provides support for Node.js development
within Visual Studio.
● React extension: This extension provides support for React development within
Visual Studio.
By using these extensions, developers can use Visual Studio to develop MERN stack
applications with all of the features and functionality that they expect from a modern
IDE.
There are a number of benefits to using Visual Studio to develop MERN stack
applications, including:
● Improved productivity: Visual Studio provides a number of features that can help
developers to be more productive, such as code completion, code refactoring,
and debugging.
● Reduced errors: Visual Studio's code editor and debugger can help developers to
find and fix errors in their code more easily.
● Improved collaboration: Visual Studio can be integrated with version control
systems, which makes it easy for developers to collaborate on projects.
● Reduced costs: Visual Studio is a free and open source IDE, which means that
there are no licensing costs associated with using it.

4.3 React.JS

React.js, or simply React, is a JavaScript library for building user interfaces. It is

declarative, efficient, and flexible. React lets compose complex UIs from small and
isolated pieces of code called "components".

ReactJS, simply known as React, is one of the most popular JavaScript libraries in the
world. Introduced by Facebook (now known as Meta) in 2013, it has been widely used
by web developers all over the world. It is an open-source project as a public repository
on GitHub and is constantly maintained and updated by a community of developers.

React utilized the concept of component-based design, which means that the user
interface is divided into discrete, reusable modules known as components. Every
component has a unique state that controls how it renders and functions. Moreover,
each component can be passed in data, or "props," from its parent component.Virtual
Document ObjectModel (DOM) is one of the biggest advantages of React. The
hierarchical structure of HTML components that make up a web page, known as the
"real DOM," is replaced by the "virtual DOM," which is a simplified version of the real

13
DOM. Rendering is accelerated and made more effective using React, which tracks UI
changes using the virtual DOM and updates just the relevant portions of the real DOM.

4.4 NodeJS

Node.js is a JavaScript runtime environment that executes JavaScript code outside of a

browser. It is built on Chrome's V8 JavaScript engine and uses an event-driven,
non-blocking I/O model that makes it lightweight and efficient. Node.js is often used for
developing server-side and networking applications, but it can also be used for
developing desktop applications and mobile applications.

Web servers, web apps, command-line tools, and other types of network applications
can be created with NodeJS. Building scalable and real-time applications is suitable to
NodeJS thanks to its event-driven, non-blocking input/output style. NodeJS comes with
Node Package Manager (npm), which grants users access to a massive ecosystem of
modules and packages.

Node.js is a popular and powerful JavaScript runtime environment that can be used to
develop a wide variety of applications. It is a good choice for developing server-side and
networking applications, but it can also be used for developing desktop applications and
mobile applications.

4.5 Express.JS

Express.js is a Node.js web framework that provides a robust set of features for building
web applications and APIs. It is flexible, fast, and easy to use, making it a popular
choice for developers of all skill levels.

ExpressJS is a NodeJS web application framework which is lightweight, versatile, and

offers a set of robust features for both web and mobile apps. By offering a thin layer of
basic web application functionalities, such as routing, middleware, and HTTP handling,
it is intended to make it easier than using vanilla NodeJS, to manage and arrange
routes in complicated web applications. ExpressJS is especially well-suited for the
MERN stack because it provides developers the ability to quickly build RESTful APIs
and handle HTTP requests from the client, such as the GET, POST, PATCH, DELETE
method, which are the key features in web applications development.

14
4.6 MongoDB

MongoDB is a NoSQL database that uses a document-oriented data model. It is known

for its scalability, flexibility, and performance. MongoDB is a popular choice for
developing web applications, mobile applications, and real-time data processing
applications.

MongoDB -

○ Mongo DB is the most popular NoSQL (NoSQL or Non Structured Query

Language) database, an open-source document-oriented database.
○ The term 'NoSQL' typically means a non-relational database that does not
require a fixed schema or proper relational tables to store the necessary data in
it. MongoDB stores the data in a different format other than the relational tables,
consisting of rows and columns.
○ It implies that MongoDB is not based on the table-like relational database
structure. On the other hand, it provides an altogether different mechanism for
the retrieval and storage of data.
○ The storage format in which the data is stored is known as BSON, which stands
for Binary JavaScript Object Notation; its binary structure encodes length and
type of information, which allows it to be parsed much more quickly.
○ MongoDB uses BSON when storing documents in collections.
○ It allows a highly scalable and flexible document structure.
○ It is very faster as compared to RDBMS due to its efficient storage and indexing
techniques.
○ In MongoDB, complex join operations are not available; hence, it cannot support
complex transactions.
○ MongoDB uses JavaScript for coding as a language which is one of the great
advantages.
○ It is Schemaless as any data stored which is stored in a separate document.
○ In MongoDB, there is no concept of relationships or table formations, as this is
happening in RDBMS (Relational Database Management System), in which
tables have a certain relation between them.
○ It also supports a flexible document model, which is very fast for any developer to
create.
○ MongoDB is one of the important types of NoSQL Databases. It is more scalable
and provides excellent performance if we notice that it will reach its scaling limit
whenever a database runs on a single server.

15
 ○ MongoDB is a NoSQL database that scales by adding more and more servers
and increases productivity with its flexible document model.

4.7 HTML
HTML is used in the MERN stack to create the frontend of a web application. The
frontend is the part of the application that users interact with directly. It is responsible for
displaying the application's user interface and handling user input.

To use HTML in the MERN stack, you can use a React component library, such as
Material UI or Ant Design. These libraries provide pre-built HTML components that you
can use to build your application's user interface.

4.8 CSS

CSS, or Cascading Style Sheets, is a language used to style HTML elements. It allows
you to control the appearance of your web pages, such as the font, color, and layout of
text and images.

To use CSS in the MERN stack, you can use a CSS framework, such as Bootstrap or
Tailwind CSS. These frameworks provide pre-built CSS classes that you can use to
style your application's user interface.

16
 Chapter 5
APPROACH AND IMPLEMENTATION

17
5.1 Application Workflow

The following is a application workflow approach of an expense management system

using the MERN stack:
Frontend:
1. The user logs in to the application using their username and password.
2. The frontend application makes a request to the backend API to fetch the user's
list of expenses.
3. The backend API responds with the user's expense data in JSON format.
4. The frontend application parses the JSON data and displays it to the user in a
user-friendly format.
5. The user can add, edit, or delete expenses from the frontend application.
6. When the user saves an expense, the frontend application makes a request to
the backend API to update the user's expense data.
7. The backend API validates the expense data and updates the database
accordingly.
8. The backend API responds with a success or failure message to the frontend
application.
9. The frontend application displays the success or failure message to the user.
Backend:
1. The backend API receives a request from the frontend application to fetch the
user's list of expenses.
2. The backend API queries the database for the user's expense data.
3. The backend API converts the expense data to JSON format and sends it back
to the frontend application.
4. When the backend API receives a request from the frontend application to
create, update, or delete an expense, the backend API validates the expense
data and updates the database accordingly.
5. The backend API sends a success or failure message back to the frontend
application.

18
5.2 MongoDB’s Data Modeling
A “Transaction” schema was created using Mongoose to define the transaction object
with its own properties and export it as a data model in the database. The schema
defines the following fields:
● “amount”: a number representing the transaction amount.
● “description”: a string describing the transaction.
● “user_id”: an “ObjectId” generated by “mongoose” to reference the user who
made the transaction.
● “category_id”: an “ObjectId”generated by “mongoose” to reference the
transaction category.
● “date”: a Date object stating the date of the transaction was made.
● createdAt: a Date object stating the date the transaction was added to the
database, which is the current date.
5.3. Server’s Controllers, Routing, and APIs

The “AuthController.js” file, which handles the authentication process for users, has two
main functions: “login” and “register”. Both are exported as parts of the modules of the
server. The register function is an asynchronous function that has two arguments, ”req”,

19
which is the request sent from the client; and “res”, which is what the server will
response back. We will see this pattern applied to all the controller functions in this
project. The “register” function checks if a user with the given email already exists in the
database by calling the “findOne” method on the import “User” data model. If the user
exists, it returns a response with an HTTP status code of 406 and a JSON object with
the message "User already existed". If the user does not exist, the function hashes the
provided password using the “bcrypt” library's “genSaltSync” and “hashSync” methods.
Then it creates a new User object and sets its properties with the provided “email”,
“password”, “firstName”, “lastName”, and “categories”. Next, it saves the user data in
the database by applying the “save” method on “User”.

5.4 Connecting to the Database

Ultimately, the ”mongdodb.js” file establishes connection to the MongoDB database.

Each value, ”username”, ”password”, and ”url” is extracted from our ”.env” file and
inserted into the URL linked to the database. Mongoose uses the method ”connect” to
access the URL, then informs the status of the connection.

20
5.5 Use case Diagram

A use case diagram in an expense management system using the MERN stack can be
used to model the different ways that users can interact with the system to manage their
expenses. Some of the most common use cases include:
● Add expense: This use case allows users to add new expenses to the system.
● Edit expense: This use case allows users to edit existing expenses in the system.
● Delete expense: This use case allows users to delete expenses from the system.
● View expenses: This use case allows users to view their expenses in the system.
● Generate expense report: This use case allows users to generate reports of their
expenses, such as by category, date range, or amount.

21
5.6 ER Diagram

Fig: ER Diagram

The above diagram explains the relationship between the databases where rectangle
represents entity, oval represents attributes and diamond represents relation. There are
four entities with their respective attributes.

22
5.9 Activity Diagram

The above diagram shows the major input that this system 'Daily Expense ' in which the
input includes username, password, amount, category, date, notes while the
transformation processing includes login authentication, expense tracking, database
update and retrival where as output includes expense and budgeting and piecharts. The
feedback includes performance satisfaction and recommendation.

23
 Chapter 6
OUTCOME OF THE PROJECT

24
OUTCOME OF THE PROJECT

Registration Page

Login Page

25
Fig : User Interface Design

Fig : New Transection

26
 Chapter 7
CONCLUSIONS AND FUTURE PROJECTIONS

27
Conclusion

Tracking your expenses daily can save your amount, but it can also help you set
financial goals for the future. If you know exactly where your amount is going every
month, you can easily see where some cutbacks and compromises can be made. The
project what we have developed is work more efficient than the other income and
expense tracker. The project successfully avoids the manual calculation for avoiding
calculating the income and expense per month. The modules are developed with
efficient and also in an attractive manner.

Future Scope

The future scope of expense management systems using the MERN stack is very
promising.
● Integration with other systems: Expense management systems can be integrated
with other systems, such as accounting systems and project management
systems, to automate and streamline workflows.
● Machine learning: Machine learning can be used to improve the accuracy and
efficiency of expense management systems. For example, machine learning can
be used to automatically categorize expenses, identify fraud, and predict future
spending patterns.
● Mobile support: Expense management systems should be mobile-friendly so that
users can access and manage their expenses on the go.
● Security: Expense management systems should implement robust security
measures to protect users' financial data.

28
REFERENCE
1. https://www.theseus.fi/bitstream/handle/10024/802483/Final_Thesis_PhatTran.pdf?sequ
ence=2
2. https://ijarsct.co.in/Paper391.pdf
3. https://www.jetir.org/papers/JETIR2106172.pdf
4. https://www.studocu.com/in/document/dr-apj-abdul-kalam-technical-university/btech/mini
-project-report/29935835
5. https://www.slideshare.net/RashnaMaharjan2/daily-expense-tracker-153160282
6. https://www.freeprojectz.com/project-report/7447
7. Online Income and Expense Tracker S. Chandini1, T. Poojitha2, D. Ranjith3, V.J.
Mohammed Akram4, M.S. Vani5, V. Rajyalakshmi 6 1,2,3,4UG Student, Department of
Computer Science &Engineering, Mother Theresa Institute of Engineering & Technology,
Palamaner, Andhra Pradesh, India. 5,6 Assistant Professor of Computer Science &
Engineering, Mother Theresa Institute of Engineering & Technology, Palamaner, Andhra
Pradesh, India.
8. https://bard.google.com/

9. https://www.studocu.com/in/document/deen-dayal-upadhyay-gorakhpur-university/accou
nting-and-financial-management/ijirt-150860-paper/68059130
10. https://ijirt.org/master/publishedpaper/IJIRT151474_PAPER.pdf

29