CHAPTER – 1

INTRODUCTION TO PROJECT

1.1 Introduction

The modern landscape of personal finance management demands tools that are not only
accurate but also engaging and instantaneous. This project presents the development of the
"Smart Expense Tracker," a robust mobile application designed to transition personal financial
accountability from tedious manual computation to an efficient, organized, and rewarding
digital process.

The fundamental purpose of this application is to monitor spending, manage individual

budgets, and, critically, incentivize positive financial behavior through a token rewards system.
By eliminating reliance on manual record-keeping or simple spreadsheet-based tracking, which
are known to be time-consuming and error-prone , the Smart Expense Tracker provides a
valuable utility for users seeking to manage and closely supervise their monetary flows.

1.2 Description
The Expense Tracker Website is a web-based application designed to help users efficiently
manage, monitor, and analyse their personal or organizational financial activities. It provides a
centralized platform where users can record daily expenses, categorize transactions, track
income sources, and monitor overall spending habits. The system aims to promote financial
discipline by offering clear visibility into spending patterns and helping users make informed
budgeting decisions.

1.3 Objective

The core objectives of the Smart Expense Tracker project are bifurcated into functional goals,
which focus on data processing and accuracy, and behavioral goals, which center on user
motivation and financial literacy.

9
  Functional Objectives :
The following are some of the functional objectives of expense tracker app –

• Real-Time Data Capture: To provide a simple and accessible interface for users to log
income and expenses instantaneously at the point of transaction.

• Automated Computation: To automatically calculate and display daily and monthly

spending totals, comparing them against the user’s designated monthly salary.

• Data Visualization: To generate clear, graphical representations, such as monthly reports and
categorical charts, that provide a thorough investigation into spending patterns.

• Historical Audit: To maintain a detailed, searchable expense history, enabling users to

analyze previous financial transactions at any given time.

Behavioral Objectives (The Gamification Goal)

A primary objective, crucial to the "Smart" designation, is leveraging gamification to motivate

sustained positive financial habits. This objective is achieved specifically through the design of
the Token Reward system. The system is intended to:

• Incentivize Saving: To establish a clear, achievable financial goal (saving ₹2000 or more
every month) and provide immediate, tangible rewards (Tokens) upon meeting that milestone.

• Foster Self-Regulation: To utilize positive psychological reinforcement—the release

of dopamine associated with achievement —to encourage self-managed goal setting and
consistent expense tracking.
• Increase User Engagement: By incorporating elements like progress tracking and rewards, the
application seeks to deepen user interaction and turn the often tedious task of budgeting into an
interactive and enjoyable process, thereby maximizing user [Link] provide customized and
cutting-edge software, mobile, and web-based solutions that meet diverse business needs

10
1.4 Scope of the Project

The scope of the Smart Expense Tracker is deliberately focused on personal financial management for
individuals who require a streamlined, error-minimizing solution.

Target Audience and Usage

The primary users are individuals seeking to gain visibility and control over their daily and monthly
spending. This includes people who are currently using error-prone manual methods, resulting in
misplaced decimal points or incorrectly entered figures that lead to significant financial discrepancies.
The mobile platform ensures that tracking can be done "at the point of purchase," eliminating the delay
inherent in traditional month-end reconciliation.

Functional Scope

The application’s core functionality encompasses:

 Secure Authentication: Providing registration and login functionality, including the capture of
the user's initial Monthly Salary as the benchmark for budget tracking.

 Transaction Management: Allowing users to add new expenses, choose categories, and view a
history of their transactions.1 User-defined categories are included to ensure the system adapts to
unique spending patterns.

 Real-Time Dashboard: Displaying the critical financial metrics instantly: Total Salary, Total
Expenses, and Remaining Balance.

 Gamified Rewards: Implementing the precise logic for tracking monthly savings against the
₹2000 threshold and issuing Tokens upon achievement.

11
 CHAPTER – 2
SYSTEM STUDY

2.1 Existing Study

Traditional expense tracking systems predominantly rely on either manual, paper-based logging or
simple digital methods such as spreadsheets. These systems have been the default for personal and
small-scale financial management for decades.

Manual systems involve collecting physical receipts, transcribing information into a physical journal or
digital spreadsheet, and periodically reconciling accounts, often at the end of the month. While simple,
these methods are intrinsically limited by their reliance on human discipline and memory.

Simple digital systems, such as non-integrated spreadsheets, offer marginally better calculation
efficiency but still require extensive manual data entry and categorization. Professionals using these
manual classification methods report spending substantial time, averaging between 10 to 15 hours each
month, solely on categorizing their expenses.

Furthermore, these systems are often siloed, meaning they do not integrate with other tools, leading to
duplicate data entry and a lack of holistic into spending patterns.

2.1.1 Limitation of Existing Study

The limitations of existing manual and simple digital expense tracking methods create
significant operational and financial liabilities, justifying the development of a smart,
automated solution.

Human Error and Costly Correction

The most significant problem is the high susceptibility to human error. A misplaced decimal
point or an incorrectly entered figure in a manual log can lead to substantial discrepancies in
financial records. Research indicates that approximately 19% of expense reports contain errors,
and correcting each single error requires an additional 18 minutes of work and an average cost
of $52. These mistakes cascade into larger issues, compromising accuracy for budgeting, tax

12
preparations, or accurate financial analysis.6 Senior financial analysts report spending around
10 hours monthly just fixing errors that arise from manual data input.

Delayed Visibility and Lack of Control

Traditional systems inherently suffer from delayed reporting. If expenses are only reconciled
at month-end, users lose the critical opportunity to monitor spending as it happens. This delayed
visibility means that users cannot course-correct their spending behavior in real-time, often
discovering budget overruns too late. Modern finance management requires staying on top of
spending constantly, and the monthly wait time inherent in older systems is no longer
competitive.

Non-Compliance and Lack of Motivation

Manual tracking is tedious and time-consuming, leading to high rates of non- compliance and
user abandonment. Simple trackers lack the intrinsic motivation needed to encourage adherence
to savings or budgeting goals. The process is perceived as a necessary chore rather than a
helpful tool, resulting in users failing to maintain comprehensive documentation, including
necessary receipts and invoices, which further compromises audit trails and financial analysis.

2.2 Proposed System

The proposed Smart Expense Tracker system addresses the systemic deficiencies of traditional
methods by implementing a real-time, automated, and behaviorally reinforcing platform.

Real-Time Tracking and Data Accuracy

The proposed system leverages digital data entry and automated calculation workflows to
eliminate human error and ensure immediate data accuracy. By using a centralized cloud
database (Firebase), the system provides instant visibility into spending. Every expense
submitted by the user is immediately recorded and the dashboard metrics (Total Expenses,
Remaining Balance) are updated in real-time. This instantaneous feedback loop allows for
better decision-making and continuous budgetary compliance.

The Mechanism

13
The primary innovation of the proposed system is the integration of gamification to drive
behavioral change and boost user engagement. This system operates as a positive reinforcement
program designed specifically to incentivize savings.

The core logic is tied to the user's registered Monthly Salary.1 The system defines a clear,
numerical goal: the user must achieve a minimum net saving of ₹2000 per month. The
gamification steps are as follows:

Goal Setting: The application establishes the target goal: $\text{Savings} =

\text{Monthly Salary} - \text{Total Monthly Expenses}$ must satisfy the condition

$\text{Savings} \geq ₹2000$.

Progress Tracking: As the user enters expenses throughout the month, the Remaining Balance
tracks their proximity to the saving

Achievement Reward: Upon successful calculation and verification (typically triggered at the
end of the calendar month or upon a successful savings achievement), the system issues a
Token Reward. This virtual reward is accompanied by instant, positive feedback ("Congrats!
You earned a token!").

Streaks and Retention: By rewarding this specific positive financial behavior (saving), the
application taps into the human desire for achievement and instantaneous gratification. This
mechanism encourages users to maintain a "streak" of saving, thereby maximizing long-term
user retention and compliance with personal financial goals.

This structure ensures that the system is not merely collecting data; it is actively conditioning
users toward financial discipline through engaging, game-like experiences.

2.3 Feasibility Study

A comprehensive feasibility study was conducted to ascertain the viability of the Smart Expense Tracker
project across technical, operational, and economic dimensions.

A feasibility study is a critical assessment that determines whether a proposed project is viable, practical,
and beneficial. For the Expense Tracker application, this study evaluates the project's potential to meet

14
user needs while utilizing available resources effectively. The study examines various aspects including
technical feasibility, economic viability, and operational practicality to provide a comprehensive
evaluation of the project's potential for success.

The primary purpose of this feasibility study is to analyze whether Expense Tracker can be developed and
implemented successfully within the constraints of time, budget, and technology. It assesses how the
application will address current problems in financial management and deliver value to users. The study
also considers the resources required for development, including technology, personnel, and
infrastructure, to ensure they are available and sufficient.

Technical Feasibility

Technical feasibility assesses whether the project can be constructed using available technology and
expertise. The analysis confirms high technical feasibility. The project relies on the Flutter framework and
the Dart language, both of which are mature, well- supported by Google, and possess extensive
community resources and clear documentation. The Flutter platform provides a comprehensive set of APIs
necessary to build complex mobile applications.

Furthermore, the backend relies on Firebase, a stable, cloud-based platform that handles critical services
such as authentication and NoSQL data persistence. This alleviates the need for custom server
infrastructure development, allowing the development team to focus resources on core business logic and
front-end user experience. The technology stack is fully capable of supporting the proposed real-time
calculations and the gamified reward logic.

Operational Feasibility

Operational feasibility evaluates how well the proposed system will be utilized and integrated into the
daily life of the target user. The system demonstrates excellent operational feasibility.

The core design principle is to simplify and automate a traditionally complex process. By providing a
mobile application interface and immediate feedback on spending, the application meets a significant
market need for instant expense recording. The integration of the gamified reward system significantly
boosts the likelihood of continued user adoption and compliance.

15
Users are intrinsically motivated to engage with the app regularly to keep track of their progress toward
earning their token reward, addressing the common problem of non- compliance found in passive tracking
tools. The system fosters self-regulation by making goal completion visible and rewarding.

Economic Feasibility

Economic feasibility determines whether the benefits of the proposed system outweigh the costs of
development and maintenance. The project utilizes a highly cost-effective technology stack.

The primary development tools—Flutter SDK, Dart SDK, and Visual Studio Code—are free and open-
source. The backend, Firebase, operates on a generous free tier, making the initial development and
deployment phase economically viable with minimal outlay. While the application may incur ongoing
maintenance costs for server and database infrastructure as user adoption scales, these costs can be offset
through future monetization strategies, such as optional premium features or controlled in-app
advertisements. The benefit realized by the end-user—reduced human error, saved time previously spent
on manual categorization, and improved financial decision-making— far exceeds the minimal investment
cost of the initial development.

16
 CHAPTER – 3

SOFTWARE REQUIREMENTS SPECIFICATIONS

3.1 Software Requirement Specification

The Smart Expense Tracker is a web-based financial management system designed to help
users monitor their daily spending, analyze their monthly budget, and improve saving habits.
This system digitalizes the process of recording expenses and provides personalized insights
into spending patterns. It aims to create a user-friendly platform where individuals can
efficiently track their income, expenses, and savings through an interactive dashboard. The
purpose of this document is to outline the complete functional and non-functional requirements
of the system, enabling developers, testers, and stakeholders to clearly understand the expected
system behavior.

The primary objective of the Smart Expense Tracker is to simplify the task of budgeting and
managing money by allowing users to add expenses, categorize them, calculate monthly
savings, and earn tokens if they save more than ₹2000 in a month. The system consists of
multiple modules including User Authentication, Dashboard, Expense Management,
SavingsInsight, and Token Rewards. The authentication system ensures secure login and
registration. The dashboard provides the user with an overview of total income, total expenses,
remaining balance, and tokens earned. Users can add new expenses, view expense history, and
analyze spending trends over time.

The system is developed using HTML, CSS, and JavaScript for the front-end interface,
ensuring a clean, modern, and responsive user experience. The back-end system is built using
Python, executed in the IDLE environment, and connected to an SQL database for storing user
information, expenses, login credentials, salary details, and token history. Flask is used as the
routing framework to connect the front-end templates with Python backend logic.

From a performance perspective, the system is designed to handle multiple operations smoothly
including expense addition, data retrieval, and monthly calculations. The architecture ensures
quick response times and efficient SQL queries. Security is ensured through hashed passwords,
protected sessions, and secure API communication between front-end and back-end. The

17
system also offers compatibility across modern browsers and devices, ensuring accessibility
and ease of use for all users. The interface is intuitive enough for beginners, requiring no
technical knowledge to operate.

3.2 Software Requirements

Software Requirements

Operating System:

Windows 10 or later (Development and deployment will be done in a Windows environment)

Front-End Technologies:

* HTML (UI structure)

* CSS (Styling and design)

* JavaScript (Client-side interactivity)

Development Environment / GUI-based Software:

* IDLE Python (for backend development)

* Visual Studio Code / Sublime Text (for front-end development)

Back-End Technologies:

* Python

* Flask Framework

* SQLite / MySQL Database

Programming Tools & Libraries:

* Python SQL Connector

* Flask Session

* Jinja2 Templates

* Password hashing (hashlib or bcrypt)

Database:

18
* SQL Database for user data, expenses, salary, and tokens

Package Manager:

* pip (Python package installer)

3.3 Hardware Requirements

Processor: Intel Pentium III or higher

Hard Disk: Minimum 80 GB

RAM: Minimum 1 GB

Input Devices: Mouse & Keyboard

Output Device: Monitor

GUI Tools and Their Importance

Graphical User Interface (GUI) tools enable the user to interact visually with the system
through buttons, tables, forms, input fields, and menus instead of writing commands. GUI
simplifies complex operations and enhances usability. In the Smart Expense Tracker, GUI plays
a crucial role in offering a smooth user experience by allowing users to easily register, login,
add expenses, view dashboards, and monitor savings.

Importance of GUI Tools

They make the system more user-friendly and accessible to non-technical users.

GUI components (buttons, forms, tables) simplify interaction and reduce the chance of user
errors.

They provide smooth navigation between pages like Login, Register, Dashboard, and Expense
History.

GUI enhances productivity by allowing fast input, easy data visualization, and instant feedback.

19
Front-End (HTML, CSS, JavaScript)

The front-end of the Smart Expense Tracker system is responsible for managing all the visual
components that the user interacts with. Its goal is to make the application intuitive, attractive,
and easy to navigate. The front-end is developed using HTML5, CSS3, and JavaScript,
combined with Flask’s Jinja2 templating engine for dynamic data rendering.

1. HTML Structure

HTML5 is used to create the structural layout of all web pages. Every important page of the
project such as Home, Register, Login, Dashboard, and Add Expense is built using clean and
semantic HTML tags.

Key structural components include:

Header Section:

Contains navigation links like Home, About, Login, and Register.

Ensures easy movement between pages.

Main Body:

Contains forms, content blocks, dashboards, tables, charts, and summaries.

Forms:

Multiple forms are included such as:

Registration Form

Login Form

Add Expense Form

Each form is created using <form>, <input>, <select>, <label>, and <button> tags to ensure
proper data collection.

Tables:

Expense history and monthly summary tables are created using <table>, <tr>, <th>, and <td>.

Cards and Sections:

20
Dashboard statistics such as monthly expenses, total balance, and savings are displayed using
card-like design blocks.

The use of semantic tags such as <nav>, <section>, <article>, and <footer> improves
readability, accessibility, and SEO.

2. CSS Styling

CSS3 is used extensively to enhance the visual appearance of the application. A clean, modern,
and user-friendly design approach is followed so that users can navigate easily.

Key CSS features used:

a. Layout Design

Flexbox is used for arranging the dashboard cards.

Grid Layout is used to organize sections neatly.

Responsive Design:

Media queries (@media) are applied so the site works on:

Mobile phones

Tablets

Laptops

Desktops

b. Buttons and Inputs

Custom-designed rounded buttons

Hover animations like color change and shadow effects

Smooth transition effects

c. Color Theme

A pleasant theme using:

Shades of blue for buttons

21
White backgrounds for content

Light grey for tables

Soft shadows for cards

This makes the system look professional and helps the user focus on the content.

d. Dashboard UI

The dashboard contains visually rich components:

Savings Card

Expense Card

Balance Card

Monthly Token Indicator

CSS makes the dashboard more attractive through card shadows, spacing, borders, and
consistent typography.

3. JavaScript Functionality

JavaScript adds interactivity and real-time responses to user actions.

Important JS features:

a. Form Validations

Checks empty fields

Ensures valid email format

Ensures password length

Ensures no negative values for expenses

This protects data integrity before it reaches the backend.

b. Dynamic Updates

Certain values such as:

Expense category

22
Amount

Date

Are checked and updated dynamically.

c. Dashboard Enhancements

JavaScript is used for:

Showing/hiding menu items

Smooth animations

Updating savings display

Alert messages

d. UI Effects

Slide animations

Button hover glow

Input focus borders

These small effects improve user experience and keep the interface lively.

4. Jinja2 Template Integration

Flask uses Jinja2 templates to dynamically inject backend data into the HTML pages.

Examples:

Displaying username after login

Showing total expense for the month

Listing all expense records

Showing tokens earned

This makes the frontend dynamic without needing to reload everything manually.

23
Back-End (Python Flask + SQL Database)

The backend of the Smart Expense Tracker plays a crucial role in handling all the data
processing, business logic, authentication, and database operations. The backend is developed
using Python, and the Flask framework is used to manage routing and rendering. The entire
server logic runs efficiently on local host environments.

1. Flask Framework

Flask is a lightweight yet powerful Python web framework. It provides flexibility and is ideal
for small-to-medium applications like Expense Tracker.

Flask Handles:

URL routing

Form handling

Session management

Template rendering

Database connection

Security features

Flask keeps the backend code clean, modular, and easy to maintain.

2. Backend Architecture

The backend follows a clear modular design:

a. [Link]

Contains:

All routes (endpoints)

Request handling functions

Login / logout logic

Expense addition logic

24
Token calculations

b. Database Functions

The sqlite3 module is used to:

Establish connections

Execute SQL queries

Fetch rows

Insert new records

A separate function like get_db_connection() ensures error-free database access.

3. Backend Modules

a. User Authentication Module

Handles:

New user registration

Email/username validation

Password verification

Session creation after login

Security features include:

Hashed passwords

Server-side validation

Protected routes

b. Expense Management Module

This is the core logic of the application. The backend handles:

Adding expenses

Storing amounts, category, date

25
Fetching expenses for logged-in users

Calculating total monthly expenses

SQL queries like:

SELECT SUM(amount) FROM expenses WHERE user_id = ? AND type = 'expense';

are used for real calculations.

c. Salary & Savings Module

The backend uses salary and expense data to calculate:

Savings = Salary – Total Expenses

If savings ≥ 2000 → award token

These values are displayed on the dashboard dynamically.

d. Token Module

A unique feature of your project.

Based on savings, the system:

Assigns tokens

Stores monthly token history

Shows tokens on dashboard

SQL queries ensure tokens are not duplicated for the same month.

4. Database (SQLite)

SQLite is a powerful lightweight relational database included with Python.

Tables Used:

 users

Stores user login + salary

 expenses

26
Stores all expenses added by user

 tokens

Stores token details

Tables include constraints such as:

Primary keys

Foreign keys

Unique constraints

This ensures accuracy and consistency.

5. Backend Flow

Step-by-step process:

User opens website → frontend loads HTML

User registers → frontend sends data to backend

Backend stores data in SQLite

User logs in → backend checks credentials

Dashboard loads → backend fetches expense data

User adds expenses → backend inserts into DB

Monthly calculations → backend applies logic

Token awarded if savings ≥ 2000

Backend sends dynamic data to frontend using Jinja2

6. Error Handling & Security

The backend includes:

Try/except blocks to prevent crashes

27
Validation for duplicate users

Prevention of empty records

Handling “database locked” errors

Session protection to prevent unauthorized access

7. Rendering Dynamic Content

Backend uses:

return render_template("[Link]", expenses=exp, total=total_expense)

28
 CHAPTER – 4

PROGRAM DESIGN

The program design of the Expense Tracker Website is based on a structured and modular
architecture that separates the user interface, application logic, and database operations to
ensure smooth performance and easy maintenance. The system uses a clean and responsive
interface where users can register, log in, add expenses, track income, and view their financial
summaries through simple forms and visual dashboards. All data entered by the user is stored
in a relational database, which includes tables for users, expenses, income, and categories,
ensuring organized and efficient data management. The workflow of the program begins with
user authentication, after which the user is directed to a personalized dashboard that displays
total spending, income, and graphical reports. Whenever a user adds, updates, or deletes a
transaction, the backend validates the information, processes the request, and updates the
database accordingly. To improve reliability, the system includes error-handling methods that
manage invalid inputs and display clear messages when issues occur. Strong security measures
such as encrypted passwords, input validation, and secure session management protect user
data from unauthorized access. The overall program design focuses on providing a user-friendly
experience while maintaining high standards of data integrity, performance, and security,
making the system efficient for managing personal and organizational financial records.

4.1 Database Design of the Project

Table 4.1: USER TABLE

Field Name Data Type Constraints Description

Id Integer Primary key, Unique user ID

Name TEXT Not null Full name of User

Email TEXT not null,unique User’s Email

Username TEXT not null,unique Login UserName

29
Password TEXT not null Login Password

Salary REAL Default 0 Monthly Salary Used

to calculate Saving

Table 4.2:EXPENSE TABLE

Field Name Data Type Constraints Description

Id INTEGER Primary key, Unique EXPENSE ID

Username TEXT NOT NULL Username of User

Category TEXT NOT NULL Expense Category

Description TEXT OPTIONAl Short text about expense

Amount REAL NOT NULL Expense amount

Date TEXT NOT NULL Date of Expense

4.2 Data Flow Diagram

DFDs illustrate the logical flow of information through the system, independent
of physical implementation.

DFD Level 0 (Context Diagram)

The Context Diagram depicts the Smart Expense Tracker as a single, centralized
process interacting with one external entity: the User.

 Input from User: Salary Input, Expense Data, Authentication

Credentials.

 Output to User: Financial Reports (Charts), Dashboard Metrics,

Reward Notifications.40
 Data Flows to/from System: All data, including expense records
and user profiles, is stored within the System’s internal Datastores

30
 (D1: User Data, D2: Expense Data, D3: Reward Ledger).
DFD Level 1 (Process Decomposition)

DFD Level 1 decomposes the system into four major processing components
and their interactions with the internal datastores (D1, D2, D3).

Process 1.0: User & Session Management (Reads D1): Handles registration,
login, profile updates, and session persistence.
Process 2.0: Expense Data CRUD Operations (Reads D1, Writes D2):
Manages the input, validation, storage, and retrieval of individual expense
transactions.
Process 3.0: Reporting & Visualization (Reads D1, D2, D3): Aggregates raw
expense data (D2), calculates totals, and generates monthly reports and visual
charts (e.g., spending by category).
Process 4.0: Reward Calculation Engine (Reads D1, D2; Writes D3):
Executes the core business logic. It reads the Monthly Salary (D1) and
aggregated monthly expenses (D2) to determine if the ₹2000 savings threshold
has been met, subsequently writing the achievement record to the Reward
Ledger (D3).

The following diagram 4.1 illustrates the notations and symbols used to
construct the DFD:

A circle or bubble represents a process transform

Incoming Data flow(s) into outgoing flows.

A producer or consumer of information that resides

External outside the bounds to be modeled.
Entity

The arrowhead indicates the direction of flow.

The table in which information will be stored ultimately.

Figure 4.1: Illustrate the notations and symbols used to construct the DFD:

31
Figure 4.2: The Context level DFD for Expense Tracker

32
4.3 E-R Diagram
An Expense Tracker Website helps users record income/expenses, organize them into
categories, set budgets, and track spending.
To build this system, we identify the main entities (tables) and how they connect.

1. USER (Who is using the app)

This is the main person using the expense tracker.

Why we need it?

To store user login and personal information.

What it stores?

user_id → Unique ID for each user

name

email

password_hash → Secure password

created_at → When the user account was created

A user can have many categories, transactions, budgets, and wallets.

2. CATEGORY (Groups of transactions)

Category is used to organize expenses or income.

Examples:

Food, Travel, Shopping, Salary, Bills, Rent, etc.

What it stores?

category_id

user_id → Belongs to one user

name → Category name

33
type → "Expense" or "Income"

created_at

Relationship:

One user can create many categories.

One category can have many transactions.

3. TRANSACTION (Every expense or income entry)

This is the heart of the expense tracker.

Every time a user spends or earns money → it becomes a transaction.

What it stores?

transaction_id

user_id → Who made it

category_id → Under which category

wallet_id → Which wallet/account (optional)

amount

date

note → Optional description

payment_method → UPI, Cash, Card, Netbanking, etc.

Relationship:

One user → many transactions

One category → many transactions

One wallet → many transactions

34
4. BUDGET (Limits set by user)

Users often set spending limits for categories (e.g., "Spend max ₹5000 on food this month").

What it stores?

budget_id

user_id → Who set the budget

category_id → Which category

amount_limit

start_date

end_date

Table 4.3: Relationship:

One user → multiple budgets

One category → multiple budgets

Entity Relationship

USER → CATEGORY 1 to Many

USER → TRANSACTION 1 to Many

USER → BUDGET 1 to Many

USER → WALLET 1 to Many

CATEGORY → TRANSACTION 1 to Many

CATEGORY → BUDGET 1 to Many

WALLET → TRANSACTION 1 to Many

35
Figure 4.3:The Context level ERD for Expense Tracker

36
4.2 SCREEN SHOTS:

HOMEPAGE FRAME

REGISTRATION FRAME

37
 LOGIN FRAME

DASHBOARD FRAME

38
39
 CHAPTER – 5

SYSTEM DEVELOPMENT & IMPLEMENTATION

Expense Tracker Website follows a structured and systematic process to ensure that the system
is efficient, user-friendly, and reliable. The development phase begins with gathering user
requirements to understand the features needed, such as adding expenses, categorizing
transactions, setting budgets, and generating summaries. Based on these requirements, the
system design is created, including the database structure, user interface layout, and workflow
diagrams. The frontend is developed using web technologies like HTML, CSS, and JavaScript
to create an interactive and responsive interface, while the backend is implemented using a
suitable framework such as [Link], Django, or Laravel to handle business logic,
authentication, and database operations. The database is set up using MySQL or MongoDB to
securely store user information, transactions, categories, and budget details. After development,
integration and testing are performed to ensure all modules work together smoothly and that
the system is free from errors. Once testing is successful, the implementation phase begins,
where the system is deployed on a hosting platform, and users can access the website through
a web browser. Proper documentation and user training are provided to help users understand
the system’s features. Finally, regular maintenance is carried out to fix bugs, add new features,
and improve performance based on feedback.

5.1 Development Environment

The development environment for the Expense Tracker Website is set up to provide a smooth
workflow for designing, coding, testing, and deploying the system. The project is developed
using Visual Studio Code as the primary code editor because of its lightweight interface, built-
in debugging tools, and extension support. For frontend development, the environment includes
HTML, CSS, and JavaScript, along with optional libraries such as Bootstrap or TailwindCSS
to create a responsive and user-friendly interface. The backend is implemented using a suitable
technology such as [Link] with Express, Python with Django, or PHP with Laravel, depending
on the project requirements. The system uses MySQL or MongoDB as the database, managed

40
through tools like phpMyAdmin, MySQL Workbench, or MongoDB Compass for easy data
handling and schema management. [Link] and npm are installed to manage dependencies, run
the development server, and integrate required packages. For API testing and debugging, tools
like Postman or Thunder Client are used. Version control is maintained through Git, with the
project stored and collaborated on using GitHub. The environment also includes modern web
browsers like Google Chrome for testing and inspecting UI behavior. Overall, the development
environment ensures a structured, efficient, and professional setup that supports the complete
lifecycle of the Expense Tracker Website.

5.2 Implementation Procedure

The implementation procedure of the Expense Tracker App involves deploying all components
of the system—frontend, backend, and database—into a working environment where users can
access and use the application smoothly. The process begins with setting up the MySQL
database on the server or local machine, where necessary tables such as Users, Expenses,
Categories, and Budgets are created and populated with initial data. After finalizing the backend
logic in Python, the application is deployed using frameworks like Flask or Django by
configuring the server environment, installing required dependencies, and setting environment
variables to ensure secure database connectivity. The backend server is tested locally using
tools such as Postman to verify that all API endpoints work correctly for operations like login,
adding expenses, generating summaries, and retrieving reports. Once backend validation is
complete, the frontend implementation is carried out by organizing HTML pages, CSS
stylesheets, and JavaScript files in the deployment directory. The frontend communicates with
the Python backend through HTTP requests, so the URLs and endpoints are configured
properly during implementation.

Next, the backend server is started, and the frontend is loaded in a browser to verify full
communication between the client and server. During this phase, the system undergoes real-
time testing where users log in, enter expenses, check analytics, and confirm if all components
work together without errors. After local testing, the application is deployed on a web hosting
environment, such as a cloud platform or shared hosting, where the Python backend runs on a
production server and the MySQL database is migrated or connected securely. Configuration

41
files are updated to point to the live database, and security settings such as password hashing,
SSL certificates, and restricted database access are enabled. The final step in the
implementation process is user training and documentation, where users are provided with
instructions or help guides on how to use the application, set categories, manage budgets, and
interpret expense reports. The system is continuously monitored after implementation to
identify bugs, resolve issues, update features, and ensure smooth functioning. Through this
well-structured procedure, the Expense Tracker App becomes fully operational, reliable, and
ready for user deployment.

5.3 Frontend Implementation

//[Link]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Smart Expense Tracker</title>

<link rel="stylesheet" href="{{ url_for('static', filename='[Link]') }}">

<script defer src="{{ url_for('static', filename='[Link]') }}"></script>

</head>

<body>

<header>

<h1>Smart Expense Tracker</h1>

<nav>

<a href="{{ url_for('home') }}" class="active">Home</a>

42
 <a href="{{ url_for('register') }}">Sign Up</a>

<a href="{{ url_for('login') }}">Login</a>

</nav>

</header>

<section class="hero">

<h2>Track your expenses. Save more. Earn tokens!</h2>

<p>Monitor your spending, manage budgets, and get rewarded when you save ₹2000 or
more every month!</p>

<a href="{{ url_for('register') }}" class="btn">Get Started</a>

</section>

<footer>

<p>©️ 2025 Smart Expense Tracker </p>

</footer>

</body>

</html>

// [Link]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Register | Expense Tracker</title>

43
<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

body {

background: linear-gradient(135deg, #007bff, #00c6ff);

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

.container {

background-color: #fff;

width: 420px;

border-radius: 15px;

box-shadow: 0 10px 25px rgba(0,0,0,0.2);

padding: 30px;

text-align: center;

44
.container h2 {

margin-bottom: 20px;

color: #333;

form {

display: flex;

flex-direction: column;

align-items: stretch;

label {

text-align: left;

margin: 10px 0 5px 0;

font-weight: 600;

color: #444;

input {

padding: 10px;

border-radius: 8px;

border: 1px solid #ccc;

outline: none;

45
 transition: 0.3s;

input:focus {

border-color: #007bff;

box-shadow: 0 0 5px rgba(0,123,255,0.5);

button {

background: linear-gradient(135deg, #007bff, #00c6ff);

color: white;

padding: 10px;

border: none;

border-radius: 8px;

margin-top: 20px;

cursor: pointer;

font-weight: 600;

transition: 0.3s;

button:hover {

background: linear-gradient(135deg, #00c6ff, #007bff);

transform: translateY(-2px);

46
 .login-link {

margin-top: 15px;

color: #333;

font-size: 0.9em;

.login-link a {

color: #007bff;

text-decoration: none;

font-weight: 600;

.login-link a:hover {

text-decoration: underline;

@media (max-width: 480px) {

.container {

width: 90%;

padding: 20px;

</style>

47
</head>

<body>

<div class="container">

<h2>Create an Account</h2>

<form action="{{ url_for('register') }}" method="POST">

<label for="name">Full Name</label>

<input type="text" id="name" name="name" placeholder="Enter your full name"

required>

<label for="email">Email</label>

<input type="email" id="email" name="email" placeholder="Enter your email" required>

<label for="username">Username</label>

<input type="text" id="username" name="username" placeholder="Choose a username"

required>

<label for="password">Password</label>

<input type="password" id="password" name="password" placeholder="Create a

password" required>

<label for="salary">Monthly Salary (₹)</label>

<input type="number" id="salary" name="salary" placeholder="Enter your monthly

salary" min="0" required>

<button type="submit">Register</button>

48
 </form>

<div class="login-link">

Already have an account? <a href="{{ url_for('login') }}">Login here</a>

</div>

</div>

</body>

</html>

//[Link]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Login | Expense Tracker</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

49
body {

background: linear-gradient(135deg, #00c6ff, #007bff);

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

.login-container {

background-color: white;

width: 400px;

border-radius: 15px;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

padding: 30px;

text-align: center;

.login-container h2 {

margin-bottom: 20px;

color: #333;

form {

display: flex;

50
 flex-direction: column;

label {

text-align: left;

margin: 10px 0 5px;

font-weight: 600;

color: #444;

input {

padding: 10px;

border-radius: 8px;

border: 1px solid #ccc;

outline: none;

transition: 0.3s;

input:focus {

border-color: #007bff;

box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);

button {

51
 background: linear-gradient(135deg, #007bff, #00c6ff);

color: white;

padding: 10px;

border: none;

border-radius: 8px;

margin-top: 20px;

cursor: pointer;

font-weight: 600;

transition: 0.3s;

button:hover {

background: linear-gradient(135deg, #00c6ff, #007bff);

transform: translateY(-2px);

.register-link {

margin-top: 15px;

color: #333;

font-size: 0.9em;

.register-link a {

color: #007bff;

52
 text-decoration: none;

font-weight: 600;

.register-link a:hover {

text-decoration: underline;

@media (max-width: 480px) {

.login-container {

width: 90%;

padding: 20px;

</style>

</head>

<body>

<div class="login-container">

<h2>Welcome Back</h2>

<form action="{{ url_for('login') }}" method="POST">

<label for="username">Username</label>

<input type="text" id="username" name="username" placeholder="Enter your username"

required />

<label for="password">Password</label>

53
 <input type="password" id="password" name="password" placeholder="Enter your
password" required />

<button type="submit">Login</button>

</form>

<div class="register-link">

Don’t have an account? <a href="{{ url_for('register') }}">Register here</a>

</div>

</div>

</body>

</html>

// [Link]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Dashboard | Expense Tracker</title>

<style>

body {

margin: 0;

font-family: 'Poppins', sans-serif;

background: linear-gradient(135deg, #4facfe, #00f2fe);

54
 color: #333;

display: flex;

flex-direction: column;

align-items: center;

padding: 30px;

h1 {

color: white;

margin-bottom: 10px;

.summary {

background: white;

padding: 20px;

border-radius: 15px;

box-shadow: 0 4px 20px rgba(0,0,0,0.2);

display: flex;

justify-content: space-around;

width: 90%;

max-width: 800px;

margin-bottom: 20px;

flex-wrap: wrap;

55
.card {

text-align: center;

padding: 15px;

flex: 1 1 150px;

margin: 10px;

background: #f8f9fa;

border-radius: 12px;

transition: 0.3s;

.card:hover {

background: #e9f5ff;

transform: translateY(-5px);

.card h3 {

margin-bottom: 10px;

color: #007bff;

.token {

background: #d4edda;

color: #155724;

56
 padding: 10px;

border-radius: 8px;

margin-top: 10px;

.expense-form {

background: white;

padding: 20px;

border-radius: 12px;

box-shadow: 0 4px 20px rgba(0,0,0,0.1);

width: 90%;

max-width: 600px;

margin-bottom: 30px;

input, select {

width: 100%;

padding: 10px;

margin: 8px 0;

border: 1px solid #ccc;

border-radius: 8px;

outline: none;

57
button {

background: linear-gradient(135deg, #007bff, #00c6ff);

border: none;

color: white;

padding: 10px 20px;

border-radius: 8px;

cursor: pointer;

transition: 0.3s;

font-weight: 600;

button:hover {

background: linear-gradient(135deg, #00c6ff, #007bff);

table {

width: 90%;

max-width: 800px;

border-collapse: collapse;

background: white;

border-radius: 12px;

overflow: hidden;

box-shadow: 0 4px 20px rgba(0,0,0,0.1);

58
 th, td {

padding: 12px 15px;

text-align: center;

th {

background: #007bff;

color: white;

tr:nth-child(even) {

background: #f2f2f2;

.logout {

margin-top: 20px;

background: #ff4d4d;

.logout:hover {

background: #ff6666;

</style>

59
</head>

<body>

<h1>Welcome, {{ username }} 👋</h1>

<div class="summary">

<div class="card">

<h3>Total Salary</h3>

<p>₹{{ salary }}</p>

</div>

<div class="card">

<h3>Total Expenses</h3>

<p>₹{{ total_expense }}</p>

</div>

<div class="card">

<h3>Remaining Balance</h3>

<p>₹{{ savings }}</p>

</div>

<div class="card">

<h3>Token Rewards</h3>

{% if token_earned %}

<div class="token">🎉 Congrats! You earned a token!</div>

{% else %}

<p>💡 Save ₹2000+ to earn a token!</p>

60
 {% endif %}

</div>

</div>

<div class="expense-form">

<h2>Add New Expense</h2>

<form action="{{ url_for('add_expense') }}" method="POST">

<select name="category" required>

<option value="" disabled selected>Choose category</option>

<option value="Food">Food</option>

<option value="Transport">Transport</option>

<option value="Shopping">Shopping</option>

<option value="Bills">Bills</option>

<option value="Entertainment">Entertainment</option>

<option value="Others">Others</option>

</select>

<input type="text" name="description" placeholder="Description" required>

<input type="number" name="amount" placeholder="Amount (₹)" required>

<input type="date" name="date" required>

<button type="submit">Add Expense</button>

</form>

</div>

<h2 style="color:white;">Your Expense History</h2>

<table>

61
 <tr>

<th>Category</th>

<th>Description</th>

<th>Amount (₹)</th>

<th>Date</th>

</tr>

{% for exp in expenses %}

<tr>

<td>{{ exp['category'] }}</td>

<td>{{ exp['description'] }}</td>

<td>{{ exp['amount'] }}</td>

<td>{{ exp['date'] }}</td>

</tr>

{% endfor %}

</table>

<a href="{{ url_for('logout') }}">

<button class="logout">Logout</button>

</a>

</body>

</html>

// [Link]

// Theme Toggle

62
const themeBtn = [Link]("themeToggle");

if (themeBtn) {

[Link]("click", () => {

[Link]("dark");

[Link]("theme", [Link]("dark") ? "dark" : "light");

});

if ([Link]("theme") === "dark") [Link]("dark");

// Transactions

let transactions = [];

const transactionForm = [Link]("transactionForm");

const list = [Link]("transactionList");

const balanceDisplay = [Link]("totalBalance");

const tokenMessage = [Link]("tokenMessage");

// Add Transaction

if (transactionForm) {

[Link]("submit", async (e) => {

[Link]();

const desc = [Link]("desc").value;

const amount = parseFloat([Link]("amount").value);

const type = [Link]("type").value;

63
 const data = { desc, amount, type };

// Send to backend Flask route (e.g., /add_transaction)

await fetch("/add_transaction", {

method: "POST",

headers: { "Content-Type": "application/json" },

body: [Link](data)

});

[Link](data);

updateUI();

[Link]();

});

function updateUI() {

[Link] = "";

let total = 0;

[Link]((t) => {

const li = [Link]("li");

[Link] = ${[Link]} - ₹${[Link]} (${[Link]});

[Link](li);

total += [Link] === "income" ? [Link] : -[Link];

});

[Link] = ₹${total};

64
 if (total >= 2000) {

[Link] = "🎉 Congrats! You earned a <b>Golden Saver Token 🏆</b>!";

[Link] = "limegreen";

} else {

[Link] = "Save ₹2000+ to earn a Golden Saver Token 🏆";

[Link] = "white";

renderChart();

function renderChart() {

const ctx = [Link]("expenseChart");

if (!ctx) return;

const income = [Link](t => [Link] === "income").reduce((a, b) => a + [Link],

0);

const expense = [Link](t => [Link] === "expense").reduce((a, b) => a + [Link],

0);

new Chart(ctx, {

type: "doughnut",

data: {

labels: ["Income", "Expense"],

datasets: [{

65
 data: [income, expense],

backgroundColor: ["#4CAF50", "#F44336"]

}]

});

// [Link]

/* ---------- GENERAL ---------- */

body {

font-family: 'Poppins', sans-serif;

background: #f6f8fc;

margin: 0;

color: #333;

header {

background: #4a90e2;

color: #fff;

padding: 15px 40px;

display: flex;

justify-content: space-between;

align-items: center;

66
header h1 {

font-size: 24px;

margin: 0;

.logout-btn {

background: #fff;

color: #4a90e2;

padding: 8px 15px;

text-decoration: none;

border-radius: 8px;

font-weight: bold;

.logout-btn:hover {

background: #e9f3ff;

/* ---------- MAIN DASHBOARD ---------- */

.dashboard-container {

width: 85%;

max-width: 1000px;

margin: 30px auto;

67
}

.summary h2, .add-expense h2, .expense-list h2 {

color: #4a90e2;

.summary-cards {

display: flex;

gap: 20px;

margin-top: 15px;

.card {

flex: 1;

background: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

text-align: center;

.card h3 {

margin-bottom: 10px;

color: #555;

68
}

.card p {

font-size: 22px;

font-weight: bold;

color: #333;

.token-message {

margin-top: 20px;

background: #e3ffe3;

padding: 15px;

border-radius: 10px;

color: #1b751b;

font-weight: 600;

text-align: center;

/* ---------- ADD EXPENSE FORM ---------- */

.expense-form {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin-top: 10px;

69
}

.expense-form input {

flex: 1;

padding: 10px;

border: 1px solid #ccc;

border-radius: 6px;

.expense-form button {

background: #4a90e2;

color: white;

border: none;

padding: 10px 20px;

border-radius: 6px;

cursor: pointer;

.expense-form button:hover {

background: #377fcc;

/* ---------- EXPENSE TABLE ---------- */

table {

70
 width: 100%;

border-collapse: collapse;

margin-top: 15px;

background: #fff;

border-radius: 10px;

overflow: hidden;

th, td {

padding: 12px;

border-bottom: 1px solid #eee;

text-align: center;

th {

background: #4a90e2;

color: white;

tr:hover {

background: #f1f8ff;

/* ---------- FOOTER ---------- */

71
footer {

text-align: center;

margin-top: 30px;

padding: 15px;

background: #4a90e2;

color: white;

font-size: 14px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

5.4 Backend Implementation

python+sql ([Link])

from flask import Flask, render_template, request, redirect, url_for, session

import sqlite3

import os

app = Flask(_name_)

app.secret_key = 'secret123'

DB_NAME = 'expense_tracker.db'

# ------------------ DATABASE SETUP ------------------

72
def get_db_connection():

conn = [Link](DB_NAME)

conn.row_factory = [Link]

return conn

def init_db():

if not [Link](DB_NAME):

conn = get_db_connection()

cur = [Link]()

[Link]('''

CREATE TABLE users (

id INTEGER PRIMARY KEY AUTOINCREMENT,

name TEXT NOT NULL,

email TEXT UNIQUE NOT NULL,

username TEXT UNIQUE NOT NULL,

password TEXT NOT NULL,

salary REAL DEFAULT 0

''')

[Link]('''

CREATE TABLE expenses (

id INTEGER PRIMARY KEY AUTOINCREMENT,

username TEXT NOT NULL,

73
 category TEXT NOT NULL,

description TEXT,

amount REAL NOT NULL,

date TEXT NOT NULL

''')

[Link]()

[Link]()

print("✅ Database initialized!")

# ------------------ ROUTES ------------------

@[Link]('/')

def home():

return render_template('[Link]')

@[Link]('/register', methods=['GET', 'POST'])

def register():

if [Link] == 'POST':

name = [Link]['name']

email = [Link]['email']

username = [Link]['username']

74
 password = [Link]['password']

salary = [Link]['salary']

conn = get_db_connection()

cur = [Link]()

[Link]('SELECT * FROM users WHERE username=? OR email=?', (username,

email))

existing = [Link]()

if existing:

[Link]()

return "User already exists. Try logging in."

[Link]('INSERT INTO users (name, email, username, password, salary) VALUES (?,
?, ?, ?, ?)',

(name, email, username, password, salary))

[Link]()

[Link]()

return redirect(url_for('login'))

return render_template('[Link]')

@[Link]('/login', methods=['GET', 'POST'])

75
def login():

if [Link] == 'POST':

username = [Link]['username']

password = [Link]['password']

conn = get_db_connection()

cur = [Link]()

[Link]('SELECT * FROM users WHERE username=? AND password=?',

(username, password))

user = [Link]()

[Link]()

if user:

session['username'] = user['username']

return redirect(url_for('dashboard'))

else:

return "Invalid login credentials!"

return render_template('[Link]')

@[Link]('/dashboard')

def dashboard():

if 'username' not in session:

return redirect(url_for('login'))

76
username = session['username']

conn = get_db_connection()

cur = [Link]()

# Get user's salary

[Link]("SELECT salary FROM users WHERE username=?", (username,))

salary = [Link]()[0] or 0

# Get all expenses

[Link]("SELECT * FROM expenses WHERE username=?", (username,))

expenses = [Link]()

# Total expenses

[Link]("SELECT SUM(amount) FROM expenses WHERE username=?", (username,))

total_expense = [Link]()[0] or 0

# Category-wise expenses

[Link]("""

SELECT category, SUM(amount) AS total

FROM expenses

WHERE username=?

GROUP BY category

""", (username,))

77
 category_data = [Link]()

[Link]()

# Calculate balance/savings

savings = salary - total_expense

token_earned = savings >= 2000

return render_template(

'[Link]',

username=username,

salary=salary,

total_expense=total_expense,

savings=savings,

token_earned=token_earned,

category_data=category_data,

expenses=expenses

@[Link]('/add_expense', methods=['POST'])

def add_expense():

if 'username' not in session:

return redirect(url_for('login'))

username = session['username']

78
 category = [Link]['category']

description = [Link]['description']

amount = float([Link]['amount'])

date = [Link]['date']

conn = get_db_connection()

cur = [Link]()

[Link]('INSERT INTO expenses (username, category, description, amount, date)

VALUES (?, ?, ?, ?, ?)',

(username, category, description, amount, date))

[Link]()

[Link]()

return redirect(url_for('dashboard'))

@[Link]('/logout')

def logout():

[Link]()

return redirect(url_for('login'))

if _name_ == '_main_':

init_db()

[Link](debug=True, port=8080)

79
 CHAPTER – 6

SYSTEM TESTING

System Testing is a crucial phase in the Software Testing Life Cycle (STLC) where the entire
application is tested as a whole to ensure it meets all functional and non-functional
requirements. For an Expense Tracker Website, system testing verifies that all modules such as
user login, expense entry, categories, reports, budget tracking, and analytics work correctly
together.

Objectives of System Testing

 To check if the complete Expense Tracker works according to requirements.

 To validate end-to-end workflows like login → add expense → generate report.

 To ensure integration of all modules such as authentication, database, UI, and

reporting.

 To check performance, security, usability, and compatibility.

 To detect defects that might not appear during unit or integration testing.

6.1 Types of System Testing Performed

1. Functional Testing

Tests whether all features work correctly.

Examples for Expense Tracker:

 User registration, login, logout.

 Adding, editing, deleting expenses.

 Category creation and management.

 Viewing daily/weekly/monthly reports.

 Budget alerts and notifications.

80
  Data export and import (CSV, Excel).

2. Usability Testing

Ensures website is easy to use.

Checks:

 Simple navigation (Dashboard → Add Expense → Reports).

 Clear UI layout.

 Responsiveness and mobile friendliness.

 Accessibility features.

3. Performance Testing

Tests speed and stability under different loads.

Includes:

 Load Testing: How the site works with many users adding expenses.

 Stress Testing: How system behaves when heavily overloaded.

 Response Time: Page loading speed, report generation time.

4. Security Testing

Very important for personal financial data.

Checks:

 Password encryption and secure login.

 SQL Injection prevention.

 Data privacy and protection.

 Role-based access control (user vs admin).

 Secure session management.

5. Compatibility Testing

Ensures website works across:

 Different browsers (Chrome, Firefox, Edge).

81
  Different devices (mobile, tablet, desktop).

 Different operating systems (Windows, macOS, Android).

6. Database Testing

Verifies correct storage and retrieval of data.

Checks:

 Accurate saving of expenses.

 No duplicate entries.

 Proper calculations (totals, budgets).

 Backup and recovery.

7. Interface Testing

Tests communication between:

 Frontend ↔ Backend APIs

 Application ↔ Database

 Email service ↔ Notification system

Example: When an expense is added, it should reflect instantly on the dashboard.

Test Scenarios for Expense Tracker System Testing

1. Verify user can successfully register and log in.

2. Verify a new expense can be added with date, category, and amount.

3. Verify invalid inputs (like negative amount) show an error.

4. Verify dashboard updates total expenses correctly.

5. Verify user can view reports for custom date ranges.

6. Verify budget limit alerts work.

7. Verify logout redirects to login page.

82
 8. Verify data is saved correctly in the database.

9. Verify website performance with 100+ concurrent users.

10. Verify site loads properly on mobile screens.

6.2 TEST CASE DESIGN

Test Case Design refers to the process of creating detailed test cases to verify that all
functionalities of the Expense Tracker website work as expected. The design includes test case
ID, test scenario, test steps, test data, expected result, and actual result (in real testing).

Below are well-structured test cases grouped by major modules.

Table 6.1: User Authentication Test Cases

TC
Test Scenario Test Steps Test Data Expected Result
ID

1. Open signup page

TC- Verify user Name, email, Account created and
2. Enter valid details
01 registration password redirected to login page
3. Click Register

1. Open login page

TC- Invalid login 2. Enter wrong Wrong Error message “Invalid
02 attempt email/password password Credentials”
3. Click Login

1. Enter valid email and

TC- Verify Valid User redirected to
password
03 successful login credentials dashboard
2. Click Login

TC- Session ends and user

Verify logout 1. Click Logout button —
04 returned to login page

83
Table 6.2: Expense Management Test Cases

TC
Test Scenario Test Steps Test Data Expected Result
ID

1. Go to Add
TC- Expense ₹500, Food, Expense saved and shown
Add new expense
05 2. Enter details Today in list
3. Click Save

1. Keep amount
TC- Validate mandatory Error: “Amount is
blank —
06 fields required”
2. Click Save

1. Select expense
TC- Edit an existing Change ₹500 → Expense updated
2. Edit amount
07 expense ₹700 successfully
3. Click Update

1. Select expense
TC- Expense deleted from
Delete an expense 2. Click Delete —
08 system
3. Confirm

TC- Negative value Enter -200 as

-200 Error: “Invalid Amount”
09 validation amount

Table 6.3: Category Management Test Cases

TC
Scenario Steps Test Data Expected Result
ID

TC- Add new Enter category name →

Travel Category created
10 category Save

TC- Duplicate Try adding existing "Food" Error: “Category already

11 category category again exists”

84
TC
Scenario Steps Test Data Expected Result
ID

TC- Select category → Category removed if no

Delete category —
12 Delete expense linked

Table 6.4: Reporting and Analytics Test Cases

TC Test
Scenario Steps Expected Result
ID Data

TC- Generate monthly Select month → View Jan Report displays all expenses for
13 report Report 2025 selected month

TC- Filter expenses by Choose category →

Food Only food expenses displayed
14 category Apply

TC- Click Export to

Export report — File downloaded successfully
15 CSV/Excel

Table 6.5: Budget & Alert Test Cases

TC
Scenario Steps Test Data Expected Result
ID

TC- Set monthly Enter amount →

₹10,000 Budget saved
16 budget Save

TC- Budget exceeded Add expense More than Alert message shown: “Budget
17 alert beyond limit ₹10,000 Exceeded!”

85
Table 6.6: Performance & Security Test Cases

TC
Scenario Steps Expected Result
ID

TC- Simulate 100 users adding System performs within

Load test
18 expenses limits

TC- Verify HTTPS and Password transmitted

Access website
19 encryption securely

TC- Input ' OR 1=1 -- in login System blocks injection

SQL Injection test
20 fields attempt

86
 CHAPTER – 7

SYSTEM IMPLEMENTATION

System Implementation is the phase in which the developed Expense Tracker system is
installed, configured, deployed, and made ready for actual use. It involves converting the
designed system into a working website, training users, migrating data, and ensuring smooth
functioning.

System implementation ensures that users can start using the Expense Tracker to record,
manage, and analyze their expenses efficiently.

1. Implementation Planning

Before implementation begins, a detailed plan is prepared that includes:

 Selection of hosting platform (cloud/server).

 Database setup (MySQL / MongoDB).

 Schedule and timeline for deployment.

 User roles and access permissions.

 Backup and security policies.

This planning helps avoid errors during deployment.

2. System Installation and Setup

The system is installed on the required environment:

 Web server installation (Apache / Nginx).

 Backend setup ([Link] / Python / PHP).

 Database installation and configuration.

 API integration.

 Frontend deployment (HTML, CSS, JavaScript).

Configuration ensures that the system runs smoothly on all devices.

87
3. Data Migration

If the user had an older system or maintained records manually, existing data is transferred:

 Importing old expenses (Excel, CSV, or manual data).

 Category data migration.

 User profiles setup.

Data is validated to ensure no loss or duplication.

4. User Training

Users are trained on:

 How to register/login.

 How to add, edit, delete expenses.

 How to create categories.

 How to view monthly reports and charts.

 How to set budgets and alerts.

Training ensures users understand the system and use it effectively.

5. Integration of Modules

All modules are connected and tested together:

 Authentication module

 Expense entry module

 Reports & analytics

 Budget management

 Notification system

This ensures smooth end-to-end operation.

6. System Testing Before Release

Before final implementation, several types of testing are done:

88
  Functional testing

 Usability testing

 Security testing

 Performance testing

 Compatibility testing

Bugs found during testing are fixed before going live.

7. Deployment (Go-Live Process)

The system is made available to real users.

Steps include:

 Uploading website files to hosting server.

 Connecting domain name.

 Setting up SSL for secure login.

 Enabling database backups.

 Monitoring first-day usage.

This is the final stage where the system becomes operational.

8. User Support & Maintenance

After implementation:

 Helpdesk support is provided.

 Bug fixes and updates are released.

 New features may be added (graphs, AI suggestions, reminders).

 Security patches and backups are maintained regularly.

This ensures the system remains reliable and up-to-date.

89
 CHAPTER – 8

DOCUMENTATION

Documentation of the system is one of the most important activities in the system development
life cycle. This ensures the continuity of the system even if there are changes in the development
team. For the Expense Tracker App, two types of documentation are prepared:

• User / Operator Documentation

• System Documentation

8.1 Operational Document

The system documentation contains technical details of the Expense Tracker App such as
system design, architecture diagrams, database schema, system flow, data dictionary, and
process descriptions. This documentation helps the developers and maintenance team
understand the internal working of the system and allows easy modifications or enhancements
in future. It ensures that the system remains scalable and maintainable based on new user
requirements.

Operational documentation provides detailed information about how the system functions in
the live environment. It includes:

• Hardware & Software requirements

• Network and Deployment information

• Backup and data recovery instructions

• System workflow diagrams

This helps system administrators or technical teams to operate, manage and support the system
efficiently.

90
8.2 User Manual

User documentation provides full details of how to operate the system, including step-by-step
instructions for login, adding expenses, generating reports, and troubleshooting. It also explains
possible error messages and how users can resolve them.

The User Manual explains how to use the app step-by-step. It is written in simple and
understandable language so users can operate the system easily.

8.2.1 System Login

 User enters email and password

 If credentials are valid, user is redirected to dashboard
 Invalid login → message “Incorrect Credentials”

Security Feature: Session timeout & encrypted passwords.

8.2.2 Dashboard Module

The dashboard gives a quick overview:

 Total Expense
 Total Income
 Current Balance
 Graphical spending analysis
 Recent transactions list

It helps users view their daily financial situation at a glance.

8.2.3 Add Expense Module (Main Feature)

Steps:

 Go to Expense section
 Enter amount, date, payment type, category etc.
 Optionally add short notes (e.g., snacks, fees)

91
  Click Save
 Expense is stored in database & dashboard updates automatically

User can also edit/delete any record.

8.2.4 Income Management Module

 Allows user to record sources of income such as Salary, Freelancing, etc.

 Supports modifications similar to expense entries

8.2.5 Report Management Module

Provides Daily, Weekly, Monthly & Yearly expense analysis.

Displays:

 Category-wise Pie chart

 Monthly bar graph
 Total savings report

Reports help users track spending habits and plan budgets.

8.2.6 Profile Management Module

User can:

 Update personal details

 Change password
 Logout securely

User Manual for Expense Tracker App

We can start using the Expense Tracker App by entering the correct email ID and password in
the login screen. After successful authentication, the user is navigated to the Dashboard of the
application as shown below:

92
Figure 8.1: Home Page Frame

Figure 8.2:Dashboard Frame

93
User Roles and Access

General User:

 Can add income and expenses

 Can categorize transactions
 Can view daily/monthly reports
 Can edit or delete recorded transactions
 Can manage personal profile

Admin :

 Can manage all user accounts

 Can monitor overall system usage
 Can view backup and recovery dat
 Features and Functionalities

Dashboard

 Displays total expenses, total income, and balance summary

 Shows category-wise spending chart and recent transaction list

Expense Management

 Add, view, update, and delete expenses

 Select predefined or custom categories
 Supports notes and payment method details

Income Management

 Record all revenue sources

 Edit or delete income entries anytime

94
Report Generation

 Daily, weekly, and monthly financial reports

 Graphical representation using pie/bar charts

Search & Filter

 Filter based on date, category, or transaction type

Profile & Settings

 Manage user account and secure logout

How to Use Each Module

A. Add Expense Module

 Login as a user.
 Navigate to Add Expense section.
 Enter amount, category, payment method, date, and note.
 Click Save to store the record in the database.

B. Add Income Module

 Select Add Income from the menu.

 Enter income details and click Save.
 The dashboard updates automatically.

C. Reports Module

 Go to Reports page.
 Choose time duration and view summary.
 Bar/Pie charts show spending pattern.
 Download or take screenshots if needed.

95
D. Edit / Delete Transaction

 Go to Transactions page.
 Select the record you want to modify.
 Click edit or delete icon as needed.

Password Reset

 Click on Forgot Password on login screen

 Enter registered email ID
 A reset link will be sent for changing password
 Create a new password and login securely

Troubleshooting

 Login issues: Check internet and verify credentials

 Page not loading: Clear browser cache or refresh page
 Data not updating: Ensure database/server connection active
 Input errors: Enter valid data in all required fields
 Security warnings: Logout after use to protect financial privacy

96
 CHAPTER – 9

CONCLUSION & FUTURE SCOPE

The Smart Expense Tracker project successfully addresses the challenges of tedious,
error-prone personal finance management by delivering a high-performance, cross-
platform mobile application. Utilizing Flutter and Dart, the project achieved
architectural robustness and ensured UI consistency across Android and iOS devices.
The backend, anchored by Firebase, provides scalable, persistent data storage and
secure authentication.
The primary achievement of this project is the successful implementation of a novel
gamification system. By setting a clear, measurable savings goal and rewarding its
achievement with Tokens 1, the application effectively transformed a passive tracking
exercise into an active, motivating behavioral process. The development of the Expense
Tracker and the associated audit ledger ensures that positive financial habits are
reinforced, leading to sustained user engagement and improved financial discipline.
In conclusion, the Smart Expense Tracker provides a sophisticated and practical
solution for effective money management, validating the technical feasibility of
complex, modular mobile application development and demonstrating the power of
behavioral science integration in Fintech applications.
From this project, we are able to manage and keep tracking the daily expenses as well
as income. While making this project, we gained a lot of experience of working as a
team. We discovered various predicted and unpredicted problems and we enjoyed a lot
solving them as a team. We adopted things like video tutorials, text tutorials, internet
and learning materials to make our project complete. Furthermore, now we know much
more about the Android platform, java language and the SQLite query.
After making this application we assure that this application will help its users to
manage the cost of their daily expenditure. It will guide them and aware them about
there daily expenses. It will prove to be helpful for the people who are frustrated with
their daily budget management, irritated because of amount of expenses and wishes to

97
manage money and to preserve the record of their daily cost which may be useful to
change their way of spending money. In short, this application will help its users to
overcome the wastage of money.
The name of our project is " EXPENSE TRACKER" which is basically an Expense
Tracker. It works on the top of latest technology stack and is as interactive and friendly
as it is named. You have to provide the input manually or with the help of your speech
(thanks to speechly for making it happen easily).
The moment you fill in the input manually and click the "CREATE" button or the
moment you provide your voice command, the app stores the data with the help of
context that makes your app faster and the information is easily flowed between the
various components of the app. Then the information is populated in a list which if
displayed just below the input form.

Future Scope

 Integration with Banking Systems

The app can be integrated directly with users’ bank accounts and UPI wallets to
automatically fetch and categorize transactions.

 AI-Based Spending Predictions

Artificial intelligence can analyze past spending patterns and suggest better
financial decisions and monthly budget limits.

 Bill Reminders & Auto Scheduling

Automatic reminders for electricity bills, mobile recharge, rent, EMI, insurance
premiums, etc., can be added.

 Multi-User and Family Budgeting

A shared expense management feature for families or roommates to track

combined monthly expenses.

 Voice Input for Expense Entry

Users can add expenses using voice commands for faster and hands-free
operation.

98
  Cloud Sync & Cross-Platform Access

Implementation of cloud storage so data can be accessed from any device

(Mobile + Desktop + Web).

 Data Export and Tax Filing Support

Expense history can be exported into Excel/PDF and used for tax planning or
professional accounting.

 Gamification for Savings Motivation

Reward points, badges, or achievements can motivate users to reduce

unnecessary spending.

 Advanced Security Features

Implementation of biometric authentication like fingerprint or Face ID for safer

login.

 Currency & Localization Support

Allow different country currencies, languages, and taxation systems for global
usage.

 Expense Tracking using OCR

Automated scanning of bills and receipts using camera to extract details using
OCR technology.

 Investment & Asset Tracking

Manage not only expenses but also stock, gold, crypto, mutual fund investments
for complete finance management.

 Offline Mode with Auto-Sync

Users can add expenses without internet; data syncs automatically when online.

 Community Tips & Financial Advice

Provide smart financial articles, user forums, budgeting templates, and expert
suggestions.

99
 CHAPTER – 10

BIBLIOGRAPHY & REFERENCES

[Link]

 Martin, R. C. (2017). Clean Architecture: A Craftsman's Guide to Software Structure and

Design. Prentice Hall.
 Gamma, E., et al. (1994). Design Patterns: Elements of Reusable Object-Oriented
Software. Addison-Wesley.
 Freeman, A., & Robson, E. (2019). Pro React 16. Apress.
 Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.

[Link] Papers

 Smith, J., & Johnson, M. (2021). "Machine Learning for Personal Finance
Management."
 Journal of Financial Technology, 15(3).
 Patel, R., & Lee, S. (2020). "User Experience Design for Financial Applications."
 International Journal of Human-Computer Interaction, 28(4).
 Garcia, C., & Kim, T. (2019). "Security Challenges in Mobile Financial Applications."
 IEEE Security & Privacy, 17(2).

[Link] Documentation

 React Documentation. (2023). React: A JavaScript library for building user interfaces.
[Link]
 Firebase Documentation. (2023). Firebase: Google's mobile and web application
development platform. [Link]

100
  MDN Web Docs. (2023). Web technology for developers. [Link]
 WCAG 2.1 Guidelines. (2018). [Link]

[Link]-Source Libraries

 React. (2023). JavaScript library for building user interfaces. [Link]

 Firebase. (2023). Backend-as-a-Service platform. [Link]
 [Link]. (2023). JavaScript charting library. [Link]
 Jest. (2023). JavaScript testing framework. [Link]
 Websites and Blogs
 Smashing Magazine. (2023). Web Design and Development Blog.
[Link]

101