About this project
Most budgeting apps assume a single monthly cycle, but plenty of people are paid twice a month and budget in halves. Budget Tracker models that directly: every month splits into a 1st half (days 1–15) and a 2nd half (days 16–end), each with its own view and totals.
It sets a starting balance per month, and the second half automatically carries over whatever is left from the first — so the running balance always reflects reality instead of resetting arbitrarily. Live summary cards and a totals bar keep income, expenses, and net visible while filtering.
The stack is deliberately lean: React 19 + Vite on the front end, Tailwind CSS v4 for styling, and Supabase for both PostgreSQL storage and authentication. Access is locked to an email allowlist, with Row Level Security policies ensuring each user can only ever read and write their own transactions.
Key features
- Full transaction CRUD — add, edit, and delete entries with category, date, and amount.
- Month navigation with prev/next controls to browse any period.
- Half-month filtering — Full Month, 1st Half (days 1–15), or 2nd Half (days 16–end).
- Starting balance per month, where the 2nd half automatically carries over what's left from the 1st.
- Live summary cards for Income, Expenses, and Balance, plus a totals bar for the active filter.
- 50/30/20 Budget Guide with live progress bars for needs, wants, and savings.
- Google Sign-In and email magic link auth, restricted to an allowlist of authorised accounts.
- Per-user expense categories so each account gets a tailored set of options.
- Row Level Security policies so users can only ever access their own transactions and savings.
- Progressive transaction list that shows five at a time and expands on demand.
Technology stack
- React 19
- Vite
- Tailwind CSS v4
- Supabase
- PostgreSQL
- Supabase Auth
A closer look
Quick metrics
- Budget periods
2
Budget periods
Each month splits into 1st and 2nd half with automatic carry-over.
- Budget guide
50/30/20
Budget guide
Live progress bars tracking needs, wants, and savings targets.
- Row-level security
RLS
Row-level security
Postgres policies scope every row to its owning user.
- Responsive
100%
Responsive
Built mobile-first and equally usable on desktop.