Build Your First App in 30 Minutes with Vibe Coding

Most guides tell you about vibe coding. This one makes you do it. Open Bolt.new in another tab and follow along — we're building a real app together right now.

What We'll Build: a "Daily Quote" App

We're building a minimal daily quotes app. Simple enough to finish in 30 minutes. Useful enough that you'll actually keep it.

Features:

• Displays a random motivational quote each day
• User can click to get a new random quote
• User can "favorite" quotes to a saved list
• Favorites persist in localStorage
• Clean, shareable design that looks good on mobile

Minutes 1–5: Set Up Bolt.new

1. Go to bolt.new in your browser.
2. Sign up for a free account with Google (takes 30 seconds).
3. Click "New Chat" to start a blank project.
4. You'll see a prompt input box. That's your vibe coding terminal.

Minutes 6–12: Generate the App with One Prompt

Copy this exact prompt and paste it into Bolt.new:

Build a "Daily Quotes" web app with the following:

Tech: React + Tailwind CSS, no backend needed
Data: Include 30 hardcoded motivational quotes (author + text)

Features:
1. Show one quote per day (use date as seed for randomness)
2. "New Quote" button to get a random different quote
3. Heart button to save favorites to localStorage
4. Favorites tab to view saved quotes with ability to remove
5. Share button that copies quote text to clipboard

Design: Dark minimal aesthetic. Deep black background (#0A0A0F),
white text, soft green accent (#7CFC6E). Card-based layout centered
on screen. Large quote text, small author attribution.
Smooth hover and transition animations. Mobile responsive.

Hit Enter and watch Bolt generate your entire app in real time. This takes about 60–90 seconds.

Minutes 13–20: Iterate and Polish

Your first version is probably 80% there. Now refine with follow-up prompts:

If the design needs work:

The quote text is too small on mobile. Make it at least
20px on small screens. Also add more padding around the
card so it doesn't touch the screen edges.

If a feature is missing or broken:

The heart button is saving the quote but the Favorites
tab shows an empty list. Fix the favorites display to read
from localStorage and render each saved quote as a card
with a remove (X) button.

To add a finishing touch:

Add a subtle "copied!" toast notification that appears
for 2 seconds at the bottom of the screen when the user
clicks the Share button. Use a fade-in/fade-out animation.

Minutes 21–30: Deploy and Share

1. In Bolt.new, click the Deploy button (top right).
2. Connect your Netlify account (free — use your GitHub or Google).
3. Wait about 30 seconds for deployment.
4. You'll get a URL like daily-quotes-abc123.netlify.app.
5. Open it on your phone to confirm it's mobile-friendly.
6. Share it with someone — you just shipped a real product.

What to Build Next

Now that you've got the pattern down, try building something you actually want:

• A habit tracker for your morning routine
• A simple landing page for your side project
• A tool that solves a problem you have at work
• Browse our 50 prompt templates for more inspiration