Making Montrack Real
The story of turning a personal budgeting problem into Montrack — a digital envelope-budgeting app, rebuilt in 2026 through an AI-assisted (vibe coding) workflow and now being validated with real users.
Making Montrack Real
From a personal budgeting problem to a working envelope-budgeting app — built, shipped, and now being validated with real users.
TL;DR
Montrack replaces scattered, inconsistent personal budgeting habits — physical envelopes, half-tracked spreadsheets, an app bought out of desperation — with a digital envelope system built around Indonesia's payday-to-payday budgeting cycle. The first version stalled at a Figma prototype in 2023. In 2026, it was rebuilt and shipped solo through an AI-assisted ("vibe coding") workflow — Figma → Builder.io → GitHub → Zed with the opencode agent → Vercel. There's no completed validation data yet — that's the current phase, running through structured interviews and a short survey before any monetization decision gets made.
- Role: Solo — problem discovery, product direction, full-stack build
- Tools: Figma, Builder.io, GitHub, Zed (opencode agent), Supabase, Vercel
- Duration: 2023 Figma prototype (stalled) → rebuilt and shipped 2026
Context
Montrack started as a personal problem, not a client brief. As a student living off a fixed allowance, finding a budgeting method that actually stuck became a years-long trial-and-error process — one that eventually turned into a real product.
This wasn't built for a client or a market first — it was built to solve my own budgeting problem, tested on myself before anyone else.
Problem
None of the available options actually solved the core problem: something simple enough to stick with, structured enough to actually prevent overspending.
Insights
Pain Points
Constraint
- Solo builder — no team, no external funding
- Budget limited to essentials — just enough for a domain
- No formal usability testing infrastructure — validation has to happen through direct interviews and real usage, not a research team
Attempt #1 — The 2023 Case Study
The first real attempt to solve this happened as a formal design case study: a short user survey, a defined problem statement, a persona, and a proposed direction built around habit-formation — nudges, badges, and goal-setting aimed at fighting forgetfulness and impulsive spending.
2026 — The Pivot
Coming back to the problem in 2026, the direction changed. Instead of a habit-coaching app with gamification, Montrack became a pure digital envelope system — closer to the original amplop/dompet budgeting method, rebuilt for a phone. No nudges, no badges — just kantong (pockets), a budget, and a clear sense of what's left.
The starting requirement was deliberately narrow: solve it for one user first — myself.
Approach — A Vibe Coding Workflow
The build ran through a chain of AI-assisted tools rather than a single framework:
- Figma, refined — the old case study file was reworked to match the new envelope-system direction
- Builder.io — used to translate the design into a working front end
- Figma-to-Builder.io plugin — bridged the design file directly into Builder.io's visual editor
- Exported to GitHub — the generated code was pushed to a repository as the real codebase
- Zed + the opencode agent — the heaviest lifting happened here: wiring up Supabase, writing Server Actions, fixing what the export didn't get right, and extending features the visual export couldn't handle
- Deployed to Vercel — connected for continuous deployment straight from the repository
Solution
The result is a working envelope-budgeting app, built around a payday-to-payday cycle:
Kantong (Pockets)
Budget categorized into pockets with 3 types — flow (routine), event (one-off), reserve (buffer) — mirroring how envelope budgeting actually gets used, not a generic category list.
Transaction Logging
Expense-only by design — no income tracking, because the budget is already fixed at the start of the cycle.
Ringkasan (Summary)
Weekly summary, budget progress, and recommendations — a running answer to "how am I doing this cycle," not just a transaction history.
Result
This case study will be updated as that validation plays out.
Learning
This project pushed the work past pure UI/UX design into owning a full build end-to-end — problem framing, product direction, and shipping something used daily, not just prototyped. The Figma → Builder.io → GitHub → Zed workflow showed where AI-assisted tools genuinely compress time (scaffolding, boilerplate, wiring) and where they don't (judgment calls about what the product should actually do) — that gap is exactly where the manual work in Zed happened.
Live demo: montrackv2.vercel.app/demo
