UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

SOFTWARE ENGINEERING

Personal Finance Tracker

Project Group Members

Registration
Sr.# Name CGPA Email ID Signature
ID- Sec

[email protected]
(i) F2023065017 Ahmad Ameen 3.46

(ii) F2023065016 Afia Nasir 3.18 [email protected]

(iii)

1 of 13​ ​ 12 November 2024

 Department of Software Engineering
University of Management and Technology, Lahore
12 November 2024

PERSONAL FINANCE TRACKER

1.​ Project Abstract

The Personal Finance Tracker website will help users manage their personal
finances by tracking income, expenses, and budgets. This simple, user-friendly
website will allow users to add transactions, view monthly spending trends, and
manage their budgets effectively. The goal is to create an intuitive platform for
individuals who want to gain better control of their finances without complex
features.

2.​ Introduction
The Personal Finance Tracker website is a responsive web-based application
where users can log in and record their daily financial transactions. Users can
categorize expenses, set a budget limit, and view their spending in real-time. This
project aims to help users improve their financial literacy and achieve their savings
goals.

Key features include:

1.Adding daily expenses and income entries.

2.Tracking monthly and yearly spending.

3.Generating reports that visualize spending patterns.

4.Setting budget goals with alerts for overspending.

3.​ Motivation and Scope

The motivation behind this project is to assist individuals in achieving better
financial stability through simple, everyday tracking of expenses and budgeting.
Personal finance is a critical life skill often overlooked, and this project seeks to
provide a straightforward tool to address this gap.

2 of 13​ ​ 12 November 2024

Scope: The project’s scope is to cover basic functionalities, keeping the design
minimal yet effective. The system will cater to beginners in finance management.

Assumptions:

●​ Users have basic computer knowledge.

●​ The data will be secure and accessible only to registered users.
●​ The application will be designed for mobile and desktop web browsers.

4.​ Related Work

Several applications, such as Mint, You Need a Budget (YNAB), and PocketGuard,
provide personal finance tracking features. However, these systems can be complex for
beginners or are often subscription-based. Our project differentiates itself by offering a
simplified, free-to-use solution with just the essential features needed to start managing
finances.

5.​ System Architecture

Basic System Architecture: The system will have three main components: the User
Interface (UI), the Database, and the Server Logic.

Flowchart of System Architecture:

1.​ User logs in/registers: The user interface captures login details or allows new
users to create accounts.
2.​ Add/Manage Transactions: Once logged in, users can add or manage income
and expense transactions.
3.​ Data Storage: All user transactions are saved in the database, which is
accessed via the server.
4.​ Generate Reports: The server retrieves data to generate and display reports
on spending.
5.​ User Log Out: The user can securely log out, closing their session.

[User Interface] --> [Server Logic] --> [Database]

6.​ Goals and Objectives

The main objectives of this project are:

3 of 13​ ​ 12 November 2024

 1.​ To create a user-friendly website where individuals can track their expenses
and income.
2.​ To generate monthly and yearly financial reports.
3.​ To provide basic budget alerts to help users stay within set financial limits.

7.​ Individual Tasks

The tasks for developing Personal Finance Tracker are divided as follows:

Frontend Development: Responsible for front-end design, creating a

user-friendly interface.

Backend Development: Create the server logic and set up data management.

Database Management: Manages the database schema, handling user data

storage, and retrieval.

Testing and Deployment: Ensure functionality and security before launch.

8.​ Future Work

Potential future extensions include:

●​ Adding machine learning for personalized financial advice.

●​ Integrating with bank APIs for real-time transaction updates.
●​ Creating mobile app versions for Android and iOS.

9.​ Tools and Technologies

Front-End: HTML, CSS, JavaScript (with Bootstrap for responsiveness)

Back-End: Node.js, Express.js

Database: MongoDB for data storage

Version Control: Git for collaboration

Hosting: Heroku or Netlify for online deployment

10. Requirements

4 of 13​ ​ 12 November 2024

 1. Business Requirements

1.​ Simplified Expense Management: Provide a user-friendly interface for

recording and managing financial transactions.
2.​ Expense Categorization: Enable users to categorize their income and
expenses.
3.​ Budget Setting: Allow users to set monthly and yearly budget limits.
4.​ Spending Alerts: Notify users when they exceed their budget limits.
5.​ Spending Reports: Generate visualized monthly and yearly financial reports
for better insights.
6.​ Accessibility: Ensure the platform is accessible on both desktop and mobile
web browsers.
7.​ Data Security: Protect user data and ensure secure storage and retrieval.
8.​ Beginner-Friendly: Keep the design minimal to cater to users new to personal
finance management.
9.​ Free Usage: Provide a no-cost solution without hidden charges or
subscriptions.
10.​Future Scalability: Allow for integration with machine learning tools and
bank APIs in the future.

2. User Requirements

1.​ Account Management: Users should be able to register and log in securely.
2.​ Transaction Tracking: Users should add, edit, and delete income and expense
entries.
3.​ Budget Monitoring: Users should receive notifications when nearing or
exceeding budget limits.
4.​ Visual Reports: Users should view spending trends via charts or graphs.
5.​ Responsive Design: The interface should adjust seamlessly to various device
sizes (desktop, tablet, mobile).

3. Functional Requirements

1.​ The system must allow users to register and log in using unique credentials.
2.​ Users should be able to categorize transactions by predefined or custom
labels.
3.​ The system must store and retrieve user financial data from the database.
4.​ Spending reports must include graphical representations such as pie charts
and bar graphs.
5.​ Notifications must be sent in real time when users approach their budget
limit.

6.​ Allow users to customize categories for income and expenses based on their
needs.

7.​ Enable users to export financial data as PDF or Excel files for offline use.

5 of 13​ ​ 12 November 2024

 8.​ Provide language options to make the application accessible to a diverse
audience.

9.​ Allow users to sync transactions from platforms like PayPal, Stripe, or local
payment gateways.

10.​Include a search bar and filters to help users find specific transactions
quickly.

4. Non-Functional Requirements

1.​ Performance: The platform should load pages and data within 3 seconds on
average.
2.​ Reliability: Ensure 99.9% uptime for the web application.
3.​ Scalability: The system should support an increasing number of users and
transactions.
4.​ Security: Use encryption for sensitive user data, such as passwords and
financial details.
5.​ Usability: Ensure the interface follows standard design principles for clarity
and ease of navigation.

6.​ Ensure the application runs smoothly on major browsers like Chrome,
Firefox, Safari, and Edge.

7.​ Optimize the web app for seamless use on mobile devices.

8.​ Provide an intuitive onboarding process with step-by-step tutorials for new
users.

9.​ Follow accessibility standards (e.g., WCAG) to make the platform usable for
individuals with disabilities.

10.​Ensure API response times are under 1 second for data retrieval and
transactions.

11. Use Cases

1. User Registration/Login

Actor: User

Description: The user registers with a unique email and password or logs in using
existing credentials.

6 of 13​ ​ 12 November 2024

Precondition: Internet connection and a valid email.

Postcondition: User gains access to their financial tracking account.

2. Add Transaction

Actor: User

Description: The user adds income or expense entries categorized under predefined
or custom labels.

Precondition: User must be logged in.

Postcondition: The transaction is stored in the database.

3. Edit/Delete Transaction

Actor: User

Description: The user edits or deletes previously added transactions.

Precondition: User must be logged in and have existing transactions.

Postcondition: The database reflects the updated or removed transaction.

4. Set Budget

Actor: User

Description: The user sets a budget limit for a month or year.

Precondition: User must be logged in.

Postcondition: Notifications are triggered when the budget is exceeded.

5. Generate Reports

Actor: User

Description: The user views monthly or yearly spending trends in visual formats
(charts, graphs).

Precondition: User must be logged in.

7 of 13​ ​ 12 November 2024

Postcondition: Spending trends are displayed.

6. Log Out

Actor: User

Description: The user securely logs out of the system.

Precondition: User must be logged in.

Postcondition: The session is terminated.

7. Class Boundaries

User Interface: Handles user interaction (Login, Add/Edit Transactions, Set Budget,
Log Out).

Transaction Manager: Manages income/expense operations (Add/Edit/Delete

Transactions).

Report Generator: Generates visual spending reports.

Database Manager: Handles data storage, retrieval, and updates.

Use Case Diagram

12. DFD (Data Flow Diagrams)

8 of 13​ ​ 12 November 2024

 1.​ DFD Level 0

Overview:

At the highest level, the system interacts with external entities: User and Database.
The system allows the user to input data (transactions, budgets, or report requests)
and returns processed outputs like alerts and reports.

●​ Entities:
○​ User: Inputs data and receives outputs.
○​ Database: Stores and retrieves financial data.

Flow:

1.​ User provides inputs to the Personal Finance Tracker System.

2.​ System interacts with the Database for storing/retrieving data.
3.​ System provides outputs (reports, alerts)

2. DFD Level 1

Overview:

Breaks the system into four core components:

1.​ User Management: Handles login and registration.

9 of 13​ ​ 12 November 2024

 2.​ Transaction Management: Manages addition, deletion, or editing of
transactions.
3.​ Budget Monitoring: Allows users to set budgets and get alerts.
4.​ Report Generation: Generates visual financial reports.

Flow:

1.​ User interacts with these components to perform specific tasks.

2.​ Each component retrieves or stores data in the Database.
3.​ Outputs are displayed to the user as feedback.

3. DFD Level 2

Overview:

Gives detailed processes within each Level 1 component:

1.​ User Management:

○​ Handles Registration (storing user data) and Login (validating
credentials).
2.​ Transaction Management:
○​ Add Transaction: Categorizes and stores data.
○​ Edit/Delete Transaction: Updates or removes transaction records.
3.​ Budget Monitoring:
○​ Set Budget: Saves budget limits.
○​ Monitor Budget: Fetches spending data and triggers alerts.
4.​ Report Generation:
○​ Fetches data and generates visual reports like graphs and charts.

13. Prototype (Low-Level + High-Level)

10 of 13​ ​ 12 November 2024

Low-Level Prototype

The low-level prototype focuses on the basic wireframes and initial design of the
application, ensuring functionality and flow before adding visual polish. It includes:

1.​ Login/Registration Page:

○​ A simple form to enter email and password for logging in or
registering.
○​ Buttons for "Login" and "Sign Up."
2.​ Dashboard:
○​ A minimalist layout showing a summary of income, expenses, and
remaining budget.
○​ Links to "Add Transaction," "Set Budget," and "View Reports."
3.​ Transaction Form:
○​ Input fields for transaction details:
■​ Amount
■​ Category (dropdown or text input)
■​ Description
■​ Date
○​ Buttons for "Save" and "Cancel."
4.​ Reports Section:
○​ Basic bar and pie chart placeholders to represent spending trends.
○​ Navigation buttons to switch between monthly and yearly views.
5.​ Budget Management:
○​ Fields to set monthly/yearly budget limits.
○​ Notifications for budget limits represented as simple alert text.

High-Level Prototype

The high-level prototype is a polished version with enhanced user interface design
and interactive functionality. It focuses on aesthetics, usability, and responsiveness:

1.​ Login/Registration Page:

○​ Styled with responsive design principles using CSS/Bootstrap.
○​ Error messages for invalid input.
○​ "Forgot Password" link.
2.​ Dashboard:
○​ Dynamic charts showing real-time financial data.
○​ Navigation menu for quick access to Transactions, Budget, and
Reports.
○​ Notifications for nearing/exceeding budget limits displayed
prominently.
3.​ Transaction Form:
○​ Auto-suggestions for categories based on past entries.
○​ Calendar widget for selecting dates.
○​ Mobile-friendly layout with large buttons.

11 of 13​ ​ 12 November 2024

 4.​ Reports Section:
○​ Interactive charts (zoom, hover for details).
○​ Toggle between different chart types (bar, pie, line).
○​ Option to download reports in PDF or Excel formats.
5.​ Budget Management:
○​ Visual indicators (progress bars) to show remaining budget.
○​ Smart notifications via email or pop-ups for budget status.
○​ Integration with third-party tools for budget syncing.

Tools for Prototyping

●​ Low-Level Prototype: Use tools like Balsamiq, Figma, or Adobe XD to

create wireframes.
●​ High-Level Prototype: Use Figma, Sketch, or Axure RP to develop polished,
interactive designs.

14. Prototyping Screenings

1. User Interface Screening

Purpose: Evaluate the usability and visual design of the prototype.

Steps:

●​ Test the low-level prototype for intuitive navigation and clarity of design.
●​ Check the high-level prototype for visual consistency, responsiveness, and
accessibility.
●​ Gather user feedback on ease of use and aesthetic appeal.

Tools: Use tools like Figma, Adobe XD, or InVision for this phase.

2. Functional Screening

Purpose: Ensure all functionalities outlined in the requirements are working

correctly.

Steps:

●​ Verify user account creation, login, and logout processes.

●​ Test the addition, editing, and deletion of transactions.
●​ Check budget-setting features and notifications.
●​ Review report generation for accuracy and clarity.

Tools: Automated testing frameworks (e.g., Selenium) and manual testing on

various devices.

12 of 13​ ​ 12 November 2024

3. Performance and Security Screening

Purpose: Evaluate the system's performance under load and its adherence to
security protocols.

Steps:

●​ Conduct stress tests to check system scalability.

●​ Measure response times for key actions like data retrieval and report
generation.
●​ Test for vulnerabilities, such as SQL injection and weak password protection.

Tools: Tools like JMeter for performance testing and OWASP ZAP for security testing.

13 of 13​ ​ 12 November 2024