A two-profile household budget planner with shared-home expense splits, monthly rollover, locale-aware demo data and a strict prod/demo split. Fully trilingual (TR · EN · DE). Built end-to-end on a modern, type-safe stack and deployed behind a Cloudflare Tunnel.
A password-gated production app for one real family and a public showcase with hardcoded sample data — the same TypeScript codebase serves both, with a hostname-aware demo overlay that locks down all writes.
Each spouse has their own income and expenses, the household has shared expenses split 50/50. Owner cards show "Own + Home share" so each person sees what they actually carry.
Fixed expenses and recurring income forward each month with status reset; one-off entries drop. Installments, annual payments and savings goals are amortised so monthly totals never lie.
Yearly bills (Versicherung, Vignette, ÖAMTC) and multi-month installments contribute to the monthly view at amount / N, with a "Due tomorrow" widget that filters out past payment days.
589 typed locale keys across Turkish, English and German with parity-locked dictionaries. Hostname picks the default locale (demo → EN, prod → TR) and a single button switches it live.
The public showcase shares the codebase but never the data: a server-side isGuest flag rejects every mutation, and a locale-aware overlay rewrites demo item names per language without touching production family data.
Installable on iOS, Android and desktop. Workbox runtime: network-first HTML so deploys propagate fast, stale-while-revalidate for static assets, with skipWaiting + clientsClaim on every release.
Net change, savings rate, top spending category, who carries what, what's due tomorrow — one screen, no drilling. Fixed-position locale popover and dark/light themes baked in.
June 2026 · Viewing as Lukas
An interactive recreation of the live dashboard — the deployment runs at demo.aileplan.uk.
589 typed dictionary keys, parity-locked across TR · EN · DE. Hostname picks the default locale; one button switches it live across every surface — including category names, status badges and even the Porsuk cat mascot.
Toggle the flag above — every leaf updates in place.
useMemo deps wired to i18n.language so memoised category names re-render on locale switch.useFormatters hook — no regex parsing.Each tab below recreates a real page. Switch between them — the same interactions exist in the deployed product.
Real-time aggregates over the family budget — incomes, expenses, installments, annual payments and budget limits all flow into one set of numbers per profile.
Three tabs in one page: Income, Expense, Budget Limits. Each entry has owner (Lukas/Anna/Home), type (Fixed/Variable), category + subcategory and a status (Paid/Pending/Overdue).
| Day | Item | Category | Amount | Status |
|---|---|---|---|---|
| 3 | Miete (Neubau 2BR) | 🏠 Housing | €950.00 | ● Paid |
| 12 | Wien Energie | ⚡ Utilities | €120.00 | ● Pending |
| 12 | Claude Pro | 🤖 AI | €22.50 | ● Pending |
| 17 | Eni Gas Station | ⛽ Fuel | €65.00 | ● Pending |
| 20 | Apotheke Burggasse | ⚕️ Pharmacy | €28.00 | ● Pending |
Active debts on the left, multi-month installments on the right. Installments amortise into the monthly view automatically.
| Item | Monthly | Months left |
|---|---|---|
| 📱 iPhone 13 (Drei Plan) | €100 | 10 / 12 |
| 💻 MacBook Air M2 (Apple Edu) | €100 | 20 / 24 |
| 🍽️ Geschirrspüler (Saturn 0%) | €100 | 2 / 6 |
| 🛋️ Sofa (XXXLutz) | €100 | 13 / 18 |
| 🚲 E-Bike (Radwelt) | €100 | 21 / 24 |
Month-over-month trend, top categories, biggest gainers/losers — driven by the same data source as the dashboard with locale-reactive labels.
isGuest flag set server-side from the request hostname — checked on every mutation.FORBIDDEN in demo mode; the UI hides destructive controls.server/demo/demoBudget.ts — never touches the production DB.noUnusedLocals + noUnusedParameters — builds fail on stale imports.force-with-lease rollback.launchctl kickstart); short downtime accepted.A monolithic TypeScript repo with shared types, deployed as a single process behind a Cloudflare Tunnel.
The screens above are an interactive recreation. Below are real, unedited captures from demo.aileplan.uk running on actual sample data — click any to enlarge.
Captured from demo.aileplan.uk · English locale · dark theme.
