All projects
F
Finance Dashboard
Personal finance intelligence — portfolio tracking, budget analysis, and net worth trends.
In Progress
Next.js 14TypeScriptSupabaseRechartsTailwind CSS
Overview
A comprehensive personal finance dashboard for tracking investments, budgets, net worth over time, and spending categories. Built across 7 phases with 61 files, it features real-time portfolio performance, category-level budget analysis, and interactive Recharts visualizations.
61
Files
7/9
Phases
Key Features
- 7 development phases complete: portfolio tracking, budget management, net worth trends, category analysis
- Interactive Recharts visualizations: line charts, bar charts, donut charts with dark-mode awareness
- 61 source files with strict TypeScript throughout
- 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