Inspiration

We noticed, as college students, that financial literacy isn't something taught much in our lives. By the time we make it out into the real world, the financial tools we use assume we already know it all. It's a dangerous situation, since a lack of knowledge can lead to debt, overdraft fees, and stress in no time. We wanted to create an approachable app that makes financial learning fun and approachable.

What it does

Finance Unlocked contains two key features to help users learn:

1. Interactive Life Simulation Users can choose to play as a high schooler, college student, or new grad to make real-world financial decisions about spending, saving, and budgeting. The simulation shows the immediate impact of each choice.

2. Personal Dashboard Users can enter their expenses, and Finance Unlocked automatically generates a weekly bar chart and monthly line graph to visualize spending trends. There's also an option to import data for a full week or month. The dashboard helps users track habits and identify areas to improve.

Thsese tools work together to create a fun, user friendly experience.

How we built it

We built a full-stack financial wellness platform using a modern tech stack. The React/TypeScript frontend utilizes Framer Motion and Recharts to create a responsive and interactive user experience. On the backend, a Node.js/Express server integrates with the Google Gemini AI to transform user quiz answers into personalized financial advice. The entire system is designed to be intuitive and actionable, seamlessly connecting user input with AI-powered mentorship and dynamic data visualization.

Challenges we ran into

We had some challenges with integrating our APIs and keeping our styling cohesive. The former was fixed with reading up on some documentation and taking another look at tutorials to better understand it. The latter took some time, with the frontend team working side by side to update our pages.

Accomplishments that we're proud of

  1. Creating a clean, functioning dashboard with real-time charts.
  2. Designing an engaging simulation that feels relatable to high schoolers, college students, and new grads.
  3. Building a polished, cohesive interface in such a short time.
  4. Turning a complex topic like money management into something visual and approachable.

What we learned

  1. How to design UI that clearly explains financial concepts without overwhelming the user.
  2. How to build and update charts dynamically from live data inputs.
  3. How to simplify complex financial choices into meaningful scenarios.
  4. The importance of scoping features realistically in a 24-hour sprint.

What's next for Finance Unlocked

  1. Creating more detailed simulations with branching consequences.
  2. Allowing users to create budgets to track goals
  3. Integrating with external APIs to import real transaction data.
  4. Expanding the dashboard to teach users about credit score

Built With

Share this project:

Updates