Build a Real Mini-App: The Idea Board
From Page to App
Everything you've built so far was a page — it looked great, it reacted to clicks, but it forgot everything the moment you refreshed. Today that changes. You're building your first real app: data goes in, data gets shown, and data is remembered.
That's the whole secret of apps, by the way. Three moves:
- Data in — an input where the user types something
- Data shown — a list that updates on screen
- Data remembered — storage, so it's still there tomorrow
When you vibe code, you don't describe the wiring — you describe the flow. Here's the kind of prompt that builds today's project:
"A box where I type an idea, a button that adds it to a list below, and the list should still be there when I come back tomorrow."
That one sentence tells the AI everything: it needs an input, a button with a click listener, a list it appends to, and localStorage for the "tomorrow" part. You describe the flow, AI handles input + list + storage.
The app you're building is an Idea Board — a place to capture every "wait, I could build that with AI" moment you have from now on. Trust me, after this course, you'll have a lot of them.
Instructions
Add an <input id="idea-input"> with a placeholder — this is where ideas come in
Hint: Try: `<input id="idea-input" type="text" placeholder="I could build..." class="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm">`
Add a <button id="add-btn"> next to the input — the trigger that adds an idea
Add an empty <ul id="idea-list"> below — this is where ideas get shown
In the <script>, listen for clicks on #add-btn: create an <li> with the input's value, append it to the list, then clear the input
Make it remember: save the ideas array to localStorage("vca-ideas") on every add, and load + show saved ideas when the page opens
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Add an <input id="idea-input"> with a placeholder — this is where ideas come in