A personal expense tracker with an editorial / ledger aesthetic. Local-first, no account, no server, no tracking.
https://notjuangamer10.github.io/flujo/
Flujo is a personal expense tracker built to feel like keeping a private book of accounts. Instead of the typical finance app look (blue cards, Material shadows, green/red pie charts), it uses a paper cream background, ink black text, an ochre accent, and three typefaces working together — Fraunces (serif) for titles, Inter Tight for UI, and JetBrains Mono with tabular numerals for amounts so they align like a real accounting book.
Everything is stored locally in the browser. No account, no server, no tracking. The data never leaves your device.
- Add an expense: amount, category, description, date
- Eight categories: food, transport, leisure, home, studies, clothes, health, other
- Browse expenses by month with a selector in the header
- Three summary totals: spent this month, count, and average
- Expenses listed with running numbers (001, 002…) like a ledger
- Delete expenses with confirmation
- All data persists in localStorage
- Editorial ledger aesthetic — inspired by old accounting books
- Three typefaces — Fraunces (serif) for titles, Inter Tight for
UI text, JetBrains Mono with
font-variant-numeric: tabular-numsfor amounts - Paper cream + ink + ochre palette — no blue, no Material
- No card borders — only thin dividing lines, like a real ledger
- Single column, 640px max — calm, focused, readable
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styles | CSS3 |
| Logic | Vanilla JavaScript |
| Storage | localStorage |
| Fonts | Fraunces, Inter Tight, JetBrains Mono |
No frameworks, no build step, no dependencies.
Just open index.html in any browser. No install, no config.
- Beta 1 — basic expense tracking with month selector
- Beta 2 — Sankey diagram of money flow + bar charts
- Beta 3 — OCR ticket scanner (offline, Tesseract.js)
- Beta 4 — debt ledger + shared expenses + pattern detection
- Beta 5 — FastAPI + SQLite backend for sync + PWA installable
This project took 54 hours, which is high for a frontend-only app. The honest breakdown:
- Sankey diagram with bezier curves on canvas: ~10h (including failed attempts and asking another AI for help with the algorithm)
- OCR ticket scanner with Tesseract.js + parser: ~8h
- Debts system with 4 split methods + settlement algorithm: ~12h
- Bar chart, donut chart, dark mode, full i18n: ~8h
- Bug fixing across 4 betas (autocomplete, hoisting, timezone, OCR hang): ~6h
- General polish, rewriting, testing on mobile: ~10h
The time adds up because nothing is a wrapper around a library. Every chart is math and canvas drawing, every feature is built from primitives.
This project was built with the assistance of AI. The author is a student learning to program and used AI (Gemini and an AI coding assistant) as a learning tool and coding teacher throughout the project.
AI helped with:
- Explaining JavaScript, HTML and CSS concepts the author didn't understand (localStorage, fetch, canvas drawing, hoisting, etc.)
- Writing the initial code structure for each feature
- Debugging issues, especially recurring editor autocomplete bugs
- Suggesting the editorial design direction and selecting the combination of typefaces
- Reviewing and refactoring code
The author:
- Made all design decisions (the "ledger editorial" concept, the cream + ink + ochre palette, the choice of three typefaces)
- Chose what to build in each beta and why
- Reviewed and tested every line of generated code in the browser
- Asked for explanations until they understood what each part does
The project is the author's in the sense that they directed it, chose what to build, and understood what was built. AI was a teacher and assistant, not the sole creator.
Made by hand as a learning project.