MoneyTown: Building Financial Futures, One Adventure at a Time

Inspiration

Financial literacy is rarely taught in schools, yet it's one of life's most essential skills. We see the consequences everywhere—young adults drowning in debt, unable to budget, or falling victim to scams. Our team came together at ElleHacks 2026 with a powerful question: What if we could teach kids healthy money habits before they ever need them?

Each of us brought different strengths to the table—some focused on backend systems, others on creating engaging user experiences, and some on integrating AI capabilities. But what united us was something deeper: we'd each watched friends and family struggle with financial decisions that early education could have prevented. We wanted to create something that would make a real difference in kids' lives.

What it does

MoneyTown is an interactive financial literacy game that teaches children core money management concepts through engaging storytelling and gameplay. Players explore a vibrant town, interact with friendly villagers, and face real-world financial scenarios tailored to kids.

Core Features:

  • 🎮 Five Progressive Levels: Each teaches a distinct financial concept—delayed gratification, needs vs. wants, earning money, financial boundaries, and income allocation
  • 🤔 Choice-Based Learning: Every scenario presents three options (trust/question/reject) that reinforce critical thinking about money decisions
  • 🤖 AI-Powered Content: Gemini API generates age-appropriate financial scenarios; ElevenLabs converts to natural voice narration
  • 📊 Trust Score System: Dynamic feedback (0-100 score) tracks player progress and provides immediate learning reinforcement
  • 🎯 Educational Feedback: Each choice triggers contextual explanations teaching concepts like opportunity cost and compound interest
  • 🔊 Audio Integration: ElevenLabs-powered narration makes the game accessible and engaging for diverse learning styles
  • 🏆 Reward System: Badges, experience points, and reflection overlays celebrate learning milestones

Example Scenario (Level 1 - Delayed Gratification):

You've saved $50 toward an $80 skateboard. Your favorite game is on sale for $30. Do you:

  • Trust: Buy the game now (impulsive choice)
  • Question: Ask for advice first (information gathering)
  • Reject: Keep saving for the skateboard (financially wise choice)

Each choice delivers tailored feedback explaining opportunity cost, delayed gratification, and compound goal-setting.

How we built it

Architecture & Tech Stack:

Backend (Python/Flask):

  • RESTful API with 5 endpoints (/api/health, /api/challenges, /api/user/<id>/progress, /api/user/<id>/answer, /api/user/<id>/reset)
  • Modular challenge system (challenges.py) with type-safe data structures
  • User progress tracking with in-memory storage (easily scalable to database)
  • CORS-enabled for seamless frontend integration

Frontend (React/TypeScript):

  • Vite-powered build system for fast development iteration
  • 30+ Radix UI components for accessible, consistent interface
  • Custom game engine with 2400x1800 explorable world
  • Camera follow system with smooth player movement
  • NPC interaction system with dynamic dialogue modals
  • State management via custom useGameApi hook

Integration Layer:

  • Type-safe API service (src/services/api.ts) with interfaces matching backend schemas
  • Custom React hooks managing user state, API calls, loading/error handling
  • LocalStorage persistence for user IDs across sessions

Development Workflow:

  1. Hours 0-4: Brainstorming, team formation, initial "TrustTown" scam-focused concept
  2. Hours 4-12: Research phase—realized foundational financial literacy > scam detection
  3. Hours 12-14: Strategic pivot to MoneyTown financial education model
  4. Hours 14-24: Parallel development—backend API + frontend game engine
  5. Hours 24-30: Content creation—designing 5 distinct educational scenarios
  6. Hours 30-34: Full-stack integration, bug fixes, UX polish
  7. Hours 34-36: Testing, documentation, final presentation prep

Critical Technical Decisions:

Choice Format Standardization: We refactored our entire backend from generic A/B options to semantic trust/question/reject naming. This wasn't just aesthetic—it embedded our educational philosophy directly into the UX. Each action carries meaning that reinforces learning outcomes.

Modular Challenge Architecture: Our CHALLENGES dictionary structure allows infinite scalability. Adding new levels requires zero code changes—just add JSON-structured data. This design choice means we can rapidly expand content post-hackathon.

Challenges we ran into

1. The 12-Hour Pivot

Our biggest challenge was also our best decision. We initially built "TrustTown" focused on teaching kids to identify online scams. But 12 hours in, during a team check-in, we asked ourselves: "Can kids recognize a fraudulent investment if they don't know what investing is?"

The answer was no. We realized we were putting the cart before the horse. Kids need foundational financial literacy before advanced scam detection. This meant scrapping significant early work and pivoting to a progressive education model. It was stressful, but it made our project infinitely more impactful and aligned with Wealthsimple's mission.

2. Avoiding Educational Redundancy

During content creation, we caught ourselves writing scenarios that taught overlapping concepts. For example, Level 2 and Level 3 initially both focused on delayed gratification. We solved this by:

  • Creating a concept matrix mapping each level to a distinct learning outcome
  • Peer-reviewing scenarios to ensure complementary, not redundant, lessons
  • Focusing on progression: simple concepts (delayed gratification) → complex concepts (income allocation)

This rigorous content design ensured each level added genuine educational value.

3. Full-Stack Integration Under Pressure

Midway through development, we had a functional backend and a beautiful frontend—running completely separately. Integration required:

  • Type Safety Alignment: Refactoring Python data structures to match TypeScript interfaces
  • Async State Management: Handling loading states, error boundaries, and API failures gracefully
  • Format Mismatch: Our frontend used trust/question/reject while the backend had A/B choices—we standardized on the more semantic frontend format
  • Testing Constraints: Limited time meant prioritizing happy-path testing over edge cases

We solved this by creating a dedicated API service layer and custom React hooks, centralizing all backend communication in one maintainable module.

4. Balancing Education with Engagement

Financial concepts can be dry and abstract. We tackled this through:

  • Relatable Scenarios: Skateboard savings, lunchtime decisions—situations kids actually face
  • Visual Feedback: Animated trust scores, colorful reward screens, progress bars
  • Audio Narration: ElevenLabs integration for auditory learners
  • Gamification: Badges, XP systems, unlockable levels to maintain motivation

The challenge was ensuring educational rigor while keeping it fun. We constantly asked: "Would an 8-year-old want to play this?"

Accomplishments that we're proud of

🏆 Complete Full-Stack Integration in 36 Hours We didn't just build a prototype—we built a production-ready MVP with a polished frontend, robust backend, and seamless API integration. Every feature works end-to-end.

🎓 Five Distinct, Researched Educational Levels Each scenario teaches a unique concept grounded in financial literacy research:

  • Delayed gratification (marshmallow experiment principles)
  • Needs vs. wants (Maslow's hierarchy adapted for kids)
  • Earning money (basic economics and value creation)
  • Financial boundaries (healthy money relationships)
  • Income allocation (50/30/20 budgeting adapted for allowances)

This isn't edutainment—it's evidence-based education wrapped in gameplay.

💡 The Strategic Pivot Recognizing our initial concept misaligned with sponsor goals and actually pivoting under time pressure showed real-world product thinking. Many teams stick with flawed ideas; we had the courage to start over.

🎨 Thoughtful User Experience Design Our game features:

  • 30+ professionally styled UI components
  • Smooth animations and transitions (Motion library)
  • Audio accessibility for diverse learners
  • Responsive feedback systems with contextual explanations
  • Intuitive navigation requiring zero instruction

We focused on removing friction between the player and the learning experience.

🔧 Scalable Architecture for Long-Term Impact Our modular challenge system means adding 100 more levels requires zero code changes—just content creation. This demonstrates we built with longevity in mind, not just demo-day.

What we learned

Technical Insights:

  1. Type Safety Across the Stack Is Non-Negotiable Matching TypeScript interfaces with Python data structures saved us hours of debugging. When your API returns {choices: {trust, question, reject}} and your frontend expects the exact same structure, integration becomes trivial.

  2. Custom Hooks Simplify Complex State Our useGameApi hook encapsulates all API logic, user state, and error handling. Components stay clean and focused on presentation. This pattern is production-grade React.

  3. Modular Architecture Pays Dividends Separating challenge data from game logic from API handlers meant three team members could work in parallel without merge conflicts. Good architecture enables team velocity.

Strategic Insights:

  1. Align with Sponsor Goals Early Our pivot saved us from building something technically impressive but strategically misaligned. We learned to constantly ask: "Does this solve the problem the sponsor actually wants solved?"

  2. Content Is As Important As Code The educational value of MoneyTown comes from thoughtful scenario design, not just polished UI. We invested heavily in researching age-appropriate financial concepts and crafting relatable situations.

What's next for MoneyTown

Immediate Roadmap (Next 3 Months):

📊 Database Persistence Migrate from in-memory storage to PostgreSQL/MongoDB for true multi-session progress tracking. Users should be able to save their progress and return weeks later.

🎮 Content Expansion (15+ New Levels) We have a roadmap for advanced topics:

  • Level 6-8: Saving strategies, interest rates, emergency funds
  • Level 9-11: Basic investing, stocks vs. bonds, compound growth
  • Level 12-14: Credit cards, loans, debt management
  • Level 15-17: Taxes, charitable giving, financial goal-setting

Each level will maintain our standard: distinct concepts, age-appropriate scenarios, research-backed education.

👨‍👩‍👧 Parental Dashboard Parents should see their child's progress, completed levels, and areas needing reinforcement. Features:

  • Learning analytics (which concepts the child struggles with)
  • Suggested conversation starters for real-world application
  • Customizable difficulty settings

🌍 Multilingual Support Financial literacy shouldn't be limited by language. We'll translate MoneyTown into:

  • Spanish (50M+ Spanish-speaking kids in North America)
  • French (Canadian accessibility)
  • Mandarin (global reach)

ElevenLabs supports multilingual TTS, making this technically feasible.

📱 Mobile Optimization Currently desktop-focused, but kids increasingly use tablets. We'll:

  • Optimize touch controls
  • Adapt UI for smaller screens
  • Add offline mode for accessibility in low-connectivity areas

Long-Term Vision (6-12 Months):

🤝 School Partnerships Integrate MoneyTown into K-5 curriculum as a supplementary learning tool. Imagine teachers assigning "Level 3: Earning Money" as homework, then discussing opportunity cost in class the next day.

🔬 Impact Measurement Partner with education researchers to measure learning outcomes:

  • Pre/post financial literacy assessments
  • Longitudinal studies tracking financial behaviors into adulthood
  • A/B testing different scenario designs for maximum educational impact

🎯 Adaptive Learning Paths Use ML to personalize difficulty based on player performance. If a child struggles with delayed gratification, the system could provide supplementary scenarios on that specific concept.

The Ultimate Goal:

We envision MoneyTown becoming the Duolingo of financial literacy- a fun, accessible, research-backed platform that millions of kids use to build healthy money habits. We built the foundation in 36 hours. Now we want to build a movement.

Built With

Share this project:

Updates