Money Sandbox

Inspiration

Budgeting apps often explain where money went, but they rarely show what could happen next. MoneySandbox was inspired by the idea of letting people experiment with financial choices before making them.

What I Built

Users enter their income, savings, and monthly spending by category. They can then adjust spending, change income, add one-time expenses, and compare their projected savings over six months.

How I Built It

I built the app with React, TypeScript, Vite, Tailwind CSS, Recharts, and Lucide icons. The financial calculations are separated into pure TypeScript functions, using deterministic demo data and browser-local profile storage.

What I Learned

I learned how to model financial scenarios, keep calculations explainable, build interactive charts, validate financial inputs, and design a responsive dashboard around a clear user flow.

Challenges

The biggest challenges were keeping the baseline and scenario forecasts mathematically consistent, handling increases as well as reductions, preserving user edits, and making sure the impact breakdown always reconciles with the final projected balance.

Built With

• lucide-react
• playwright
• react
• react-testing-library
• recharts
• tailwind-css
• typescript
• vercel
• vite
• vitest