Expense Tracker

A personal expense tracker for my New Zealand bank accounts, built to replace exporting CSVs and paying for a subscription app. It opens straight onto the month's transactions, already sorted.

The idea

The look is borrowed from business banking. A white canvas, hairline rules where another app would draw a box, and no shadow on anything. Blue is spent only on the primary action and on whatever is currently selected, so it still means something by the fourth screen. On a phone the navigation becomes a floating glass capsule that slides away at the foot of a page, so the last row is never covered.

Money is the product here, so the numbers are set with care. Figures are tabular, cents sit above the line at just over half size, and each amount counts up from zero as its row arrives. Income is green. Expenses are ordinary ink rather than red, since red is for things that went wrong and a flat white isn't one.

How it's built

• React and TypeScript on Vite, with MUI carrying the theme.
• Firebase for sign in and Firestore for storage.
• Transactions sync from my bank through Akahu, the local open banking service.
• Two serverless functions on Vercel hold the Akahu and Claude keys.

Fixing a guess

A set of rules gives every transaction a category on the way in. Correcting one opens a sheet from the bottom edge rather than a dialog in the middle of the screen. It also spots recurring charges and totals up the subscriptions.

Where the keys live

The bank tokens never reach the browser. A serverless function holds them and checks my Firebase token before it answers. The reports page asks Claude for a summary of the last few months, and the answer streams in as it is written.