Fm Personal Finance
Frontend Mentor Guru challenge — Personal finance dashboard built with SvelteKit 5, Tailwind v4, Layerchart
Personal Finance App
A Frontend Mentor Guru-level challenge — personal finance dashboard built with SvelteKit 5, Tailwind v4, and Layerchart.
Pages
- Overview — balance cards with animated counters, pots summary, interactive donut chart with hover tooltips, latest transactions, recurring bills summary
- Transactions — paginated list with directional scroll transitions, search/sort/filter controls
- Budgets — interactive donut chart, spending summary, per-category budget cards with animated progress bars and latest spending
- Pots — savings pot cards with animated progress bars
- Recurring Bills — bill list with paid/upcoming/due-soon status indicators
Animations
UX-serving animations that communicate state — not decoration. All respect prefers-reduced-motion: reduce.
| Animation | Where | What it communicates |
|---|---|---|
| Progress bar fill | Pots, Budgets | "This is a fraction filling up" |
| Number counter | Overview balance cards, pots total, donut center | "This figure is computed, not static" |
| Donut hover | Overview, Budgets | "Explore the breakdown by category" |
| Page transitions | All routes | "You navigated, but you're in the same app" |
| Pagination scroll | Transactions | "You moved forward/backward through the data" |
See docs/superpowers/specs/2026-04-08-animation-enhancements.md for the full animation spec.
Tech Stack
- SvelteKit v2 + Svelte 5 (runes mode)
- Tailwind CSS v4 via
@tailwindcss/vite - shadcn-svelte — UI primitives (Card, Sidebar, Sheet, Tooltip)
- Layerchart — donut chart with low-level
Chart+Pie+Arc+Tooltipprimitives - Svelte 5 motion —
Tweenclass + built-inprefersReducedMotionreactive - TypeScript strict mode throughout
Getting Started
pnpm install
pnpm dev
The app runs on Vite at http://localhost:5173/ (or next available port).
Project Structure
apps/sveltekit/
src/
routes/
+layout.svelte # Sidebar + bottom nav shell, view transitions
+page.svelte # Overview dashboard
transactions/+page.svelte
budgets/+page.svelte
pots/+page.svelte
recurring-bills/+page.svelte
lib/
components/
app-sidebar.svelte # Nav sidebar with collapsible icon mode
bottom-nav.svelte # Mobile bottom navigation
budget-donut.svelte # Shared donut chart (hover, tooltip, center text)
ui/ # shadcn-svelte components
motion/
index.ts # setAnimated() helper — reduced-motion gate over Tween
data.ts # Static data from FM starter JSON
nav.ts # Navigation items
app.css # Tailwind v4 + FM design tokens + page transitions
Design Decisions
- FP + closures — no OOP, no classes
- Static data — imported from
data.json, no API layer yet - Animations communicate or they're noise — every animation answers "what does the user understand after this that they didn't before?" (spec)
- Svelte 5 native motion —
Tweenclass (not deprecatedtweenedstore) + built-inprefersReducedMotion - Shared components own visual identity —
BudgetDonutbakes its own dimensions, ring thickness, padding. Callers only supply data + text.
License
This is a Frontend Mentor challenge. The design assets are proprietary. Code is MIT.
