GROUP PROJECT – MONEY TRACKER

CSM3123 – NATIVE MOBILE PROGRAMMING

( DR. RABIEI BIN MAMAT )

PREPARED BY:
MATRIC NAME
NUMBER
S67335 MUHAMMAD HARITH BIN ZULKIFLI (LEADER)

S67911 LUTFIL HAZIQ BIN ADNAN

S67604 HARINATUL MUFLIHUN BINTI HASNUL MUNAWAR

S65417 NUR IZZATI NAJWA BINTI MOHD BAKHRI

5 DECEMBER 2024

FACULTY OF COMPUTER SCIENCE AND MATHEMATICS

UNIVERSITI MALAYSIA TERENGGANU
SEMESTER I 2024/2025
TABLE OF CONTENTS

1.0 INTRODUCTION ............................................................................................................................ 1

2.0 PROBLEM STATEMENT ............................................................................................................... 2
3.0 OBJECTIVE ..................................................................................................................................... 3
4.0 WIREFRAME................................................................................................................................... 4
5.0 TEAM MEMBER ........................................................................................................................... 17

2
1.0 INTRODUCTION

In today’s fast-paced and ever-changing world, managing finances has become really

important, especially when it comes to budgeting for stability and financial freedom. With so many

ways to spend money, it can be tough for people to keep track of their cash flow. That is where

budgeting apps come in. These helpful tools make it easier for users to plan, monitor, and manage

their budgets effectively.

Money Tracker is one of the mobile applications on budgeting apps that aims to allow users

transparent control over flexible trace personal finance, focusing on set budgets and expenses that

can be used easily anytime and anywhere. This application allows users to set their budget, record

their expenses, and generate an automatic report for monthly spending by comparing the specific

budget of categories and their monthly expenses.

Built on the hybrid technique, Money Tracker can be used in both web and mobile

technologies such as the Android platform. This application offers a dynamic and user-friendly

interface platform for users to track their personal finances easily. Money Track becomes a needful

application in the hands of individuals seeking to gain analysis into their financial habits and set

the budget of their expenses monthly. In this proposal report, it will take a closer look at the key

features of budgeting apps, the benefits that budgeting apps provide, and the impact on personal

financial management.

1
2.0 PROBLEM STATEMENT

With the fast world today, it is expected of individuals not to know how to manage their

personal finances effectively. Many have no appropriate tools and knowledge to keep track of their

expenses and do budgeting, which eventually causes financial stress and poor decisions. Lack of

a systemised mechanism to keep track of financial transactions leads to overspending and less

saving, failing to meet long-term goals like vacations, emergency funding, or retirement plans.

Although many financial management tools are available, most of them either involve too

much complexity in the application, lack real-time insight, or do not offer users exactly what their

needs and goals are for financial management. There is an urgent need for a more intuitive and

user-friendly mobile app that would take the pain out of managing one's money by tracking

expenses, creating budgets, and monitoring spending in real time toward setting personalised

savings goals. By using Money Tacker application, users easier to put on record of their spending.

The proposed money tracker application fills this gap by offering a comprehensive,

accessible, and efficient solution for personal financial management. It aims to enhance the

financial well-being of users by enabling them to make informed decisions, stay within their

budget, and achieve their savings aspirations effectively.

2
3.0 OBJECTIVE

The purpose of a Money Tracker application is therefore to ensure that the user can be able to

manage their income by set the limit budget, expenditure and savings aspirations properly. It

intends to offer the users (an individual) a way of creating a plan, track expenses, and make sound

personal financial decisions. The app's main goals are:

1. To maximize financial well-being by keeping users within budgets, preventing them from

overspending, and making them achieve their long-term savings goals like vacations,

emergency funds, and retirement plans.

2. Makes money management easier by having a mobile application that allows everyone to

track their expenses and budgets in real time.

3. To create a hybrid application that will bring accessibility to finance tools and make it

easier for individual to use these tools and manage their finances anytime and anywhere

through web and mobile platforms.

In other words, the app targets to increase the well-being of individual through the

enhancement of budgeting.

3
4.0 WIREFRAME

1. Initial Screen

Figure 1 : Initial Screen

Figure 1 shows the initial screen page of the Money Tracker application. This screen welcomes

the user with a clean and well-designed interface. The initial screen displays the logo and tagline

of the Money Tracker application. The user needs to click the 'Start' button to log in to the

application.

4
 2. Login Page

Figure 2 : Login Page

Figure 2 depicts the subsequent step after the user selects the 'Start' button on the introductory

screen. The user must log in to utilize the app. If the user already has an account, they may simply

enter their email address and password and click the 'Login' button. If the user is new to the app

and does not already have an account, they can register by clicking 'Create'.

5
 3. Create Account

Figure 3 : Create Account

The Create Account page is designed for those who do not already have an account. Users are

required to enter their email, username and password, and confirm the password. Once completed,

they can click on the ‘Create Account’ button to register. After successful registration, users are

redirected to the login page to enter their credentials.

6
 4. Home Screen

Figure 4 : Home Page

Figure 4 shows the home screen page, which appears after the user successfully logs in. This

home page displays the user's name entered during account creation. The page includes four

buttons : Budgets, Expenses, Report, and Settings. Each button serves a distinct functionality.

7
 5. Budgets Page

Figure 5 : Budgets Page

Figure 5 displays the Budgets page. This page displays active budgets, which are generated

when a user successfully creates a budget for their expenses. Active budgets show the category,

budget limit, and remaining budget amount. Users can modify or eliminate budgets as needed.

When the user clicks the 'New Budget' button, it takes them to the Add Budget screen. The 'Back'

button allows the user to return to the home screen.

8
 6. Add Budget Screen

Figure 6 : Add Budgets Page

Figure 6 shows the screen that appears when the user clicks on the ‘New Budget’ button. On

this page, the user must select Transportation, Entertainment, Grocery, or another category. The

user can provide the budget amount for the selected category. The duration can be chosen between

two options: monthly or annually. In addition, users can enter any relevant information in the

Notes area. After completing the budget, click the 'Save Budget' button to finalize it.

9
 7. Edit Budget Screen

Figure 7: Edit Budget Page

Figure 7 shows the Edit Budget page. This page is displayed when the user clicks the Edit

button on the Budgets page next to the Delete button. Users can edit existing data for budgets, such

as category, amount, or duration. After making changes, the user need to click the ‘Save’ button

and the updated data will be automatically saved.

10
 8. Expenses Page

Figure 8: Expenses Page

Figure 8 shows the Expenses page, which may be reached by clicking the 'Expenses' button

on the Home screen. This page displays recent expenses entered by the user, including information

such as the spending category, amount, and date. It has a 'Edit' button for changing spending data,

a 'Delete' button for removing an expense, and a 'Add Expenses' button for entering new expenses.

11
 9. Add Expenses Screen

Figure 9 : Add Expenses Page

Figure 9 shows the Add Expenses page, which appears when the user clicks on the ‘Add

Expenses’ button. On this page, the user must enter the expense amount and select a category such

as Transportation, Entertainment, or Grocery and others. The user can optionally select a date for

the charge using the date selector and enter extra information in the Description section. After

entering all of the required information, click the 'Add Expenses' button to record the expense.

12
 10. Edit Expenses Screen

Figure 10: Edit Expenses Page

Figure 10 shows the Edit Expenses page. This page is displayed when the user clicks the

Edit button on the Expenses page next to the Delete button. Users can modify existing expense

details, such as the category, amount, date, or description. After making the necessary changes,

the user needs to click the ‘Save’ button to update the expense information.

13
 11. Report Page

Figure 11: Report Page

The Report page is displayed in Figure 11. Users can examine their financial summary on this

page by choosing a certain month and year. The entire budget, total expenses, and total savings

are automatically displayed on the website. The remaining amount from the unused budget is

represented by the total savings. For visual inspection, the page also creates a bar chart that

contrasts the budget with expenses. A comprehensive report that includes a list of categories, the

overall budget, and the total expenses for each category is given beneath the graphic. Motivational

quotes are included at the end of the page to motivate users.

14
 12. Setting Page

Figure 12: Setting Page

Clicking the 'Setting' button on the Home screen will bring up the Setting page, as seen in

Figure 12. The user's name, email address, and other account details are shown on this page. There

is a 'Delete Account' button on the page. A confirmation dialogue box with the choices "Cancel"

and "Confirm" shows when the user selects this button. Upon choosing 'Confirm,' the user will be

taken to the Logout page and their account will be erased. Choose 'Cancel,' and the user will be

taken back to the Home screen. A 'Logout' button on the page enables users to exit their account

and go back to the login screen.

15
 13. Logout Page

Figure 13: Logout Page

Figure 13 depicts the Logout screen, which appears after the user hits the 'Logout' button

on the Settings page. This page offers two options: a 'Login' and a 'Signup' button. Clicking the

'Login' button takes the user to the Login page, but clicking the 'Signup' button takes the user to

the Create Account page. These buttons enable users to rapidly select their next action after

logging out.

16
5.0 TEAM MEMBER

MATRIC NAME
NUMBER
S67335 MUHAMMAD HARITH BIN ZULKIFLI (LEADER)

S67911 LUTFIL HAZIQ BIN ADNAN

S67604 HARINATUL MUFLIHUN BINTI HASNUL MUNAWAR

S65417 NUR IZZATI NAJWA BINTI MOHD BAKHRI

17