Book 3 · Chapter 2: Your First Build
This page is a working budget tracker you can use right now, plus three starter briefs and a guide to what your builds remember.
This page assumes you've read the chapter. It hands you the tools, not the lessons.
Budget Tracker
The exact build the chapter walks through, live. Add a few expenses and poke it, then go build your own. Your data lives in this browser and nowhere else.
Month so far
Total spent
$0
Budget remaining
$3,000
Used
0%
Spending by category
Add an expense and the breakdown appears here, sorted by spend.
Your data lives in this browser and nowhere else. It is saved on this device only, never sent anywhere. Clear your browser data or hit reset and it is gone.
The brief that built this
- The brief that built this
Build me a monthly budget tracker. I want to enter expenses with a date, category (groceries, dining out, transport, entertainment, bills, other), and amount. Show me a summary of spending by category with a bar chart, total spent this month, and a simple table of all entries. Make it clean and easy to use.
Starter briefs at 3 levels
- Level 1: A Personal Tracker (15 minutes)
Build me a client contact log. I want to record who I talked to, when, what we discussed, and what the follow-up is. Show me a single clean page with everything in a table I can scan and search. Make it clean and easy to use.
- Level 2: A Calculator or Estimator (25 minutes)
Build me a monthly budget tracker. I want to enter expenses with a date, category (groceries, dining out, transport, entertainment, bills, other), and amount. Show me a summary of spending by category with a bar chart, total spent this month, and a simple table of all entries. Make it clean and easy to use.
- Level 3: A Multi-Section Dashboard (35 minutes)
Build me a project status dashboard with three sections: a timeline view, risk indicators, and team workload. I want one page that gives me the complete picture at a glance. Make it clean and easy to use.
- Add this to every build (make your data stick)
Make sure my data saves between sessions. If I close my browser and come back tomorrow, my expenses should still be there.
Persistence gotchas FAQ
- Why did my tracker forget everything?
- Persistence only kicks in once the tool is running as a file in your own browser. The reliable way to use it day to day is to open the saved HTML file from your workspace folder (double-click it) and use it there. Don't judge persistence by clicking around the preview window while you're still building. Save the file, open it in your browser, and that's where your data sticks.
- What survives a refresh or a closed browser?
- When you ask for persistence, Claude saves your data in your browser's local storage on the machine where you use the tool. It survives refreshes and closing the browser on that computer. The data lives in the browser, not in the file itself.
- When should I ask for file-backed storage instead?
- Browser storage is the right default for the personal and small-team tools you're building here. A step up is having the tool read and write a JSON or CSV file in your workspace folder, handy when you want data you can open, back up, or move yourself. A real database is for when many people share the same live data, which is beyond what these builds need. If browser storage stops being enough, describe the bigger need and Claude picks the mechanism.
- If I send someone the HTML file, can they see my data?
- The data you enter is stored in your browser's local storage, not in the file. Whoever you send it to sees what you built into the tool, but not the data you entered afterward in your own browser. A shared HTML file is like a shared Excel file: others see what's in it.