Inspiration

Many college students struggle with their finances. It's hard to keep track of all of the incoming and outgoing steams of money, especially while juggling classes, social events, and everything else in life. That's why we decided to create a finance tracking tool, but with a twist.

What it does

Budget Hero is a simple web application that stores your transactions and gamifies the experience of saving money each day. Every single positive transaction allows Mr. Coin to attack your greatest enemies: bad credit, gambling addiction, and a super secret powerful boss. By losing money, your enemies gain their health back, and attack Mr. Coin in return. All of your transactions are stored on the CapitalOne NessieAPI and in a backend server.

How we built it

We built this application with NodeJS, React, and FastAPI. React / JS was used for the front end, and FastAPI / Python was used for the backend. We wrapped the CapitalOne NessieAPI with our own API to prevent sensitive data leakage without forcing users to generate their own API keys in a theoretical deployment situation. We stored data in python dataclasses, and wrote a converter function to serialize our data into JSON.

Challenges we ran into

One major challenge was integrating a game into our project. React is NOT good at creating game-like structures, so we had to creatively overcome this issue.

Accomplishments that we're proud of

We are proud of this project's frontend UI/UX. We customized the art used in this project, and we are especially proud of the animation of the stock bad enemy guy.

What we learned

We learned a lot about frontend and backend development, web game design, and working as a team.

What's next for Budget Hero

In the future, we can further implement the NessieAPI to include more types of bank statement, like recurring payments, subscriptions, and much much more. We can also host the website in the future.

Share this project:

Updates