Background

Since I want to improve my SpringBoot skills, I want to create something that can help my current situation. One of the things that I thought is an application to track my expense. I am using Monefy in my phone right now. I think it is better for me if I can develop something similar but for web browser, and I can also get rid of the ads !

Requirement

Here are the requirements that I could think of:

  • Add new earning and spending data
  • Add new earning and spending category
  • View daily earning and spending
  • (Optional) Display in dark theme

Dark theme is not mandatory, so it depends on my capability designing the frontend later.

Initial Design

For the design itself, I design it in Figma. Expense Tracker Application: Main Page Design

 

This is the main page for the application. I named it “Tabunganku” which means “My Savings”. In the main page, there is a pie chart that shows the breakdown of my spending. There is also spending breakdown in numerical value in the right part of pie chart, and also a button to add new data. There is also a table in the bottom that shows my spending history. In the left, there is a filter to shows spending or earning per category.

 

Expense Tracker Application: Add Data Page

 

This page will open if a user wants to add a new earning or spending data. A user has to fill the amount, the date of the transaction, and the category.

 

Expense Tracker Application: Add Category Page

 

Add Category page is a page to add a new category. User can add icon to differentiate its category, and user must determine if the category is Expense or Earning.

I use a grid to design the web elements. I think the design can be improved in the next iteration, because this is the first time for me to design a website.