From Prototype to Production

Your prototype works. On your machine. With perfect input. On a fast connection. Production is different — real users do unexpected things, connections drop, and edge cases surface.

This lesson teaches you to bridge the gap between “it works” and “it works for everyone.”

🔄 Quick Recall: In the previous lesson, you learned to debug AI-generated code using error reading, rollbacks, and fresh conversations. Now you’ll apply those skills while upgrading your prototype for real users.

The Production Gap

Step 1: Add a Real Database

Most vibe-coded prototypes start with localStorage. Move to a real database:

I need to migrate my bookmark manager from localStorage to Supabase.

Current data structure in localStorage:
- bookmarks: array of {id, title, url, tags, createdAt}

Please:
1. Create the Supabase table schema
2. Replace all localStorage reads/writes with Supabase queries
3. Keep the same UI behavior — the user shouldn't notice the difference
4. Add loading states while data fetches
5. Handle errors (show a message if the database is unreachable)

Why Supabase? It’s free to start, has a generous free tier, works well with AI tools, and handles authentication too.

✅ Quick Check: After migrating to Supabase, your bookmarks load with a 1-2 second delay (they used to load instantly from localStorage). Is this a bug? (Answer: No — this is expected. localStorage reads are instant because data is on your device. Database queries travel over the network and take time. That’s why you add loading states — show a spinner or skeleton UI while data fetches, then display the content.)

Step 2: Add Authentication

Protect your app so each user sees only their data:

Add Supabase authentication to my bookmark manager:

1. Create signup page (/signup) with email and password fields
2. Create login page (/login) with email and password
3. After login, redirect to /dashboard
4. Protect /dashboard — redirect unauthenticated users to /login
5. Filter bookmarks by the logged-in user's ID
6. Add a "Log out" button in the header
7. Add Row Level Security to Supabase so users can only
   read/write their own bookmarks

Row Level Security (RLS) is the critical piece — it prevents one user from accessing another’s data at the database level, not just the UI level.

Step 3: Add Error Handling

AI-generated code often handles only the “happy path.” Add error handling for every failure mode:

Add comprehensive error handling to my app:

1. Network errors: show "Unable to connect. Check your internet and try again"
   with a retry button
2. Auth errors: redirect to login if the session expires
3. Form validation: show inline errors for invalid email, short password,
   empty required fields
4. Loading states: show skeleton UI while data loads
5. Empty states: show a friendly message when there are no bookmarks
6. 404 page: show a helpful page for invalid URLs

Error handling checklist:

• Every API call has a try/catch
• Every loading state has a spinner or skeleton
• Every form has validation before submission
• Every error shows a human-readable message (not a stack trace)

Step 4: Make It Responsive

Test on multiple screen sizes and fix issues:

Review my app's responsive design and fix these issues:

1. On mobile (< 640px): sidebar should be hidden by default,
   accessible via hamburger menu
2. On tablet (640-1024px): sidebar should be collapsible
3. On desktop (> 1024px): sidebar always visible
4. Cards should go from 3 columns (desktop) to 2 (tablet) to 1 (mobile)
5. Touch targets (buttons, links) should be at least 44px on mobile
6. Modal dialogs should be full-screen on mobile, centered on desktop

✅ Quick Check: You tested your app on your phone and the text is tiny and buttons are too small to tap. What’s the likely cause? (Answer: Missing viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">) and/or fixed pixel sizes instead of responsive units. Ask the AI to check the viewport tag and convert any hardcoded pixel sizes to responsive values.)

Step 5: Security Review

Ask the AI to audit the code it generated:

Review my app for security vulnerabilities:

1. Is user input sanitized before database queries?
2. Are API keys exposed in client-side code?
3. Is Row Level Security properly configured in Supabase?
4. Are there any XSS vulnerabilities (unsanitized HTML rendering)?
5. Is authentication properly checked on every protected route?
6. Are passwords stored securely (not in plain text)?

Common vibe coding security issues:

• API keys hardcoded in front-end code (move to environment variables)
• No input sanitization (users could inject malicious content)
• Missing auth checks on routes (users could access protected pages by typing the URL)
• Overly permissive database rules (users could read other users’ data)

The Production Readiness Checklist

DATABASE:
□ Real database (not localStorage)
□ Data backed up or recoverable
□ Row Level Security enabled

AUTHENTICATION:
□ Login/signup working
□ Session persistence (stay logged in on refresh)
□ Protected routes redirect unauthenticated users

ERROR HANDLING:
□ Loading states for all data fetches
□ Error messages for network failures
□ Form validation on all inputs
□ Empty states for no-data scenarios

RESPONSIVE:
□ Works on mobile (320px+)
□ Works on tablet (768px+)
□ Works on desktop (1024px+)
□ Touch targets are large enough (44px+)

SECURITY:
□ No API keys in client code
□ Input sanitization
□ Auth checks on protected routes
□ HTTPS enabled (most hosts do this by default)

Practice Exercise

Take the app you built in the previous lesson and production-harden it:

1. Migrate from localStorage to Supabase (free tier)
2. Add email/password authentication
3. Add error handling for at least 3 failure modes
4. Test on your phone — fix any responsive issues
5. Run through the security review prompt

Key Takeaways

• The production gap is real: localStorage → database, no auth → user accounts, happy path → error handling
• Supabase is the easiest path from prototype to production (free tier, auth included, AI-friendly)
• Error handling is the #1 production requirement — users should never see a blank page
• Always test on mobile — most vibe-coded prototypes break on small screens
• Security review is non-negotiable before sharing with real users
• AI gets you 70% — the last 30% is production hardening

Up Next

In the next lesson, you’ll learn advanced vibe coding patterns — rules files, multi-file projects, API integrations, and when to hand-code instead of prompting.