Budget Kingdom

Inspiration

I was inspired by Fidelity’s challenge to gamify and demystify budgeting and savings. Their publicly available educational resources on healthy financial habits helped guide both the structure and presentation of this project.

I also wanted to lean into the “museum” theme and present something more immersive, so I built the experience around a medieval knights-and-dragons setting where your finances are represented as the health of your kingdom.

What it does

Budget Kingdom is a gamified budgeting dashboard that helps users understand their financial health in a more engaging way. Users can input their monthly income, spending, savings contributions, and debt payments. The app then calculates a “stability score” and presents the results as the current state of their kingdom. It also generates “quests," which are actionable suggestions that guide users toward improving their financial situation. For demonstration purposes, the app includes multiple preset profiles representing strong, average, and struggling financial scenarios, allowing users to quickly explore how different habits impact financial outcomes.

How we built it

The app was built using React, with custom CSS used to create a cohesive medieval-themed interface. State and derived calculations were handled using React hooks, allowing financial data to dynamically update across the dashboard. The project was deployed using Firebase Hosting, making it easy to share and demo the application live.

I also used generative AI tools as a virtual teammate during development, helping brainstorm ideas, debug issues, and iterate quickly on both functionality and design decisions.

Challenges we ran into

One of the biggest challenges was designing a financial model that felt both accurate and intuitive. Early on, I ran into issues where savings and debt were being represented in a way that distorted the monthly balance, and I had to rethink how to separate total values from monthly contributions. Another challenge was keeping the UI consistent while refactoring components and styling into a shared design system.

Accomplishments that we're proud of

I’m especially proud of turning what is usually a very dry topic into something interactive and narrative-driven. The stability score and quest system provide meaningful feedback while keeping the experience approachable. I’m also proud of deploying a fully working application that supports multiple financial scenarios and can be demonstrated live.

What we learned

I learned a lot about structuring React state and derived data, especially when multiple pieces of financial data depend on each other. I also gained experience deploying a production-ready frontend using Firebase Hosting and managing the project using Git and GitHub.

What's next for Budget Kingdom

Next steps would include adding real user accounts and persistent data storage so users can save their progress over time. I would also like to expand the gamification elements further with achievements, progression systems, and potentially AI-generated financial insights tailored to each user’s habits.

Built With

• css
• firebase
• javascript
• jsom
• jsx
• react