All projects
P
Personal Finance Tracker
Personal finance intelligence — portfolio tracking, budget analysis, and net worth trends.
In Progress Live site
Next.js 14TypeScriptSupabasePlaidRechartsTailwind CSS
Overview
A comprehensive personal finance tracker for logging income and expenses, tracking budgets, monitoring net worth over time, and analyzing spending by category. Features live bank account syncing via Plaid, real-time portfolio performance, category-level budget analysis, and interactive Recharts visualizations.
In progress
Status
Plaid
Bank sync
Key Features
- Plaid bank connection: live account sync pipeline with ConnectBankButton and 4 API routes
- 7 development phases: portfolio tracking, budget management, net worth trends, category analysis
- Interactive Recharts visualizations: line charts, bar charts, donut charts with dark-mode awareness
- Supabase Postgres backend with RLS-protected financial data
What I Learned
Recharts SVG tick fill is not affected by CSS dark mode — use a MutationObserver + state to pass conditional fill values
Financial data benefits from pessimistic loading patterns — show stale data instantly, then refresh