Ledgerly
A real-time finance dashboard that stays at 60fps with 100,000 transactions and a live feed.
- Next.js
- TypeScript
- TanStack Query
- TanStack Table
- TanStack Virtual
- Zustand
- ECharts
- Tailwind
- Rows
- 100,000
Summary
A personal-finance console that feels instant at scale: 100k transactions, a live feed, and keyboard-first navigation.
Problem
Finance dashboards tend to be either pretty and slow, or fast and ugly. I wanted to prove a data-heavy UI can be both.
My role
Designed and built it end to end. It can run on mock data or on my Daybook ledger API.
Key decisions
- Server state in TanStack Query, UI state in Zustand, filters in the URL. Each kind of state lives where it belongs.
- Virtualised table: only ~30 rows exist in the DOM at a time.
- Server-Sent Events for the live feed, written straight into the query cache instead of refetching.