Color Variable In the design, the front page of Tabunganku will feature a pie chart. Back then, my primary concern was ensuring the distinct identification of each category. After some consideration, I realized that users’ priority might be to view a beauty chart without any configurations. In the worst-case scenario, a user might ignore the color selection process, leading to the pie chart displaying in black color. For this reason, I have made the decision to remove the color value from the input....

I designed both the Add Transaction and Add Category pages to be similar. Both pages utilize the form tag. Inside the form element, I created two columns to separate the label and the input fields. Svelte Directory Structure In Svelte, the directory represents the URL. For example, if a website has a page /foo/bar, we need to create a new directory in Svelte src/routes/foo/bar and create a +page.svelte and any other files needed....

To develop the front-end side of Tabunganku, I am faced with numerous options. Based on Stack Overflow Survey, most developers used React, jQuery, or Angular to develop their front-end. I searched around and discovered Svelte. I think it is an interesting technology because people keep hyping it up. Page Layout Svelte allows me to create a separate page just for layout so that the header and sidebar will be consistent across every page....

Introduction After reviewing the design, I am not fond of the current layout. To begin with, the sidebar was initially meant to filter transactions based on their respective categories. However, I have come to the realization that the functionality is complex. Hence, I prefer to remove this feature. Additionally, I have decided to remove the category icon feature. The category icon is redundant and requires additional space to maintain. Instead, I will implement a color picker to represent each category....

Main Page From main page, we can conclude that we need an API to display category list and an API to display daily transaction. To calculate the total of each category, the value can be derived from a user’s transaction data. As a result, we don’t need a specific API to do that. Add Transaction Page (There should be a “Notes” section here) In this page, we need an API to get category list for a user and an API to add a new transaction....