My second project for Academy Xi, a simple budget tracker app using React JS & React-Bootstrap for styling. This project is a simple web application which shows the users total income, expenses and balance on the home page. The user is able to navigate to the Income and Expenses tab and add/ delete incomes and expenses. The tracker calculates the total, the incomes and expenses are currently stored on a json file.
Here is the link to the project: https://github.com/saradomincroft/budget-tracker
The incomes tab is a bit more simple than the expenses tab, the user is given the option to go to 'add new income' which takes them to a form. The user fills out the title of the expense, description and amount. The app checks to make sure that the fields aren't empty and that a $ value is entered in the amount input. Once the user has satisfied the requirements the user can submit (or go back if they choose). The income is automatically displayed as a card on the IncomesIndex page which also displays the income total at the top (a sum of all the added incomes). The user is able to delete incomes and it will adjust the total accordingly).
The expenses side works similarly to the incomes, however there is the option to mark the expenses as paid/ outstanding. The user is able to filter through 'all, paid, and outstanding' expenses, which are displayed on the expenses tab.
The calculations are made on a separate JS file and then there is a DifferenceIndex, structured similarly to the Expenses and Incomes index which displays the incomes minus the expenses and is displayed on the home page.
It is currently quite simple, I would like to develop this in the future to incorporate a login function, notification messages when an income/ expense has been added, and would also like to do something with the filtered expenses, possibly do another calculation for this so the user is able to see how much they have paid and how much is outstanding totalled up.
Thank you for reading.
Top comments (0)