Build guide

I Built a Real App in 4 Hours (For $12)

SpendSheets, a live public web app that turns credit card CSV exports into categorized tables, charts, and a monthly PDF.

Claude CodeNetlify
Apr 20, 2026
Optimized for

What you'll build

SpendSheets (https://spendsheets.com) - a live, public web app that turns your raw credit card CSV exports into a categorized pivot table, a pie chart, an AI spending summary, and a PDF you can save down every month. No accounts, no database - transactions are parsed in your browser and the only place the data touches is Anthropic's servers (same as any Claude or ChatGPT conversation you already have). The whole thing went from shower idea to production - clean UI, animations, public domain - in 4 to 5 hours, and the only real cost was the $12/year domain.

More importantly: the exact pipeline I used, so you can take any idea you've been sitting on and ship it the same way.

What you'll need

Step 1: Start with a problem you already solve manually

My old system: download the CSVs from five different credit cards, paste everything into a Google Sheet, manually categorize every transaction, build a pivot table, then write insights comparing months. 2-3 hours at the end of every month. I'd already automated it for myself inside Claude Code (my Jarvis agent runs a finance summary and dumps the report into Notion) - but most people don't have a system at all. That gap is the app. If you're doing something tedious by hand, someone else is too.

Step 2: Ramble the full idea into Claude

I almost added this to my project dashboard to "build another day." Instead I opened regular Claude in the browser, made a new project, and just talked at it for 5-10 minutes with Wispr Flow - every idea from the shower, the layout I wanted (I was mimicking a NerdWallet/Plaid feel), what it should connect to, all of it. Structure and context first, code later.

Step 3: Draft the UI in v0 - then bail at the paywall

I told Claude to turn my ramble into a prompt I could feed v0 (Vercel's UI generator) to generate a UI outline. v0 drafted something very close to the final design. Then it hit a paywall - pay more for iterations and publishing. I could technically have built the whole thing there, but I wasn't adding a subscription. The draft was all I needed.

Step 4: Screenshot the UI and rebuild it in Claude Code

I screenshotted every screen of the v0 design, tossed the screenshots into Claude Code, and said:

Hey, just rebuild this completely.

And that's exactly what it did.

Step 5: Steal your animations from 21st.dev

The sparkle, the little robot that moves around, the flipping card - all from 21st.dev, where UI designers post the templates they actually use. You copy the prompt for a component and paste it into Claude Code, and it edits your site with it. A genuinely custom-looking site by copy-paste.

Step 6: Build the parser - the actually hard part

The real work was extracting transactions from different banks and normalizing them, because every issuer formats CSVs differently. Chase reports payments as negatives (-$10); Amex reports them as positives. You have to spell that out: "this is how Chase does it, this is how Amex does it - parse them into one standard format."

Step 7: Split the parsing across multiple agents

When you upload four CSVs, a separate agent parses each one instead of one agent doing all four. Reason: tokens. If one agent chews through everything, the context runs up fast and results degrade - the first ~50k tokens of a context window is where the model is sharpest, so you want each task finished inside that zone. (Same reason your CLAUDE.md should stay minimized and compact.) Speed is key, but you also get better categorization quality and cheaper insights. The agents' outputs merge into the pivot table, pie chart, and final report.

Trust check, because I know it's the first question: there's no database. I'm not collecting transactions and selling them to Amex. Everything is parsed in the browser, the only server the data touches is Anthropic's, and the entire site is public on my GitHub so you can verify it - or rebuild it yourself by tossing the repo into Claude Code. If you're not comfortable, completely fine to skip it.

Step 8: Deploy - GitHub to Netlify

Push the code to GitHub, host on Netlify (free - it's also where my personal AI Waterside site lives). With the two connected, changes are conversational: I tell Claude Code "change the header" or "change 'no account required' to 'account required'," it pushes to GitHub, Netlify picks it up, and it's live within seconds.

Step 9: Buy the domain and connect it

Namecheap or GoDaddy. spendsheets.com was about $12 a year. Connecting it to Netlify is two steps, and you can literally ask Claude or ChatGPT to walk you through them.

Step 10: Add free analytics and a cost alarm

I added Umami - a free analytics tool on the backend - so I can see whether people are actually using it or hitting errors (no data on who, just usage). The app runs on my Anthropic API key and costs me a penny to a nickel per run, so it stays free; I get an alert if usage ever runs the bill toward $100, and only then would I consider charging.

The math

$12 to ship. Pennies per user. No recurring SaaS fees - compare that to Monarch or Copilot. They do more, sure, but the annual cost of this is nothing.

Timeline: ~1 hour of ideation, ~1 hour building, ~2 hours deploying, 10 minutes on the domain, 10 minutes on analytics. Idea to live product in hours - not weekends, not quarters. I'm a finance major, not a developer. You don't need a UI expert or a backend engineer anymore. You need an idea. Good luck and happy building.

Resources

Some links in this guide are affiliate links. They cost you nothing and support the free guides.

← Back to the library Good luck and happy building