Finance Tracker

Overview

Finance Tracker is a personal finance dashboard I built to replace a patchwork of spreadsheets. It consolidates account balances, budgets, goals, allocations, and transactions into a single SSR-first interface with real-time health indicators and contextual refresh loops.

Overview Dashboard

Tech Stack

• Framework: Next.js 14 (App Router)
• Runtime: Bun
• Database: PostgreSQL via Prisma ORM
• Auth: NextAuth v5 (beta)
• Styling: Tailwind CSS + Radix UI
• Charts: Recharts
• Email: Resend + React Email

Features

• Accounts — multi-account overview with real-time balances, allocation mix, and health badges (negative balance, past-due goals, underfunded budgets).

Accounts Dashboard

• Budgets — frequency-aware allocations (daily → annual) auto-converted to any viewing period; backend-calculated underfunded status using historical average income.

Budget Breakdown & Goals Progress

• Goals — target amount + date planning with required-per-period math and progress badges (Achieved, On Track, Off Track, Urgent, Past Due).
• Transactions — split allocations per entry, pagination and sorting, inline allocation previews, and bulk delete.

Transactions Ledger

• Allocations — searchable ledger grouped by account with rename, delete, squash, and transfer tooling to keep histories clean.
• Analytics — period selector (1 day → 1 year) for category breakdowns, income vs. expense charts, and rolling averages.

Analytics Dashboard

Architecture

The service layer (lib/services/*) centralizes every calculation — allocation totals, budget underfunded logic, goal progress — so both API routes and server components share identical math with no duplication.

Pages fetch data server-side via services and hydrate client components with initialData; clients only call the companion API route after mutations, eliminating loading spinners on navigation while keeping state fresh after writes.

Roadmap

• CSV / PDF export and recurring transaction support.
• Expanded automated test coverage (unit + E2E).
• Improved responsive layouts and real-time sync strategies.