FusedBudget

Budgeting application built in React

Background

I wanted a way to keep track of my finances in this every changing world and was also interested in learning how to build a complex React application from the ground up.

My Role

  • UI/UX Design
  • Front End Developer
  • Wireframing
  • Web Design

Demo

Demo site

Username: Demo
Password: Demo


Dashboard

FusedBudget Dashboard

The dashboard is where a user would see there budget for the current month.

They are able to change the amount budgeted add categories as well as hide categories.

At the top there is also a section that tells them how much more they have to budget for that month, how much they have spent and how much they have earned.

On the side of the budget there is a sidebar where the user can see how much was leftover from last months budget, how much is budgeted this month, how much has been spend this month and how much is available. In the sidebar they can also quickly budget certain amounts, create a funding goal, and add notes to the category.


Account page

FusedBudget Account

The account page is where a user would see all of their tranascations for their account. There are a few actions that a user can take here to manage there account.

Edit the account amount

Clicking the pencil icon next to the account amount will allow them to edit the amount that is in their account.

Add a note to an transaction

Clicking the note icon of a transaction item will allow them to view and add notes to the transaction.

Editing a transaction

Clicking the pencil icon of a transaction item in the list will allow them to edit the details of the transaction.

Deleting a transaction

Clicking the trash icon will delete the transaction from the list and from the category it was added to and add the money spent back into the account.


All Transaction Page

FusedBudget Transaction Page

On the all transactions page the user can view all transactions from across all accounts. Here the user can also filter the transactions by account, category, and payee.

Reports Page

FusedBudget Reports

The reports page them shows the user analytics about their spending and their net worth. By default it shows it for the current month but can be changed to show for a specific time frame. There are some quick select options for the user including; This Month, Last Three Months, This Year, Last Year and All Dates.

Notification Manager

FusedBudget Notifications

The notification manager allows users to create notifications. They would add a new notification set the title, date and time it should be posted and the message that should be sent. The message will then be sent to the user and the bell icon in the header would show a ring icon and when clicked would show the notification, which then could be marked as read or removed.

Payee Settings

FusedBudget Payee Settings

The payee settings would allow a user to create and manage payees as well as set a default category for each payee. If a default category is set for a payee then when adding a transaction and that payee is selected it would automatically select that category for the user.

Mobile

FusedBudget Mobile

The application works well on mobile devices as well and can be added to the home screen of mobile device as a web app that will run at full screen.