Budget Dashboard

The Problem

Managing household finances across 13+ accounts from multiple institutions (banks, credit cards, retirement, investments) meant constantly switching between apps, manually reconciling data, and losing hours to spreadsheet maintenance. Existing budgeting apps either required handing over bank credentials to third parties, charged monthly subscriptions, or couldn't integrate with the systems already in place.

The goal: a single dashboard that aggregates everything -- accounts, budgets, trends, loans, and calendar reminders -- without adding another subscription or compromising security.

The Solution

I designed and built Budget Dashboard, a full-stack web application that transforms Google Sheets from a manual tracking tool into an automated financial intelligence platform. The core insight: leverage existing infrastructure (Google Suite) as the database and processing layer, then build a modern frontend that makes the data accessible anywhere.

Key design decisions:

• Zero new subscriptions. Everything runs on Google Sheets + Vercel free tiers.
• Security-first architecture. Bank credentials (via SimpleFIN) never leave the Google Apps Script environment -- the frontend only sees aggregated summaries.
• OAuth authentication with email whitelist restricts access to authorized family members only.
• Mobile-first UX with pull-to-refresh, swipeable charts, and iOS safe area support.

Features at a Glance

• Budget Overview -- Monthly spending vs. budget with color-coded progress bars and smart alerts
• Spending by Category -- Historical navigation to compare spending patterns month-over-month
• Account Balances -- Real-time balances from 13+ accounts grouped by type (checking, credit, retirement)
• Net Worth Tracking -- Automatic asset/liability calculations with trend visualization
• Loan Progress -- Visual progress bars showing payoff status for vehicles and mortgage
• Calendar Integration -- Upcoming events and annual reminders (birthdays, anniversaries) in one view
• Spending Trends -- Swipeable charts with budget goals and historical averages
• Auto-Categorization -- Keyword-based rules automatically categorize transactions

Architecture

SimpleFIN (Bank Aggregation)
        |
Google Apps Script (Processing Layer)
        |
Google Sheets (Data Store)
        |
REST API (Apps Script Web App)
        |
Next.js Dashboard (Vercel)
        |
Authenticated Users Only

Security boundary: SimpleFIN credentials and raw account data never leave the Google environment. The frontend receives only calculated summaries -- no account numbers, no tokens, no sensitive data exposed.

Tech Stack

Layer	Technology
Frontend	Next.js 15 (React 19), TypeScript, Tailwind CSS
Backend	Google Apps Script
Database	Google Sheets
Auth	NextAuth.js with Google OAuth
Hosting	Vercel (auto-deploys from GitHub)
Data Aggregation	SimpleFIN API

Why this stack? Zero monthly costs, instant deployments, and built on infrastructure I already trusted with financial data. The Google Sheets "database" doubles as an admin interface -- I can manually review transactions, adjust budgets, and fix data without building separate tooling.

Development Approach

This project evolved over several months through focused development sessions, typically 1-2 hours at a time. Two factors made this pace sustainable:

1. Domain expertise. Years of tracking household finances in spreadsheets meant I knew exactly what the solution needed to do -- and what was unnecessary complexity.

2. AI-assisted development. Using Claude for rapid prototyping let me move from concept to working feature quickly. When building the swipeable charts component, I could describe the interaction I wanted and iterate through implementations in minutes rather than hours. The result was more experimentation and faster refinement based on actual use.

The build progressed iteratively: core API and budget display first, then account trends, then mobile UX polish, then authentication, then loans and calendar integration. Each phase shipped to production before starting the next.

Technical Highlights

Mobile-Native Experience

• Pull-to-refresh gesture handling with animated spinner
• Swipeable chart navigation between spending categories
• iOS safe area support for notched devices (iPhone X+)
• PWA-ready with custom favicons generated at runtime

Smart Data Handling

• Historical navigation -- Browse any previous month's spending by category
• Balance auto-fill -- Accounts without recent updates carry forward previous balance
• Auto-categorization -- Rules-based transaction categorization with preview before execution

Production Reliability

• Multi-layer cache busting -- Version tracking, build IDs, and service worker management ensure mobile users get updates
• Type-safe throughout -- Full TypeScript coverage with comprehensive API interfaces
• Environment-based config -- Clean separation between local development and production

What I'd Do Differently

If starting over, I'd consider separating the Google Sheets into development and production environments earlier -- I occasionally tested features against live data when a sandbox would have been safer. I'd also explore push notifications for budget alerts rather than relying on manual checks.

But the core architecture decision -- using Google Sheets as the database -- has held up well. It's fast enough, flexible enough, and the built-in spreadsheet UI means non-technical family members can make adjustments without touching code.

Built with Next.js, Google Apps Script, and Claude.