VibeCoding Live #4: How I Went from Broken Demo to Live App in 10 Minutes
TL;DR: Week 1 of building a screenshot app from idea to revenue. Today's discovery: build one feature at a time with dead-simple prompts. We went from broken app to deployed on Cloudflare in one session. These are my current tool recommendations - they might change as I test more.
Last week, I built a screenshot app that had everything - custom colors, rounded corners, beautiful UI. It looked amazing. It also didn't work.
The image download? Broken. The fancy features? Useless when the core functionality was dead. Classic AI coding fail.
That's when it hit me: I'd been doing vibe coding all wrong.
🧠 The Million Dollar Discovery: One Feature, One Prompt
Here's what changed everything: When you build with AI, incremental steps aren't just better - they're the only way that actually works.
Think about it like this: LLMs are like brilliant junior developers who get overwhelmed with complex specs. Give them one clear task, and they nail it. Give them ten features at once, and you get beautiful garbage.
So I tried again with the world's simplest prompt:
"Build a screenshot app. Upload an image. They can customize colors. That's it."
Ten minutes later? Working app. No broken features. No mysterious bugs.
🏆 The Tool Wars: Why You're Wasting Money (For Now)
After testing Cursor, Windsurf, Gemini Flash CLI, and every other "revolutionary" AI coding tool, here's the truth bomb: They're all using Claude under the hood, and Claude beats everyone at web coding.
⚠️ Disclaimer: This is what I've found SO FAR. Next week I might discover something that changes everything. That's the point of doing this live.
You've got developers subscribing to:
ChatGPT Plus ($20/month)
Cursor ($20/month)
Some other random AI tool (~$20/month)
That's $60+ monthly for what? The same Claude API wrapped in different UIs.
The Only Two Tools Worth Your Money (This Week):
Claude Code - Best for serious development (once you get over the terminal fear)
Lovable - Perfect for visual builders and quick prototypes
Everything else is expensive gift wrapping on the same present. But hey, I might be wrong - we'll find out together.
📝 The Simple Prompt Revolution
Here's exactly how I rebuilt that broken screenshot app:
Step 1: Start Stupidly Simple (Lovable)
Prompt: "Build a screenshot app that customizes colors"
Result: Basic app that actually works
Time: 2 minutes
Step 2: Iterate on Design Only (Google Stitch)
Prompt: "Update the design to match this [screenshot]"
Result: Better looking app that still works
Time: 1 minute
Step 3: Steal Inspiration (Legally) (Lovable)
Prompt: "Take inspiration from MagiShot.app"
Result: Professional UI without breaking functionality
Time: 2 minutes
Step 4: Add ONE Feature (Lovable)
Prompt: "Add more color options"
Result: Enhanced app, still working perfectly
Time: 30 seconds
Total time: Under 10 minutes. Zero broken features.
The secret? I never asked for more than one thing at a time. Each prompt focused the AI on a single, completable task.
🚀 Publishing to Production: The Cloudflare Way
If I publish on Lovable, it's fairly simple, of course, right? We've done this before. But Lovable hosting costs money and has limits. So let me show you the free way that actually scales.
🤔 What's Cloudflare?
Think of it as the world's biggest copy machine for websites. Instead of your website living on one computer, Cloudflare copies it to 300+ computers around the world. When someone visits your site, they get it from the closest copy. Result? Your site loads in 0.5 seconds instead of 3 seconds. And it's FREE for most use cases.
📌 Step 1: Connect to GitHub
🤔 What's GitHub?
It's like Google Drive but for code. Every time you save in Lovable, it automatically backs up your code to GitHub. This is important because Cloudflare needs to read your code from somewhere.
Connect GitHub → Connect a project → Select your GitHub account
Done. If I go to GitHub now, perfect. Here's my project, right?
📌 Step 2: Domain Setup First
🤔 What's DNS?
It's like your website's phone number. When someone types "wowscreenshots.com", DNS tells their browser where to find your website. We're going to set up a fake address that Cloudflare will intercept.
⚠️ Critical DNS Setup:
Type: A
Name: @ (or your subdomain)
Value: 192.0.2.1
Proxy status: Enabled (orange cloud ON)
Why these weird settings?
The 192.0.2.1 is a fake address (like using 555- in movie phone numbers)
The orange cloud means "Cloudflare, handle this for me"
This trick lets us use Cloudflare's free features
This is very important. This is a very, very important piece. You set up a type A, you set up a value, and here's exactly what it looks like:
Type: A record
Name: wild screenshots (or @)
IPv4 address: 192.0.2.1 (this is a dummy IP for proxy-only setups)
Proxy status: Must be ON (orange cloud)
The 192.0.2.1 IP is a placeholder - Cloudflare will never actually route to it. The orange cloud MUST be on for Workers to intercept requests.
📌 Step 3: Cloudflare Pages Setup
🤔 What's Cloudflare Pages?
Remember how Lovable shows you a preview of your app? Cloudflare Pages does the same thing but for the whole internet. It takes your code from GitHub, builds it into a website, and serves it to the world. FOR FREE (up to 500 builds/month).
Go to Cloudflare Dashboard > Pages
Click "Import existing Git repository"
Select your GitHub account and repository
Configure build settings:
Production branch: mainBuild
command: npm run buildBuild output
directory: dist
What do these mean?
Build command: The instruction that turns your code into a website (like "bake at 350°")
Output directory: Where the finished website files go (like "cooling rack")
Production branch: Which version of your code to use (like "final recipe")
📌 Step 4: The Reverse Proxy Setup (Advanced)
🤔 What's a Worker?
Think of a Worker as a smart receptionist for your website. When someone visits your site, the Worker answers first and can:
Fix messy URLs (remove those ugly trailing slashes)
Create instant pages (like robots.txt for Google)
Show custom 404 error pages
Make your site look more professional
Instead of just connecting domain directly, I'm gonna set up a worker. This is a little bit more complex, but just stay with me here.
Why bother with this?
Without a Worker: valvescreenshots.com/about/ (ugly slash at end)
With a Worker: valvescreenshots.com/about (clean!)
Plus you get SEO files automatically, custom error pages, and a bunch of other pro features.
Create the Worker:
export default {
async fetch(request, env) {
const url = new URL(request.url);
// Your Cloudflare Pages URL
const PAGES_URL = 'https://your-project.pages.dev';
// Handle trailing slashes
if (url.pathname !== '/' && url.pathname.endsWith('/')) {
url.pathname = url.pathname.slice(0, -1);
return Response.redirect(url.toString(), 301);
}
// Create new request with Pages URL
const modifiedRequest = new Request(PAGES_URL + url.pathname + url.search, {
body: request.body,
headers: request.headers,
method: request.method,
});
// Fetch from Pages
const response = await fetch(modifiedRequest);
// Handle 404s with custom page
if (response.status === 404) {
return new Response('Custom 404 Page', {
status: 404,
headers: { 'Content-Type': 'text/html' },
});
}
// Special routes
if (url.pathname === '/robots.txt') {
return new Response(`User-agent: *\nAllow: /\nSitemap: ${url.origin}/sitemap.xml`, {
headers: { 'Content-Type': 'text/plain' },
});
}
if (url.pathname === '/sitemap.xml') {
return new Response(generateSitemap(url.origin), {
headers: { 'Content-Type': 'application/xml' },
});
}
// Return the response
return response;
},
};
function generateSitemap(origin) {
return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>${origin}/</loc>
<lastmod>${new Date().toISOString()}</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
</urlset>`;
}
Deploy the Worker:
Go to Workers & Pages > Create Application > Create Worker
Name it "reverse-proxy"
Paste the code and deploy
Go to Settings > Triggers > Add Custom Domain
Add route:
yourdomain.com/*or*.yourdomain.com/*
This worker does a couple of things, basically. It will make sure that when you start writing landing pages for this website, it will handle everything automatically. Clean URL handling, trailing slashes, redirect to 301, it will do all of that exactly. Custom robots.txt, even sitemap. All the file extensions, custom 404, like it did literally all of that stuff.
🐛 When Shit Breaks: The Debug Playbook
🤔 What's debugging?
It's like being a detective for your broken website. Something's not working, and you need to find out why. Good news: it's usually something simple.
The Screenshot Trick That Saves Hours
Screenshot your Cloudflare build settings
Drop into Claude/Cursor
Say: "Check if these settings are correct for a Vite React app"
Apply fixes
Why this works: Claude can spot typos and wrong settings faster than you can. It's like spell-check for your deployment settings.
90% of deployment issues are just wrong build commands or output directories.
Common Fixes That Actually Work
Build failing?
// vite.config.js - This fixes most issues
export default {
build: {
outDir: 'dist',
sourcemap: false, // Faster builds
rollupOptions: {
output: {
manualChunks: undefined // Prevents chunk errors
}
}
},
base: '/' // Critical for routing
}
🤔 What's this config file?
It's like settings for your app. Just copy-paste this into a file called vite.config.js if your build fails. It tells Vite (the tool that builds your app) exactly how to package everything.
Git being weird?
# The nuclear option that always works
git add .
git commit -m "fix: whatever"
git push --force-with-lease origin main
🤔 What are these commands?
git add .= "Save all my changes"git commit= "Label this version"git push= "Upload to GitHub"--force-with-lease= "Overwrite what's there (carefully)"
Just copy-paste these commands when Git complains.
Environment variables missing?
# Add to Cloudflare Pages settings:
NODE_VERSION=18.17.0
NPM_VERSION=9
💰 The Hidden ROI: Good Names = Free Traffic
Side discovery: I bought wowscreenshots.com and got organic traffic within a week. Zero marketing. Zero SEO. The domain name itself had search volume.
Lesson: A good domain name is worth 100 hours of SEO work.
🎯 The Vibe Coding Manifesto
One feature per session - Complexity kills AI coding. Like teaching a toddler - one thing at a time.
Simple prompts dominate - If it takes a paragraph to explain, it's too complex
Claude or bust - Stop paying for wrappers. It's like buying bottled tap water.
Ship broken, fix later - But only break one thing at a time
Terminal fear is temporary - Claude Code is worth learning. It's just typing commands instead of clicking buttons.
🔮 Next Week: Database + Auth (Session #5)
Right now anyone can use our screenshot app for free and nothing gets saved. Next week we're adding the two things that turn a toy into a product: user accounts and a database.
In plain English: We're adding login buttons and a place to save everyone's screenshots.
Questions we'll tackle live:
Which auth solution actually works with AI coding tools?
Can Claude write secure database schemas or will we get hacked?
How do you add auth without breaking everything from Week 1?
Supabase vs Firebase vs rolling our own - what's the real answer?
What's the simplest stack that actually scales?
Time to see if Supabase lives up to the hype, or if we should just suffer through AWS...
The Bottom Line: AI coding isn't about writing perfect prompts or using expensive tools. It's about thinking in tiny, completable steps. Build like you're explaining to a five-year-old genius - one simple instruction at a time.
Stop overcomplicating. Start shipping.
📺 The Screenshot App Journey - Week 1 of 4
Week 1 (TODAY): Idea → Working app → Deployed to production ✅
Week 2: Database + Auth - Make it a real product
Week 3: [Probably payments or whatever's most broken]
Week 4: Get first paying customer 💰
This is Session #4 of VibeCoding Live, but Week 1 of our screenshot app journey. Every Sunday we build live - making mistakes, changing opinions, and learning in public.
What I Think I Know: One feature at a time beats complex prompts
What I'll Probably Learn: Everything breaks when you add auth
Join Live: Sundays at [8:30AM PST] on [Zoom]
Today's Deploy: [wowscreenshots.com]
Next Week: Watch me probably break everything adding user logins
Got different experiences with these tools? Tell me below - I'm literally learning as I go. See you next Sunday when we turn this public app into something people can actually sign up for!