A Day of Vibe Coding: Building a Real App

The Idea

It's Saturday, 1 PM. You want a personal movie watchlist — somewhere to track movies you want to watch, movies you've seen, and your rating for each one. You've looked at apps for this and none of them are quite what you want. So you're going to build it yourself, today, using AI.

Your tools: a browser and Claude.ai. Nothing else. No code editor, no terminal, no programming knowledge required.

Here's how the afternoon actually goes.

1:00 PM — The First Prompt

Notice what this prompt includes: what the app does (add, categorize, rate), what data it stores (title, year, status, rating), how it should look (dark design), and how data should persist (browser storage). Every detail you include is a detail AI gets right.

Claude generates an Artifact — a live, interactive preview right in the chat. You can see the app immediately. It has an input form, a list area, and a dark color scheme.

First impression: it works. You can add a movie, it appears in the list. But a few things aren't right.

1:15 PM — The First Round of Fixes

You click around and find three issues:

• The star rating is just a number dropdown — you wanted clickable stars
• There's no way to delete a movie you added by mistake
• The "year" field accepts any text, not just numbers

That last line — "Only make these changes. Don't modify anything else" — prevents AI from "improving" parts you're happy with. Without it, AI might rearrange the layout or add features you didn't ask for.

The updated version appears. Stars work, delete works, year validation works. On to the next round.

1:45 PM — Making It Look Better

The app functions correctly but looks basic. Time to improve the design.

This is a design-focused prompt. Notice it's specific about visual changes — "subtle border and rounded corners" rather than "make it look nicer." Specific descriptions produce specific results.

The result looks significantly better. The cards have depth, watched movies have a green checkmark, stars are gold, and the counter at the top gives a quick overview.

2:15 PM — Adding a Feature

The core app works and looks good. Now you want to add something that wasn't in the original description: filtering.

One feature, clearly described. AI adds the filters, they work, the counts update when you add or change movies. This took about 2 minutes from prompt to working feature.

2:30 PM — Something Breaks

You decide to add search. You ask for a search bar that filters movies as you type. AI adds it — but now the filter buttons and the search bar conflict. If you filter to "Watched" and then search, the search ignores the filter and shows results from all movies.

This is normal. When AI adds a new feature, it doesn't always consider how it interacts with existing features.

This fix works. The key was describing the expected behavior precisely: "filter within the currently selected category." If you'd just said "fix the search," AI might have interpreted the problem differently.

3:00 PM — Testing Everything

Two hours in, the app has grown. Before adding more features, it's time to test what exists:

• Add 5-6 movies. A mix of watched and unwatched. Do they all appear? Are they sorted correctly?
• Rate some movies. Click stars to rate. Click again to change. Do the ratings save?
• Use the filters. Does each filter show the right movies? Do the counts match?
• Search. Does it find movies by title? Does it work with filters active?
• Delete a movie. Does the confirm dialog appear? Does the count update after deletion?
• Refresh the page. Is everything still there? This tests whether browser storage is actually working.
• Try to break it. Add a movie with a very long title. Add a movie with just spaces. What happens?

The refresh test reveals a bug: the ratings are saved, but when the page reloads, the gold star icons show the wrong number of stars. The data is correct but the display is wrong.

That's a good bug report: what you did (refreshed), what you expected (correct stars), what actually happened (wrong display), and an additional observation (data is correct, display is wrong). AI fixes it in one round because the description was precise.

3:30 PM — The Final Touches

The app is solid. A few polish items:

4:00 PM — Saving Your Work

The app is done. You've tested it, it works, it looks good. Now save it.

In Claude, click the code view of the Artifact and copy the entire contents. Open any text editor on your computer (Notepad on Windows, TextEdit on Mac — set to plain text mode), paste the code, and save it as watchlist.html.

Double-click the file to open it in your browser. Your app runs locally, with all the features you built. Your data saves to this browser, on this computer.

Total time: about 3 hours, including testing and fixing bugs.

What the Day Actually Felt Like

Here's the honest version of how this afternoon went:

The pattern is always the same: fast start, growing confidence, a frustrating middle section where things break, then a satisfying finish once you push through the bugs. This is normal. Every project feels like this — even for professional developers.

What You Learned

Even if you weren't trying to learn anything, you picked up several skills during this afternoon:

• How to write effective prompts — You learned that specific descriptions ("clickable gold stars") work better than vague ones ("make it look better")
• How to iterate — You didn't get it right on the first try. Nobody does. The skill is refining, not perfecting.
• How to describe bugs — "The stars display wrong after refresh" is useful. "It's broken" is not.
• How to constrain AI — "Only make this change" prevents AI from breaking things you already fixed.
• When to test — Testing after adding features (not just at the end) catches bugs early when they're easy to fix.
• How to save your work — Copy the code, save as HTML, open in browser. Simple but essential.

These skills transfer to every future project. The next thing you build will go faster because your prompts will be better from the start.