Centsable - Personal Finance for Teens

Centsable turns personal finance into an adventure with gamified lessons, real-world budgeting tools, and AI-powered insights that make money management actually fun.

Comment

Inspiration

As a sophomore taking a personal finance class, I watched my classmates ,myself included , struggle to actually absorb the material. We'd open online resources, read walls of text about budgeting and compound interest, and close the tab five minutes later having retained almost nothing. It wasn't a lack of effort; it was that the tools we had were built for adults who already had a reason to care, not for teenagers who were just beginning to understand why any of this mattered.

That frustration stuck with me. Teen financial illiteracy is a massive, underappreciated problem: most young people enter adulthood without ever having been taught how to manage money, and traditional resources do little to fix that. I wanted to build something different: a platform that meets students where they are, makes the learning feel rewarding, and actually sticks. That's how Centsable was born.

What I Built

Centsable is a gamified financial literacy web app designed specifically for teens and students. Instead of reading about personal finance, users experience it: earning XP, leveling up, completing interactive minigames, and building real financial knowledge through hands-on challenges.

Core features include:

  • XP & Leveling System — Users earn experience points by completing lessons and minigames, with progress saved to their account
  • Financial Minigames — Interactive challenges that teach budgeting, saving, and decision-making through gameplay
  • User Accounts & Progress Tracking — Persistent profiles backed by Firebase so progress is never lost
  • Animated, Engaging UI — Built to feel more like a game than a textbook, with smooth transitions and a clean visual identity

How I Built It

Centsable is built as a full-stack Next.js 15 application written in TypeScript, deployed on Vercel.

Frontend:

  • Next.js 15 + React 18
  • Tailwind CSS for styling
  • Radix UI for accessible component primitives
  • Framer Motion + GSAP for animations
  • Recharts for data visualization

Backend & Database:

  • Firebase (Firestore) for real-time data persistence and user account storage
  • Firebase Admin SDK for server-side operations
  • Firebase Cloud Functions for backend logic

AI Integration:

  • Google Genkit with the GoogleAI plugin for AI-powered features

Other Tools:

  • React DnD for drag-and-drop interactions in minigames
  • React Hook Form + Zod for form validation
  • Vercel Analytics & Speed Insights for performance monitoring
  • Developed with Google Antigravity

Challenges I Faced

The hardest part of this project was building the XP and progression system. It sounds simple on the surface — do a thing, get points — but designing a system that felt fair, motivating, and resistant to exploitation took a lot of iteration. Balancing how much XP each action should reward, how levels should scale, and making sure the feedback felt satisfying required many rounds of testing and tweaking.

The minigames were their own challenge entirely. Unlike static lessons, minigames needed to be interactive, dynamic, and actually teach something while being engaging. Designing the game logic, handling edge cases, and making the experience feel smooth pushed me to grow significantly as a developer.

Finally, persisting progress to user accounts via Firestore introduced a whole category of problems — handling real-time sync, managing state between the client and database, and making sure a user's XP and completed lessons were always accurate. Getting that data layer right was one of the most technically demanding aspects of the project.

What I Learned

Building Centsable taught me how to architect a full production-grade web application from the ground up. I learned how to work with Firebase at scale, how to design game mechanics that are genuinely educational, and how to build accessible, animated UI components that don't sacrifice performance. More broadly, I learned that the hardest problems in software aren't always technical — sometimes the real challenge is understanding the user well enough to build something they'll actually want to use.

What's Next

The roadmap for Centsable is centered on depth and reach. The next major milestone is a native mobile app, so students can learn on the go — financial literacy shouldn't require sitting at a desktop. On the content side, I plan to expand the minigame library with complex financial simulations: stock market scenarios, real-world budgeting challenges, loan and interest calculators with live feedback, and more. The goal is for Centsable to eventually serve as a full financial education curriculum that any student can pick up and progress through independently.

Built With

Share this project:

Updates