TALLY — Personal Finance & Budgeting
Every dollar, accounted for.
A calm, data-dense personal-finance dashboard for tracking net worth, budgets, spending, accounts and savings goals. Built as a snappy client-side SolidJS app with hand-drawn SVG charts, a full dark/light theme, and a reactive money model where every figure reconciles from one seeded data layer. Honestly framed as a front-end demo.
Role · Design + front-end build (SolidJS; seeded data layer) · Updated Jun 2026
- Full SolidJS + Vite + TypeScript source for 7 screens (Dashboard, Budgets, Transactions, Accounts, Goals, Reports, Settings) plus a 404
- A reusable hand-built SVG chart kit (donut, area/line + crosshair, grouped bars, sparklines, progress bars)
- A typed, deterministic seed layer + a reactive store with one documented API/Supabase seam
- A complete dark + light theme, self-hosted Inter + JetBrains Mono, tabular-number money formatting
- Delivery
- 24–48h
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · Your API / Supabase
A reactive money model over a seeded, typed data layer with one documented seam (loadDataset) — point it at Supabase or your own API to go live.
Delivered as full SolidJS source. Point the documented data seam at Supabase or your own API to go live.
What makes it special
Reactive money model
One typed store derives net worth, cash flow, budgets and per-account trends live from the same transaction stream — add a transaction and every balance, bar and chart updates in the same frame.
Hand-built SVG charts
Donut, area/line with a hover crosshair + readout, grouped income-vs-expense bars, budget progress bars and account sparklines — drawn from scratch, no chart library, with draw-on motion.
Dark-first, full light theme
A no-flash inline script applies the persisted theme before first paint; the whole palette is a single class swap over CSS custom properties, AA-contrast in both modes.
Genuinely usable on mobile
A collapsible icon-rail sidebar on desktop; a slide-in drawer plus bottom tabs and scrollable card tables on phones — zero horizontal overflow from 375px to 4K.
Accessible by construction
Focus-trapped, Esc-dismissible dialogs, progressbar/switch roles, labelled controls, text/ARIA chart summaries, :focus-visible rings and reduced-motion fallbacks throughout.
What’s included
- Full SolidJS + Vite + TypeScript source for 7 screens (Dashboard, Budgets, Transactions, Accounts, Goals, Reports, Settings) plus a 404
- A reusable hand-built SVG chart kit (donut, area/line + crosshair, grouped bars, sparklines, progress bars)
- A typed, deterministic seed layer + a reactive store with one documented API/Supabase seam
- A complete dark + light theme, self-hosted Inter + JetBrains Mono, tabular-number money formatting
- Working subpath production build, a headless boot smoke test, README case study + PROGRESS notes
Gallery
More Finance & Fintech templates
Make TALLY yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.