HomeBudgetAI
A modern personal finance application that helps track expenses, manage budgets, and gain insights into spending habits — built for my own daily use.
Why I Built This
Like many people, I found myself constantly wondering where my money was going each month. Spreadsheets were tedious, existing apps were either too simple or too complex.
So I decided to build exactly what I needed — a clean, intuitive budget tracker that would give me complete visibility into my home expenses, income, and savings at a glance.
"I wanted to build something I would actually use every day — not just another portfolio project that sits in a GitHub repo collecting dust."
Mobile-First Experience
Designed to be quick, intuitive, and accessible from anywhere.
From Concept to Reality
1. Research & Discovery
Analyzed pain points with existing budget apps. Identified core use cases: quick expense logging, income tracking, savings goals, and spending insights.
2. Information Architecture
Designed a clear navigation structure: Dashboard for overview, separate sections for Expenses/Income/Savings, and Settings for customization.
3. Visual Design
Created a dark theme UI with vibrant accent colors for data visualization. Used color strategically: green for income, red for expenses, purple for savings.
4. Development & Iteration
Built with Next.js and Supabase. Continuously refined the UX based on daily usage — adding quick-add features, improving date filtering, simplifying forms.
What Makes It Special
Intuitive Dashboard
A single view showing total income, spending, and savings with category-based breakdowns.
Quick Data Entry
Add expenses in seconds. Create categories and vendors on-the-fly without leaving the form.
Comprehensive Tracking
Separate sections for expenses, income, and savings with full CRUD operations.
Flexible Settings
Fully customizable categories, payment methods, vendors, and income sources.
Built With Modern Tools
Problems I Solved
Date Filtering Accuracy
Transactions weren't appearing in "This Month" filter due to timezone issues.
SolutionImplemented local timezone-aware date parsing by constructing Date objects with explicit year, month, day values.
Quick Category Creation
Users needed to create new categories while adding an expense, but had to navigate away.
SolutionAdded "Add New" buttons inline with each dropdown, opening a quick modal to create new items without leaving context.
Database Schema Mismatch
Supabase uses snake_case columns while frontend uses camelCase, causing data mapping issues.
SolutionCreated bidirectional utility functions to automatically convert between snake_case and camelCase.
Real-time Auth State
Managing authentication state across server components, client components, and API routes in Next.js 15.
SolutionImplemented separate Supabase client factories for browser, server, and middleware contexts using @supabase/ssr.
By the Numbers
Interested in Working Together?
I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.