Building Your First App

Theory is done. Let’s build.

This lesson walks through building a complete web application from concept to working product, applying every prompting technique from the previous lesson.

🔄 Quick Recall: In the previous lesson, you learned four prompting techniques: specificity, context layering, stepwise prompting, and Research-Plan-Implement. Now you’ll put them all to work.

The Build Order

Every vibe coding project follows this sequence:

1. Concept → What are you building? For whom?
2. Layout  → Navigation, pages, overall structure
3. Core    → Main feature (the one thing the app does)
4. Support → Secondary features (auth, settings, search)
5. Polish  → Styling, responsive design, animations
6. Deploy  → Get it online

Never skip steps. Building features before layout means rebuilding the layout later. Polishing before features means re-polishing after changes.

Step 1: Define the Concept

Before writing any prompt, answer three questions:

• What does the app do? (One sentence)
• Who uses it? (Specific person, not “everyone”)
• What’s the minimum viable version? (Cut everything that’s not essential)

Example: “A bookmark manager for web developers that saves URLs with tags and lets you search by tag.”

Step 2: Build the Layout

Your first prompt should establish the full structure:

Build a bookmark manager app with this layout:

HEADER:
- App name "DevMarks" on the left
- Search bar in the center
- "+ Add Bookmark" button on the right

SIDEBAR (left):
- Tag filter list showing all tags
- Click a tag to filter bookmarks

MAIN CONTENT:
- Grid of bookmark cards
- Each card shows: title, URL (truncated), tags as colored badges, date added
- Click a card to open the URL in a new tab

MOBILE:
- Sidebar becomes a hamburger menu
- Cards stack vertically
- Search bar moves below the header

Use a clean, minimal design with a white background and subtle gray borders.

Test it. Resize the browser. Does the mobile layout work? Fix any issues before proceeding.

Commit it. If you’re using Cursor or Claude Code with git, commit this working layout. It’s your clean checkpoint.

✅ Quick Check: You built the layout but the sidebar doesn’t collapse on mobile. Should you fix this now or move on to features? (Answer: Fix it now. Layout problems compound — every feature you build on a broken layout creates more work later. Fix the foundation first, then build on it.)

Step 3: Build the Core Feature

The core feature is the one thing your app must do. For a bookmark manager, it’s adding and displaying bookmarks:

Add the ability to create new bookmarks:

When the user clicks "+ Add Bookmark":
1. Show a modal with fields: URL, Title, Tags (comma-separated)
2. When the URL is pasted, auto-fetch the page title if possible
3. Tags should appear as colored badges in an input field
4. Save button adds the bookmark to the grid
5. Cancel button closes the modal

Store bookmarks in the browser's localStorage for now.
Display them as cards in the main grid, sorted by date added (newest first).

Test it. Add 5-6 bookmarks. Do they persist after page reload? Do the tags display correctly?

Step 4: Add Support Features

One feature per prompt. Test between each:

Feature: Tag filtering

When the user clicks a tag in the sidebar, filter the main grid to show
only bookmarks with that tag. Highlight the active tag. Add an "All" option
at the top to show everything. Update the bookmark count next to each tag.

Feature: Search

The search bar in the header should filter bookmarks in real time as the
user types. Search across title, URL, and tags. Show "No results" with
a suggestion to clear the search if nothing matches.

Feature: Delete

Add a small "×" button in the top-right corner of each bookmark card.
Clicking it shows a confirmation: "Delete this bookmark?" with Cancel
and Delete buttons. Delete removes it from localStorage and the grid.

Each feature gets its own prompt, its own test, and (if using git) its own commit.

✅ Quick Check: You’ve built 3 features and feature #4 breaks the tag filtering you built earlier. What went wrong? (Answer: The new feature likely modified code that the tag filter depends on. If you committed after each feature, you can compare the diff to see what changed. If you didn’t commit, you’ll have a harder time isolating the problem — this is why checkpoints matter.)

Step 5: Polish

Only after everything works:

Polish the bookmark manager:
- Add a smooth fade-in animation when new cards appear
- Add hover effects on cards (subtle shadow + slight lift)
- Improve the color scheme: use indigo for primary actions,
  warm gray for backgrounds
- Add empty state: when there are no bookmarks, show a friendly
  message with an illustration suggestion and "Add your first bookmark" button
- Ensure all transitions are 200ms

Polish is satisfying but unimportant until features work. A beautiful broken app is still broken.

Step 6: Deploy

Most vibe coding tools include deployment:

• Lovable: Click “Publish” — it handles hosting
• Bolt.new: Download code and deploy to Vercel/Netlify
• Replit: Click “Deploy” — hosting included
• Cursor/Claude Code: Push to GitHub → connect to Vercel or Netlify

Help me deploy this app to Vercel:
1. What files need to be in the project root?
2. What build command should I use?
3. Are there any environment variables needed?
4. Walk me through the deployment steps.

The Full Build Timeline

For a simple app like this bookmark manager:

That’s the power of vibe coding. The app isn’t less functional — it’s built faster because AI handles the implementation while you handle the decisions.

Practice Exercise

Build one of these apps using the 6-step process:

1. Habit tracker — Daily habits with streak counting and a calendar view
2. Expense splitter — Add expenses, assign to people, calculate who owes whom
3. Flashcard app — Create decks, study with flip cards, track which cards you know

Follow the build order: concept → layout → core feature → support features → polish. Commit between each step.

Key Takeaways

• Follow the build order: layout → core → support → polish → deploy
• One feature per prompt — test between each
• Create git checkpoints before adding each new feature
• Fix layout issues before building features on top of them
• Save polish for last — it’s fast to add and distracting to debug
• Most vibe coding tools include one-click deployment

Up Next

In the next lesson, you’ll learn to debug AI-generated code — because things will break, and knowing how to fix them quickly is what makes vibe coding actually work.