Skip to content

nataliausoltseva/Budget-Tracker

Repository files navigation

Budget Tracker

This application is written in Typescript using React Native. It was only tested and designed for Android devices (currently fully supports Pixel 8 Pro).

The app offers dark/light mode.

The app is using React Native Async Storage for local storage on your device. Refer to the link to read more about. The income and budget pages offer to store calculations optionally. The data for saving and investment pages goes straight to your local storage. By removing it from the list on the pages, the data is going to be cleared from your local storage.

How to use it

Income Page

When the application is loaded, the landing page is the Income page. You can select a currency, amount and frequency of your income.

Income Landing Page Light ModeIncome Landing Page Dark Mode

In the burger menu you can select saver (e.g. superannuation) with a custom percent; student loan with a custom rate and threhold; second income with a custom yearly payment.

Income Options Modal Light ModeIncome Options Modal Dark Mode

Once you click on the Calculate button, the table will populate and a pie chart if your expenses will show up.

Income With Data Page Light ModeIncome With Data Page Dark Mode

Budget Page

The second page is the Budget page. Initially there is only an add button.

Budget Landing Page Light ModeBudget Landing Page Dark Mode

In the add modal, you can add a new expense by providing a name, amount and the frequency the expense occurs: weekly, fortnightly, monthly, early or one-off.

Budget Modal Page Light ModeBudget Modal Page Dark Mode

Once expense(s) are added, you can see a list of them, with the pie chart that shows the amount of expenses for the selected frequency: weekly, fortnightly, monthly or early. One-off payments are added as they are and the same for all the frequencies.

The colour for the expenses are selected randomly.

Every expense can be deleted and edited.

If you entered/calculated income on the previous page, then your amount inside the pie chart might be positive. In this case, the Add to savings button is enabled. By clicking on the button, it adds a new row of expenses Savings.

Budget Landing Page With Data Light ModeBudget Landing Page With Data Dark Mode

Saving Goals Page

The third page is the Saving Goals page. Initially there is only an add button.

Saving Goals Landing Page Light ModeSaving Goals Landing Page Dark Mode

In the add modal, you can add a new goal by providing a name, goal amount, saved amount and the due date of the goal. The due date has to be in future.

Saving Goals Modal Light ModeSaving Goals Modal Dark Mode

Once goal(s) are added, you can see a list of them. By default they are all collapsed and can be expanded one by one.

Based on the due date value, the countdown is going to show the time to go in days, hours, minutes and seconds. The time is counting down in live time.

Every row has delete and edit button. Delete button does not have confirm modal, so once it is clicked it is DELETED. The edit button takes back to the modal for the goal

Saving Goals Page With Collapsed Data Light ModeSaving Goals Page With Collapsed Data Dark Mode

Once the goal is expanded, all the goal's fields that you filled in is visible. Apart of them, you can add transactions by clicking on the + button. A transaction modal includes amount and the date when the amount was contributed.

Once a transaction is contributed, you can see the chart of all them. The starting point depdends on what you entered into the goal's saved amount. When you reach the goal's amount, you will see another line across the chart indicating what needs to be reached.

All transactions can be modified and deleted as the goals.

Saving Goals Page With Expanded Data Light ModeSaving Goals Page With Expanded Data Dark Mode

Investments Page

The last page is the Investments page. Initially there is only an add button.

Investments Landing Page Light ModeInvestments Landing Page Dark Mode

In the add modal, you can add a new investment by providing a name, amount (that was invested), tax rate (based on your income), term amount, term amount time as a month or year, term rate and the start date of the investment.

Investments Modal Light ModeInvestments Modal Dark Mode

Once investments(s) are added, you can see a list of them. By default they are all collapsed and can be expanded one by one.

Based on the term amount and time you have provided, the countdown is going to show the time to go in days, hours, minutes and seconds. The time is counting down in live time.

Every row has delete and edit button. Delete button does not have confirm modal, so once it is clicked it is DELETED. The edit button takes back to the modal for the inestment.

Investments Page With Collapsed Data Light ModeInvestments Page With Collapsed Data Dark Mode

Once the invesment is expanded, all the investments's fields that you filled in are visible. Apart of them, you can see the chart with bars that is scrollable (based on the amount you have provided). The term rate is yearly so if the amount is in month time then you will only see 2 bars: current and at the end of the investment. The bar chart includes the initial investment and the return amount. Underneath, there is a table that summarises the bar chart.

Investments Page With Expanded Data Light ModeInvestments Page With Expanded Data Dark Mode

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published