SimpleFinanceDash

What This Is

A self-hosted personal budget dashboard that replaces a manual spreadsheet workflow. It tracks monthly budgets with bills, variable expenses, debts, savings, and investments — presented in a friendly, pastel-colored UI inspired by a clean spreadsheet aesthetic. Built with Go (backend) + React/TypeScript (frontend) + PostgreSQL.

Core Value

Opening the app should feel like opening a beautifully designed personal spreadsheet — clean pastel colors, clear data layout, approachable and visually delightful. The UI IS the product.

Requirements

Validated

✓ Local auth (email/password registration, login, logout, JWT sessions) — existing
✓ Budget CRUD (create, edit, delete monthly budgets) — existing
✓ Budget item management (create, update, delete items per budget) — existing
✓ Category CRUD (bill, variable_expense, debt, saving, investment, income types) — existing
✓ Copy budget from previous month — existing
✓ Server-side budget totals computation — existing
✓ REST API with auth middleware — existing
✓ i18n support (German + English, user preference stored) — existing
✓ Docker deployment (single binary, multi-stage build, compose) — existing
✓ Dashboard with financial overview, bills tracker, variable expenses, expense breakdown, debt tracker — existing (rough)

Active

Cohesive pastel design system across all components (not default shadcn)
Polished login/register screens with branded look (not generic shadcn defaults)
Dashboard layout that feels organized, spacious, and visually appealing
Charts that look polished and informative (donut, bar, pie)
Consistent color tokens and typography across the entire app
Smooth interactions — inline editing, form submissions, transitions
Category management page with polished UI
Settings page with polished UI
Responsive layout (desktop-first, but usable on tablet)
Fix any backend bugs discovered during UI testing

Out of Scope

CSV/bank import — future feature, not needed for visual polish
Recurring/automated transactions — future feature
Shared/household budgets — future feature
Custom themes/color picker — architecture supports it, but not this milestone
OIDC authentication — stubs exist, implement later
PDF/CSV export — future feature
Mobile app — web-first
GraphQL API — REST is sufficient

Context

The codebase was built as an initial implementation but the frontend was not given enough design attention. The backend (Go + PostgreSQL) is functional with proper auth, CRUD operations, and data model. The frontend uses React + shadcn/ui + Tailwind + Recharts but looks like default shadcn with minimal customization. The original vision was a pastel spreadsheet aesthetic — soft blues, pinks, yellows, greens, lavenders with clean data presentation. This milestone is about bringing the UI up to that vision.

Key reference: PRD.md section 8 (UI/Design) describes the target aesthetic — pastel colors, soft backgrounds, subtle dividers, shadcn components with custom theme tokens.

Constraints

Tech stack: Keep existing Go + React + shadcn/ui + Tailwind + Recharts stack
Design system: Build on shadcn/ui, don't replace it — customize via CSS variables and Tailwind config
Backend: Minimize backend changes — focus is frontend polish
i18n: All new/changed UI text must have de + en translations
Package manager: Use bun for frontend

Key Decisions

Decision	Rationale	Outcome
Customize shadcn via CSS variables	Maintain upgrade path while achieving unique look	— Pending
Pastel palette as primary design language	Matches original spreadsheet inspiration	— Pending
Desktop-first responsive	Primary use case is desktop budget management	— Pending

Last updated: 2026-03-11 after initialization

4.1 KiB Raw Blame History