Taking a Vibe-Coded Prototype to Production: The Real Stack

Your Lovable or Bolt prototype runs in a sandbox with fake data and demo auth. Production means real users, real money, and real security. The UI code ships fine. The backend integrations need upgrades. I took a Lovable prototype live last month. Here's what actually changed.

Prototypes use hardcoded credentials, mock databases, and client-side secrets. Production isolates secrets in environment variables, uses persistent databases with backups, and routes sensitive operations through backend endpoints. Lovable's Pro plan at $25/month with unlimited build credits lets you iterate fast, but deployment is separate, you export to GitHub and host on Vercel, Netlify, or Replit.

Replit's Core plan at roughly $20/month includes deployments with about $25 in monthly credits, covering compute and autoscale. As of August 2026, Replit charges $0.60 per million compute units and $0.40 per million requests, down from earlier rates. Small apps stay under $10/month. If you're building in Replit directly, you can deploy from the same environment.

The big changes: swap demo auth for Clerk or Supabase Auth, replace in-memory or local storage with PostgreSQL or MongoDB, add Stripe for payments, and set up monitoring with Sentry or LogRocket. You're not rewriting, just plugging in production services where the prototype used shortcuts.

Check the live pricing index to compare deployment costs across Replit, Vercel, and Railway. For real-time pricing updates, the daily changelog tracks every rate change.

Demo auth in prototypes is a button that sets a fake user object. Production auth needs OAuth flows, session persistence, password resets, and security. I've shipped with Clerk, Supabase Auth, and Auth0. Here's what each handles.

Clerk is the fastest integration for Lovable or Bolt projects. Install @clerk/clerk-react, wrap your app in ClerkProvider, drop in SignIn and UserButton components, and you're live. Clerk handles OAuth (Google, GitHub, email), session management, user profiles, and webhooks. Free tier covers 10,000 monthly active users. After that, it's $25/month for 10,000 MAUs, then $0.02 per additional user.

Supabase Auth is cheaper at scale. Free tier includes 50,000 MAUs. You initialize the Supabase client, call supabase.auth.signUp or signInWithOAuth, and it returns a session. Supabase also gives you a PostgreSQL database in the same project, so you can store user data without a second service. The tradeoff: more setup than Clerk's pre-built components.

Auth0 works for enterprise requirements, SAML, custom domains, advanced MFA. Overkill for most MVPs. NextAuth.js (now Auth.js) is the open-source middle ground: you control the code, but you handle session storage and OAuth callbacks yourself.

In practice, I drop Clerk into Lovable prototypes because it takes 15 minutes. For projects that need a database anyway, Supabase Auth bundles nicely. Either way, you're replacing hard-coded user objects with real tokens, protected routes, and backend verification. The security guide covers the exact attack vectors demo auth leaves open.

Prototypes store data in React state or local arrays. Production needs a database that survives restarts, handles concurrent writes, and backs up automatically. PostgreSQL is the default. Here's how to connect it.

Supabase gives you a managed PostgreSQL instance, a REST API, and realtime subscriptions. Free tier includes 500MB database, 1GB file storage, and 50,000 MAUs. You create tables in the Supabase dashboard, install @supabase/supabase-js, and query with supabase.from('tasks').select('*'). Realtime updates come free, subscribe to table changes and your UI updates when another user edits a row.

Neon is serverless PostgreSQL with autoscaling and a generous free tier (512MB, 10GB storage). It separates compute from storage, so you only pay for active query time. Good for apps with spiky traffic. Connect via a standard PostgreSQL connection string. Neon also offers branching, every Git branch gets its own database copy for testing migrations.

Railway deploys PostgreSQL containers. $5/month gets you a production database with automated backups. You provision a Postgres service, Railway gives you a connection string, and you use Prisma or Drizzle ORM to define your schema. Railway also hosts your app, so you can run database and backend in one project.

Migration path: export your prototype's mock data to JSON, write a seed script, and insert it into the real database. Then replace your useState calls with database queries. Lovable-generated components usually use fetch, just point the endpoint at your Supabase or Railway backend instead of mock data. For comparison, Lovable alternatives shows which tools include backend scaffolding vs. frontend-only generation.

Stripe is the standard. You need a backend route to create payment sessions, a frontend checkout flow, and webhooks to handle post-payment logic. Here's the exact setup.

Install @stripe/stripe-js and @stripe/react-stripe-js in your project. Create a Stripe account, grab your publishable key (starts with pk_test) and secret key (sk_test). Store the secret key in an environment variable, never commit it. Add a backend route (Next.js API route, Replit Flask endpoint, or Supabase Edge Function) that calls stripe.checkout.sessions.create with your product details.

On the frontend, load Stripe with loadStripe(publishableKey), wrap your checkout component in Elements, and redirect users to the session URL. Stripe handles the payment form, 3D Secure, and PCI compliance. After payment, Stripe redirects back to your success URL. You verify the session on the backend before granting access.

Webhooks are critical. Stripe sends events (payment_intent.succeeded, subscription_updated) to a webhook endpoint you define. You verify the signature, then update your database, mark the user as paid, activate their subscription, send a receipt email. Without webhooks, you're guessing payment status.

Pricing: Stripe charges 2.9% + $0.30 per transaction. No monthly fees. Subscriptions cost the same per charge. For SaaS, Stripe Billing handles recurring invoices, proration, and dunning. If you're pricing your app, this pricing strategy guide covers how to set subscription tiers that make Stripe fees manageable.

Bolt and Lovable can generate the checkout UI. You paste in the Stripe redirect logic. The webhook endpoint usually needs custom code, Stripe's docs have Node.js, Python, and Ruby examples you can adapt. Most vibe-coded apps ship with Stripe integrated in under two hours.

Your prototype lives on Lovable's preview or Replit's dev server. Production needs a URL that doesn't break when you close your laptop. Here's where to host.

Vercel is the easiest for Next.js or React apps exported from Lovable. Connect your GitHub repo, Vercel auto-deploys on every push. Free tier includes 100GB bandwidth and serverless functions. Paid Pro plan at $20/month adds custom domains, analytics, and password protection. Vercel also hosts your API routes, each route becomes a serverless function.

Netlify works the same way for static sites or apps with serverless functions. Free tier includes 100GB bandwidth, 300 build minutes, and edge functions. Paid plans start at $19/month. Netlify's build logs are clearer than Vercel's for debugging deploy failures.

Replit Deployments keep everything in one place. If you built in Replit, click Deploy, choose autoscale, and your app goes live. Replit's new pricing (August 2026) charges $0.60 per million compute units and $0.40 per million requests. A small app costs $5-15/month. Replit Core at roughly $20/month includes $25 in credits, covering most hobby projects. Reserved VMs start at $7/month for always-on hosting.

Railway handles backend-heavy apps, PostgreSQL, Redis, background workers. You deploy via GitHub, Railway builds a Docker container, and you get a public URL. Free tier includes $5 in credits. After that, it's usage-based: roughly $0.000463 per GB-second for memory, $0.000231 per vCPU-second. A small app costs $10-20/month.

Frontend goes on Vercel or Netlify. Backend and database go on Railway or Replit. If your entire app is a single Next.js repo, Vercel handles both. For real-time features (WebSockets, multiplayer), Railway or Replit work better than Vercel's serverless model. Compare hosting costs directly at Replit vs. Vercel on the live pricing index.

Hardcoded API keys ship in your JavaScript bundle. Anyone can read them. Production apps isolate secrets in environment variables, injected at runtime. Here's how to set it up.

Create a.env.local file in your project root. Add your secrets: SUPABASE_KEY, STRIPE_SECRET_KEY, DATABASE_URL. Install dotenv (Node) or use Vite's built-in env support. Access variables with process.env.SUPABASE_KEY (Node) or import.meta.env.VITE_SUPABASE_KEY (Vite). Never commit.env.local, add it to.gitignore.

In Vercel, go to Settings → Environment Variables, paste your keys, and select Production, Preview, or both. Vercel injects them at build time. In Replit, open Secrets (the lock icon), add key-value pairs, and access them with os.getenv('SECRET_NAME') (Python) or process.env.SECRET_NAME (Node). Railway has a Variables tab that works the same way.

Public vs. secret variables: frontend code can read VITE_SUPABASE_URL (public), but STRIPE_SECRET_KEY must stay server-side. Prefix client-safe variables with VITE_ or NEXT_PUBLIC_ so your bundler includes them. Anything sensitive goes in backend routes only.

For teams, use a tool like Doppler or Infisical to sync secrets across developers and environments. Free tiers cover most small teams. You define secrets once, and Doppler injects them into Vercel, Railway, or local dev automatically. This prevents the "works on my machine" problem where production has different keys than dev.

Your prototype crashes and you refresh. Production crashes and you lose a customer. Real apps need error tracking, uptime monitoring, and usage analytics. Here's the minimum viable setup.

Sentry captures JavaScript errors, API failures, and performance issues. Install @sentry/react, initialize with your DSN, wrap your app in Sentry.ErrorBoundary, and every uncaught exception gets logged with a stack trace, user session, and breadcrumbs. Free tier covers 5,000 errors/month. Developer plan at $26/month raises it to 50,000. Sentry also tracks slow API calls and database queries.

BetterStack (formerly BetterUptime) pings your app every minute and alerts you if it's down. Free tier monitors one site. Paid plans start at $18/month for 10 monitors, SMS alerts, and status pages. Set up a /health endpoint that returns 200, and BetterStack hits it. If it fails three times, you get a Slack or email alert.

PostHog tracks user behavior, page views, button clicks, feature usage. Open-source and self-hostable, or use their cloud at $0.0005 per event after 1 million free events/month. Install the SDK, call posthog.capture('button_clicked'), and you get funnel analysis and session recordings. Cheaper than Mixpanel or Amplitude for small apps.

Google Analytics 4 is free but harder to set up for SPAs. Vercel Analytics costs $10/month and integrates natively with Next.js. Plausible is privacy-focused and GDPR-compliant at $9/month for 10,000 pageviews. Pick one analytics tool, one error tracker, one uptime monitor. More than that and you stop checking dashboards.

Wire Sentry into your production build as soon as you deploy. I caught a Supabase connection leak on day two that would've crashed the app under load. For workflow setups that ship fast and track issues, this productivity workflows guide covers the full stack.