Bb Budget

Overview

Bb Budget started as a personal fix — I was budgeting with a spreadsheet, downloading CSVs from multiple banks, categorizing transactions by hand, and putting it off for weeks at a time. I needed a tool that automated the tedious parts while keeping me in control of every number. Unlike the Budget App case study — which focuses on research and prototyping — this project is about designing, building, and shipping a real product I use to manage my own finances.

Design a budgeting tool that is secure enough that financial data never leaves the device, automated enough that CSV imports and auto-categorization reduce the tedious work, and personalizable enough that users can set their own budget targets without overwhelm.

Goals

Keep financial data fully private — no server, no account, no third-party access
Automate repetitive tasks (CSV parsing, categorization) while keeping the user in the verification loop
Let users personalize budget targets, categories, and subscriptions to match their life
Build progressive complexity — simple to start, powerful as confidence grows

Constraints

No backend — all data stored in browser localStorage
Must work offline and without account creation
Needs to handle real transaction volumes (1,000+ entries)
Solo project — design, development, and testing all on me

Who This Is For

People who budget with spreadsheets and want something faster
People who distrust apps that require bank login credentials
People who have tried budgeting apps and found them overwhelming
People who want to see exactly where their money goes without jargon

Common Challenges

Manual data entry is tedious enough to kill the habit
Linking bank accounts feels like a security risk
Most apps show too much at once — dashboards with dozens of widgets
No way to verify that the app's numbers match reality

Design Decisions

Visual Design

A warm, muted palette — olive green for income, muted rose for expenses — reduces the anxiety that comes with financial dashboards. Softer tones convey information without judgment, and generous whitespace keeps the interface calm rather than clinical.

Information Architecture

Five tabs — Review, Summary, Trends, Balances, Settings — each with a single purpose. Flat navigation, no nested menus, most important actions first.

One Task Per Screen

Each tab answers one question: Review → "what did I spend?" Summary → "am I on budget?" Trends → "what are the patterns?" Balances → "are the numbers right?" Settings → "how do I want this to work?"

The Work

Phase 1: Offline Tool

All screenshots use generated demo data — no real financial information is shown.

Transaction Review

Import bank CSVs and categorize transactions individually or in bulk. Auto-categorize handles repeat merchants, and a progress bar turns a tedious task into a completable one.

Bb Budget Review tab showing unreviewed transactions for March 2026. Five transactions listed with date, description, account, amount, and category dropdowns. Progress bar shows 18 of 23 reviewed (78%). Auto-categorize and Mark all categorized as reviewed actions visible above the table.

Monthly Summary

Variable and fixed expenses with budget targets. Progress bars show spending against each category's limit. Subscriptions itemized so nothing hides in a lump sum.

Bb Budget Summary tab for March 2026 showing income of $2,850, expenses of $2,095.84, and net of $754.16. Variable expenses at $489.86 with progress bars for Groceries ($256.38 of $450), Eating Out ($56 of $200), Gas/Transport ($114.40 of $120). Fixed expenses at $1,605.98 including rent, storage, phone, internet, and subscriptions totaling $123.75 per month.

Trends

Three visualizations — Income vs Spending, Category Breakdown, and Account Balances over time — with adjustable time range filters. Patterns invisible in transaction lists become clear in visual form.

Category Breakdown view showing stacked bar chart of variable expenses by month from November 2025 to March 2026. Categories include Groceries, Eating Out, Coffee/Drinks, Gas/Transport, Clothing/Beauty, and others, color-coded with a legend.

Balances

Users log balance snapshots — actual account totals on a given date — and the app computes current balances from imported transactions. This is where trust in the tool gets built.

Settings & Data Management

Custom categories, subscription tracking, budget targets, and full JSON backup/restore. Data never leaves the browser unless explicitly exported.

Bb Budget Settings tab showing Monthly Budget Targets with per-category spending limits, Subscriptions section (Spotify, Hulu, Planet Fitness, iCloud, Audible, Comcast Internet totaling $123.75/month), Expense Categories as deletable tag chips, and Data Management section with Export Backup, Import Backup, and Clear All Data buttons.

An honest audit revealed six concrete gaps. Rather than claim compliance I hadn't earned, I treated each one as a design task and fixed it.

What the Audit Found — and What I Fixed

Text contrast: Secondary text (helper text, inactive tabs, chart labels) was upgraded from stone-400 to stone-500/600 across all components. All text now meets WCAG AA. Primary body text (#292524 on #fafaf9) achieves ~16.5:1.

Colorblind-safe palette: Replaced red/green income/expense coding with teal (#0d6e6e) and wine (#c92250) — distinguishable by users with protanopia, deuteranopia, and tritanopia. Applied consistently across all views and charts.

Form labels everywhere: Every input, select, and filter now has a proper <label> with htmlFor association — including Settings budget targets, subscription fields, balance snapshot inputs, and inline category edits. No more placeholder-only inputs.

Chart accessibility: Added screen-reader-only data tables as alternatives for all three Recharts visualizations. Chart containers have role="img" with descriptive aria-label attributes so assistive technology can convey the chart's purpose.

Keyboard navigation: The account filter dropdown now supports Arrow Up/Down, Home/End, Enter/Space to select, and Escape to close — with proper role="listbox", role="option", and aria-selected attributes.

Screen reader support: Added a skip-to-content link, aria-live="polite" on the transaction counter, proper tab navigation ARIA (role="tablist", aria-selected, aria-controls), and aria-hidden="true" on all decorative icons.

Before & After

Original olive green/muted rose colors were difficult to distinguish for users with protanopia or deuteranopia. Updated to teal and wine for clear separation across all common types of color vision deficiency.

Before: Income vs Expenses bar chart using olive green and muted rose colors that are hard to distinguish with color vision deficiency — Before

After: Income vs Expenses bar chart using teal and wine colors that are distinguishable across all common types of color vision deficiency — After

Settings previously relied on low-contrast placeholder text with no visible labels. After: proper labels, higher-contrast text, clearer hierarchy.

Before: Subscriptions and Expense Categories with low-contrast text and inputs lacking proper visible labels, problem areas circled in red — Before

After: Subscriptions and Expense Categories with improved text contrast, proper form labels, and clearer hierarchy, improvements circled in green — After

Remaining Work

Recharts elements themselves are not keyboard-navigable (library limitation) — the sr-only data tables serve as the workaround
No hands-on screen reader testing (NVDA, JAWS, VoiceOver) has been conducted yet

Phase 2: Cloud Platform

The offline tool solved my problem, but my partner and I share finances — two separate localStorage budgets on two machines meant we were always out of sync. The challenge: add multi-user support without losing what made the tool work.

Architecture

The key decision: preserve the original data shape at the boundary. A cloud adapter translates between the localStorage format and Supabase — so all 17 existing components required zero changes.

Key Technical Decisions

Legacy shape preservation: All components read/write the same in-memory object as the offline version. A cloud adapter translates at the boundary — zero UI refactoring required.

Optimistic updates: The UI applies changes immediately. Cloud sync fires in the background. Supabase Realtime reconciles if drift occurs.

End-to-end encryption: Transaction amounts, descriptions, and balance snapshots encrypted at rest (AES-GCM). Keys managed by Vercel Edge Functions — never exposed to the browser.

Granular diff sync: A diffing engine compares previous and current state — only inserted, deleted, or modified rows hit the database.

Row-Level Security: Every Supabase table enforces ownership and membership checks via PostgreSQL RLS policies — not client-side gatekeeping.

Plaid integration: Bank accounts connect via Plaid Link. Access tokens exchanged server-side. Transactions sync automatically with webhook-driven updates.

Tech Stack

Household View Modes

Single: One member's data in isolation.

Single view showing one member's Summary tab with budget progress bars and account balances

Combined: All members merged — categories summed, transactions color-coded by owner.

Combined view merging all household members' budgets, transactions color-coded by owner

Side-by-Side: Each member in their own column for direct comparison.

Side-by-Side view with each household member in their own column for direct budget comparison

Sharing & Permissions

Email-based invitations with toggleable permissions (view, edit, re-share). Magic-link accept flow via Supabase Edge Functions.

Share access modal with email invite field and permission toggles for View, Edit, and Re-share

Bank Integration via Plaid

Plaid eliminates CSV imports entirely. Members connect bank accounts, map them to household accounts, and transactions sync automatically.

Connected Banks section showing SoFi, Wells Fargo, Chase, and Amex with connection status and last sync timestamps

Authentication & Security

Supabase Auth with email verification and password reset. A 30-minute inactivity timer auto-locks sessions. All sensitive data encrypted at rest (AES-GCM) with keys managed server-side.

Create account form with email field, password input, and password strength indicator bars

Outcomes

Reflection

What I Learned

Being the daily user changes everything. Every friction point I hit became a feature — auto-categorize, "mark all reviewed," the progress bar. Nothing stays broken when you use the tool yourself.
Accessibility assumptions need auditing. I assumed my minimal layouts were accessible. A real audit found six gaps. Fixing them taught me more than any checklist ever could.
Design data boundaries before writing UI. Preserving the localStorage data shape at the cloud adapter boundary meant zero component refactoring — the hardest architectural decision saved the most time.

Next Steps

Encryption Cutover Up next

Backfill plaintext columns to cipher, then drop them. Dual-write is already in place — this is a data migration, not a code change.

Per-Member Authentication

Give each household member their own Supabase identity instead of sharing one auth session.

Screen Reader Testing

Hands-on testing with NVDA, JAWS, and VoiceOver — especially the cloud version's new modals and the side-by-side view.