2025Full StackFinanceEdge Runtime

Personal Finance App

Personal Finance App
The Problem

Managing personal finances requires real-time visibility across accounts, transactions, and spending patterns — but most tools are slow, bloated, or lack developer-grade reliability. This app delivers a sub-second, edge-native finance dashboard with deep data visualization and bulk import support.

Tech Stack
Next.jsReactTailwind CSSShadcn UIHonoDrizzle ORMPostgreSQLClerk AuthReact QueryZustandRecharts
Architecture & Decisions

The backend runs on Hono deployed to Cloudflare's Edge Runtime, keeping API latency under 50ms globally without cold starts. Drizzle ORM with Serverless Postgres (Neon) handles all database access in a fully type-safe manner from schema to query result.

On the frontend, TanStack Virtual renders massive transaction lists without DOM bloat — only visible rows are mounted. CSV imports are processed inside a Web Worker to avoid blocking the main thread, and Optimistic UI updates via React Query give instant feedback before the server confirms writes.

Clerk handles authentication with social OAuth and session management. Zustand manages local UI state (filters, date ranges) while React Query owns all server state. Recharts renders interactive financial charts with custom tooltip overlays.