Expense Tracking

A personal expense tracker where the primary input is paste free text and let an LLM structure it. Built mobile-first for one thumb on an iPhone, in Indonesian, in rupiah.

Live at expensetracking.online · v0.2.0

paste free text  ──►  POST /api/parse (GLM-5.2)  ──►  editable review table
                                                            │
                                        attach photos ──────┤
                                                            ▼
                                                   createExpense() ──► /e/[id]
                                                            │
                                     /m/[month] · /stats ◄──┴──► /s/[token] · /f/[token]

Paste this:

bakar duit tuesday - 18/8/2026
roti buaya 38500
ayam sambal hitam 45k
perumahan laddaland 49k
kungfu soccer 49k
fan fries plaza blok m 58850
pak gembus 26k

…and get back the title bakar duit tuesday, the date 2026-08-18, six categorised items and a total of Rp 266.350, in an editable table you can fix with one tap before saving.

---

Demo

Everything below is captured from the running app at 414×896 — the iPhone XS Max the design targets — with seeded fixture data. This is the v0.2.0 design: flat, loud, graphic. One grotesque at five weights, red as the one primary action, yellow as the highlighter, cutout art as the wallpaper, and every card a sheet of frosted glass over it.

---

What it does

• Paste → parse. One textarea, one Rapikan button. GLM-5.2 handles Indonesian money notation (45k, 45rb, 1,5jt, Rp 38.500 where . is a thousands separator), DD/MM/YYYY dates, day names, title extraction and per-item categorisation.
• Never hard-blocked. Zod-validate the model's tool output → one repair round trip → a deterministic regex fallback parser. A 25 s timeout or an LLM outage degrades to the fallback rather than losing the paste. Drafts also survive a mis-tap via localStorage.
• Judul presets. Seven title chips — pengeluaran harian first — ordered by how often they are tapped rather than alphabetically, because only ~2.5 fit before the scroll edge on a 414 px screen.
• Photos as opaque attachments. Food, tickets, BCA QRIS screenshots. Compressed client-side to ≤1600 px / ~300 KB / JPEG q0.8 (EXIF stripped) and uploaded straight to Vercel Blob, so the 4.5 MB serverless body limit never comes into play. The viewer pages with native scroll-snap, wraps around at both ends, and carries four controls: close, save to Photos, share, delete.
• Monthly rollups. /m/[month] lists groups newest-first, sub-grouped by day, with the month total in the header, and collapses to a fullscreen list on request. /stats gives a 12-month bar chart, a month-over-month delta that is honest about the in-progress month, a category bar list and the biggest-single-expense callout — all aggregated in SQL.
• Simpulan. Three model-written Indonesian paragraphs — this week, this month, the last two months — below the numbers. Stamped on write and generated on read, so the save path pays nothing and five rapid edits collapse into one call. No fallback, deliberately: a regex can approximate a parse, nothing approximates prose.
• Two kinds of read-only link. A whole group at /s/<token>, or a single photo at /f/<token> — both nanoid(12), ~71 bits, no login, no indexing, no caching, revocable by deleting the row. Sending someone a receipt should not also publish what you spent.
• Eight categories, each with an Indonesian label and a two-letter mono code — MJ Makan & Jajan, BH Belanja Harian, TR Transport, TG Tagihan, TT Tempat Tinggal, HB Hiburan, KS Kesehatan, LN Lainnya. Exactly eight, so the picker fits a 2×4 tap grid in a bottom sheet.

Not in v0.2.0: budgets, recurring expenses, multi-currency, export, receipt OCR, search, tags beyond the eight categories, household accounts, offline writes, push notifications, editing on the shared page.

---

Stack

Layer	Choice
Framework	Next.js 16.3.1 App Router, RSC, Server Actions, Node runtime everywhere
UI	React 19.2.8, Tailwind CSS v4 (CSS-first @theme), Recharts 3.10, lucide-react 1.33
Type	Archivo (variable, 400–900) via next/font/google, self-hosted at build time
Auth	Auth.js v5 ([email protected]), Google provider only, JWT sessions + Drizzle adapter
Database	Neon Postgres via @neondatabase/serverless, Drizzle ORM 0.45
Files	Vercel Blob client uploads
LLM	GLM-5.2 through z.ai's Anthropic-compatible endpoint, via @anthropic-ai/sdk
Validation	Zod 4
Tests	Vitest 4
CI	GitHub Actions — lint, typecheck, test, db:check, build, format:check
Host	Vercel Hobby, region sin1

On the LLM SDK. z.ai exposes an Anthropic-compatible endpoint, so @anthropic-ai/sdk is the right client — constructed with baseURL + apiKey overrides. GLM-5.2 is not a Claude model: never send thinking, output_config, effort, speed or any betas. Structured output comes from tool use with a single forced tool, which is the portable mechanism across Anthropic-compatible servers.

On the icon set. components/ui/Icon.tsx exports finished components and is the only module allowed to name lucide-react — enforced by ESLint and tests/icon.contract.test.ts. A generic adapter would have left the package legal at every call site, and once it is, <Trash2 className="size-5" /> is less typing than the sanctioned path and renders fine. The 2.5-stroke / square-cap / mitred-join argument is now props on every glyph rather than a comment remembered in three files.

---

Getting started

Requires Node ≥ 24 (.nvmrc pins it), a Neon project, a Google OAuth client and a z.ai API key.

This is the beginning of the README. Read the rest at the original. Read the full README ↗