Skip to content
Back to Project Archive

FinTrack

Client-side dual-ledger finance v1.0.0 — expenses vs personal investments, Recharts dashboards, Zustand, JSON backup. Not Chart.js, not bank sync.

FinTrack Logo
// PROJECT_ID
expense-vs-investment-tracker
// AUTHOR
DHAATRIK CHOWDHURY
// SUBJECT
CASE STUDY
// CLASSIFICATION
PUBLIC // OPEN
// TELEMETRY
STATUS: SHIPPED // LEDGER: DUAL // SYNC: JSON_EXPORT
// IMPACT.LOG
// FUCKUP_LOG
RECORDED
[ FUCKUP LOG ]  I tagged FinTrack with Chart.js on this site while the repo renders with Recharts — and unthrottled mobile filters once made the whole chart tear and lag 200ms on real phones.

SYS.STATUS: v1.0.0 shipped — dual ledger, Recharts dashboards, local JSON backup

FinTrack separates everyday expenses from personal investments (courses, health, growth spending) and visualizes the ratio on a Recharts dashboard. Zustand holds app state; README emphasizes local data ownership with JSON export/import.

This page fixes portfolio drift: tags previously said Chart.js; the repo uses Recharts.

What it is (scope)

SurfaceWhat you do there
DashboardExpense/investment/income charts and ratios
TransactionsLog income and expenses by category
InvestmentsTrack personal growth spending separately from burn
Savings goalsVisual progress toward financial targets
SettingsCurrency, categories, themes, JSON backup/restore

Stack: React 19, TypeScript 5.8, Vite 6, Tailwind CSS 4, Zustand 5, Recharts, Motion, Vitest.

Note: package.json includes express and better-sqlite3 without README-documented server usage — shipped UX is client-side per upstream docs.

Who I built it for

  • People tired of guilt-based budgeting that lumps SIPs with takeout
  • Users who want finance clarity without linking bank accounts
  • Forkers wanting MIT-licensed local-first ledger patterns

Not for: automatic bank sync, shared household accounts, or tax filing automation.

Fuckups & learnings

  • Chart.js tag was wrong. Repo uses Recharts — portfolio hygiene matters.
  • Mobile chart lag from filter churn. Recharts full re-renders hurt on older hardware until inputs were throttled.
  • Category defaults need opinion. Too many buckets → people stop logging.
  • Persisted Zustand shape needs version keys before schema migrations.

Honest limitations

LimitationReality
No bank syncManual entry + JSON import/export
Local-onlyYou own backup discipline
Orphan server depsexpress/sqlite3 in package.json not documented as shipped
Projection mathClient-side assumptions — must stay visible in UI

Deep-dive transmissions

  1. Why FinTrack — expenses vs growth spending

Run it locally

git clone https://github.com/dhaatrik/expense-vs-investment-tracker.git
cd expense-vs-investment-tracker
npm install
npm run dev

Tests: npm run test — Vitest.

Closing transmission

A honest mirror for how you label money — not a neobank. Start with why-and-what.