KC Logo
HomeSpotlightProjectsAbout
Full-Stack

Budget Tracker

A modern personal finance platform that helps users understand their spending habits through real-time analytics, intelligent budgeting, and personalized financial insights.

Completed2025•Solo Developer
Live Demo
  • React 19
  • Vite
  • Tailwind CSS v4
  • Supabase
  • PostgreSQL
  • Supabase Auth
Budget Tracker banner
Overview

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.

What it does

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.
Built with

Technology stack

  • React 19
  • Vite
  • Tailwind CSS v4
  • Supabase
  • PostgreSQL
  • Supabase Auth
Gallery

A closer look

The control center — starting balance, plus live Income, Balance, and Expenses cards for the selected period.
The 50/30/20 guide breaks spending into Needs, Wants, and Savings with live progress bars and on/off-target badges.
Half-month filtering (Full Month / 1st Half / 2nd Half), five rows at a time, and a totals bar for the active filter.
Adding an entry — income/expense toggle, per-user categories, live-formatted amount, and date.
Auth gate — Google OAuth or an email magic link, restricted to an allowlist of authorised accounts.
Built mobile-first — the full tracker works on a phone.
By the numbers

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.

Project details

Status
Completed
Timeline
2025
Role
Solo Developer
Category
Full-Stack

Tech

  • React 19
  • Vite
  • Tailwind CSS v4
  • Supabase
  • PostgreSQL
  • Supabase Auth
Live demo
Keep exploring

Want to see more?

Head back to the projects section, or dive into the source for Budget Tracker.

Visit Live Demo