FinLife

Learn money. Build habits. Change your future

Comment

Inspiration

As international students in the US, we quickly realized how much we didn't know about finances, and how little anyone tells you. Back home, the financial systems work differently: different banks, different credit rules, different norms around saving and spending. Coming here, we were expected to just figure it out. Build credit from scratch. Understand FAFSA, tax forms, student accounts. Nobody hands you a guide. That experience, of feeling financially lost in a new country, is what inspired FinLife. Financial literacy shouldn't be something you only get if you grew up here or if your parents already knew the system. It should be accessible to everyone, especially the people communities most often leave behind.

What it does

FinLife is a Duolingo-style financial literacy app that makes learning about money feel like a game. Users sign in, set their skill level, pick a financial topic, such as budgeting, investing, credit, and more, and work through bite-sized lessons and quizzes. Along the way, they earn XP, build daily streaks, collect hearts, and watch a simulated net worth respond to the decisions they make. Progress syncs to their account via Firebase, so they can pick up exactly where they left off. The goal is to turn financial education from a one-time chore into an ongoing habit.

How we built it

We built FinLife as a Vite + React 19 + TypeScript single-page app styled with Tailwind CSS. Firebase handles authentication (email/password and Google sign-in) and Firestore serves as our database for user profiles, per-category progress, and session history. Our typed service layer wraps the Firebase SDK directly, with Firestore security rules locking each user's data to their own account. Lesson content is loaded from Firestore or falls back to a bundled local JSON file so demos stay reliable offline. Game logic, XP calculation, streak math, world unlocks, net worth deltas, all runs on the client in a dedicated gameLogic module. State is managed with Zustand and TanStack Query, with a debounced sync layer that writes profile changes to Firestore without spamming the database on every UI tick. We also built a FinSim engine, a financial simulation mini-game, that is fully functional and ready to be wired into its own route.

Challenges we ran into

Getting the game logic right was harder than expected. Streak math, heart refills, world unlock conditions, and XP bonuses all need to interact correctly without creating edge cases that break progress. Syncing Zustand state with Firestore in a way that felt instant to the user but didn't cause unnecessary writes required careful debouncing. Designing the onboarding guard system (RequireAuth + RequireFullProfile) so that new users flow smoothly into the app without hitting broken states also took iteration. And honestly, scoping the project, knowing what to build fully versus what to stub out, was its own challenge under hackathon time pressure.

Accomplishments that we're proud of

We are proud that the core loop actually works end-to-end: a user can sign up, onboard, complete a lesson, earn XP, and see their progress update in real time. The FinSim engine is fully built, even if not yet mounted in a route, which means we have a meaningful next step that isn't starting from scratch. We are also proud of the personal motivation behind this, building something we actually needed and would have used.

What we learned

We learned how much product thinking goes into something that looks simple on the surface. Gamification is easy to add and hard to do well, the difference between streaks that motivate and streaks that feel meaningless is subtle. We also learned how powerful Firebase is as a solo backend for a team that wants to move fast, and where its limits start to show (complex queries, offline-first behavior). On the human side, we learned how to scope under pressure and ship something real rather than perfect.

What's next for FinLife

The immediate next step is mounting the FinSim route so users can experience financial decision-making simulations. Beyond that, we want to add community leaderboards and more interactive group challenges so friend groups or student organizations can learn together. Localized content tracks are a priority, financial systems look different depending on where you are from, and we want FinLife to reflect that rather than defaulting to a one-size-fits-all American curriculum. We also have an OpenAI integration stubbed in for AI-generated scenarios personalized to a user's life stage and goals. Longer term, institutional partnerships with universities and nonprofits could turn FinLife into a structured curriculum tool for the communities that need it most.

Built With

  • eslint
  • firebase
  • firestore
  • groq
  • hosting)-as-our-full-backend-and-cloud-platform.-groq-/-openai-compatible-api-for-the-ai-financial-advisor-feature.-vitest-+-testing-library-for-testing
  • husky
  • javascript
  • openai
  • prettier
  • react
  • tailwind-css-4-+-radix-ui-+-motion-for-styling-and-ui
  • tanstack
  • typescript
  • vite
  • with-eslint
  • zustand
  • zustand-+-tanstack-query-for-state-management.-firebase-(auth
Share this project:

Updates