BackBudgetBoy
Easily create a yearly budget
Personal Project '24
BudgetBoy grew out of a need to understand and keep track of expenses on a yearly scale. BudgetBoy helps users create a yearly budget by providing a simple interface to add and categorize income, expenses, savings, investments and debts. It provides a clear overview of the user's financial situation and helps them make informed decisions for the year ahead.
Visit Website
Key facts
Keeps sensitive data safe
It uses and indexedDB to locally store the users financial information. This means it can be used offline and no sensitive finanical data is ever sent to a server.
Virtual DOM
BudgetBoy is written in pure Javascript, though it make use of some libraries. It makes use of a virtual DOM rendered with D3.js. Furthermore, I make use of Dexie for the indexedDB and luxon for Date handling.
Responsive
BudgetBoy scales and adapt it's lay-out to all screensizes and keeps complex information readable on smaller screensizes.
Key skills used
UX Design
I iterated on the interface of BudgetBoy multiple times based on insights from user testing with the target audience. This resulted in a clear and easy to use interface that helps users understand their financial situation.
Javascript
In developing BudgetBoy, I honed my JavaScript skills and leveraged the D3.js library to create a dynamic and interactive user experience. This project significantly deepened my understanding of front-end development.
Figma and UI Design
BudgetBoys interfaced was first prototyped in Figma. Where I developed its layout and style. This was then translated to code. By doing it this way I was able to iterate much more quickly on variations of the same design..