Personal
Budget_my
Personal budgeting tool with product-first UX
ReactTypeScriptFirebaseChart.js
The Problem
Most budgeting tools are either too simple (basic spreadsheets) or too complex (enterprise-grade dashboards). People want quick clarity: budget vs actual, spending trends, and alerts—without a steep learning curve.
The Solution
Built a budgeting app that prioritizes the 80% use case: track spending, set category budgets, see where you stand. Clean input flows make logging transactions fast, while visual summaries provide instant insight.
Product Decisions
- Simplicity over features—do fewer things well
- Quick input flows: log a transaction in under 5 seconds
- Visual-first summaries: charts before tables
- Category-based budgets aligned with how people actually think about money
Architecture
Frontend
React with TypeScript for type-safe state management
Backend
Firebase Functions for serverless backend logic
Database
Firestore for real-time sync across devices
Other
Chart.js for lightweight, responsive visualizations
Technical Highlights
- Real-time sync with Firestore for instant updates
- Firebase Auth integration for secure user accounts
- Responsive charts that work on mobile and desktop
- Category-based budget tracking with progress indicators
- Data validation to ensure accurate tracking
Results & Outcomes
- Demonstrates consumer-grade UI development skills
- Shows fintech domain understanding applied to product
- Clean, maintainable codebase as portfolio piece
What I'd Do Next
- Add bank account linking for automatic transaction import
- Implement recurring transaction support
- Build spending insights with trend analysis
- Create budget templates for common scenarios