BudgetBuddy — Interactive Budgeting Game

A small, aesthetic web prototype that teaches budgeting fundamentals via an easy-to-run month-by-month simulation. Designed for hackathons: simple, extendable, and visually pleasing.

Comment

🧠 Inspiration

Budgeting is often taught in dry, abstract terms—spreadsheets, lectures, or apps that assume users already know what to do. I wanted to flip that. BudgetBuddy was inspired by the idea of turning financial literacy into a game: something interactive, visual, and forgiving enough to learn by doing. The goal was to simulate real-life budgeting decisions—splitting income, handling surprise expenses, and building an emergency fund—while keeping it friendly and aesthetic.

🔍 What I Learned

  • How to scaffold a modular budgeting simulation using plain HTML/CSS/JavaScript.
  • The importance of onboarding UX: even a simple “Auto-Budget” button and tip panel dramatically improved first-time user experience.
  • How to visualize financial history using canvas charts and maintain state across months.
  • That even small tweaks to UI (like range sliders and dynamic labels) can make budgeting feel tactile and intuitive.

🛠️ How I Built It

  • Frontend Stack: HTML, CSS, JavaScript.
  • Design: Custom layout with Inter and Space Grotesk fonts, responsive container, and modular cards for stats, decisions, tips, and history.
  • Game Logic:
    • Users start with a fixed income and allocate funds to essentials, wants, and emergency savings.
    • Each month, they face random events and must adjust their budget accordingly.
    • A chart tracks balance history, and a modal summarizes monthly outcomes.
  • Features:
    • Auto-budgeting logic to split income based on heuristics.
    • Interactive sliders for adjusting wants and emergency contributions.
    • Event log and tip system to simulate financial surprises and advice.
    • Confetti canvas and modal summary for positive reinforcement.

⚠️ Challenges Faced

  • Balancing realism and simplicity: I had to decide how much complexity to include without overwhelming users. For example, I avoided debt mechanics and focused on core budgeting behaviors.
  • State management: Keeping track of month-to-month changes, user decisions, and event outcomes required careful DOM updates and reset logic.
  • Accessibility: Ensuring the game was keyboard-friendly and readable across devices took extra iteration.
  • Visual feedback: Making the game feel responsive and rewarding (e.g., confetti, chart updates, modal summaries) was key to engagement but required fine-tuning.

📐 Math Behind the Budgeting

The auto-budgeting logic uses proportional allocation:

$$ \text{Essentials} = 0.6 \times \text{Income}, \quad \text{Wants} = 0.3 \times \text{Income}, \quad \text{Emergency Fund} = 0.1 \times \text{Income} $$

These ratios are adjustable, but they provide a baseline for financial stability. Users can override them manually using sliders.

Built With

Share this project:

Updates