← Back to work
Sign-in flow with email authentication and protected routes. 
Expense capture with categories, accounts, tags, and monthly spending summary.
hisab-diary.app
Case study
Hisab Diary
A live expense tracker with fast capture and clear spending insights — built solo on Next.js and Supabase.
Hisab Diary is an expense management product for tracking spending, organizing categories, reviewing financial patterns, and reporting through a clean, mobile-friendly interface.
- Role
- Role · Solo builder — product, frontend, backend, deployment
- Timeline
- Timeline · 2024
Next.jsTypeScriptSupabasePostgreSQLTanStack QueryReact Hook FormTailwind CSS
- Status
- Live
- Build
- Solo
- Stack
- Next.js + Supabase
01 — Problem
What problem does it solve?
Most trackers are either too bare or too heavy. People need quick entry and understandable patterns without spreadsheet friction.
02 — Origin
How the idea took shape
"Hisab" is how we tracked money informally growing up — notebook entries and mental math. I wanted that simplicity with categorization and trends.
03 — Role
My role
- Designed and built the full expense tracking experience — entry, categories, analytics, and auth.
- Implemented API integrations and optimized rendering for user-specific financial data.
- Owned responsive UI for fast mobile entry and desktop-friendly reporting views.
04 — Challenge
The challenge
- Balancing one-tap expense entry with accurate categorization and validation rules.
- Keeping analytics dashboards responsive while aggregating growing transaction history.
- Protecting user financial data with secure authentication and authorization patterns.
05 — Approach
The approach
- Used TanStack Query for server-state and React Hook Form for validated expense entry flows.
- Built on Next.js + Supabase with optimized rendering for list-heavy transaction screens.
- Prioritized mobile-first flows for daily capture, with analytics optimized for review sessions.
06 — Outcomes
Key outcomes
- Live expense management product with authentication, categorization, and reporting capabilities.
- Maintainable architecture ready for budgeting, recurring transactions, and deeper insights.
- Open-source repo demonstrating full product ownership beyond employer work.
07 — Differentiator
What makes this different
- Finance UX rooted in real "hisab" habits — fast entry first, insights second.
- Not a CRUD demo: includes analytics views, auth, and production deployment.
- Showcases product thinking for data-heavy SaaS — validation, aggregation, and responsive dashboards.
08 — Gallery
Product screens