You Built an App. But What's Inside?
Vibe coding tools like Bolt, Lovable, v0, and Replit Agent are incredible. You describe what you want in plain English, and minutes later you have a working application. No computer science degree required.
But here's what these tools don't tell you: under the hood, your "simple" app has 5 to 8 layers of technology you've never heard of. A frontend framework. A CSS library. A database. An authentication system. A hosting platform. Environment variables. API keys. Each one made by a different company, with its own dashboard, its own documentation, and its own way of breaking.
When everything works, you don't need to know any of this. But when something breaks — and it will — you're stuck. You don't even know which layer to look at, let alone how to fix it.
This post is your map.
We'll decode exactly what each major vibe coding tool generates, explain the 7 layers every web app has, give you a troubleshooting guide for common failures, and point you to the right learning resources. No jargon without explanation. No judgment. You built something — now let's help you understand it.
Tool-by-Tool Stack Decoder
Find the tool you used below. Each card shows exactly what technologies it put in your app and what to learn first when you need to fix something.
Bolt.new
| Frontend | React (a JavaScript library for building user interfaces) + Vite (a fast build tool that bundles your code) |
| Styling | Tailwind CSS (utility classes like bg-blue-500 instead of writing CSS files) |
| Backend / Database | Supabase (a hosted PostgreSQL database with built-in APIs — think of it as your app's storage + brain) |
| Authentication | Supabase Auth (handles login, signup, password reset) |
| Hosting | Bolt cloud or Netlify (where your app actually runs on the internet) |
What typically breaks
- Database migrations (schema changes that don't apply)
- Auth token expiry (users get randomly logged out)
- Environment variables missing after deploy
What to learn first
- React basics (components, state, props)
- The Supabase dashboard (Table Editor, Auth tab)
- Environment variables (.env files)
Lovable
| Frontend | React + Vite |
| Styling | Tailwind CSS + shadcn/ui (a collection of pre-built, polished UI components like buttons, modals, and forms) |
| Backend / Database | Supabase (PostgreSQL database + auto-generated API) |
| Authentication | Supabase Auth |
| Hosting | Lovable cloud or Netlify |
What typically breaks
- Component state bugs (UI not updating when data changes)
- Supabase RLS policies (Row Level Security — rules that control who can read/write which rows in your database)
- API rate limits (too many requests too fast)
What to learn first
- React components (how they render and re-render)
- Supabase Row Level Security (the #1 thing that blocks data)
- How shadcn/ui components work
v0 (by Vercel)
| Frontend | React / Next.js (a React framework that adds routing, server rendering, and more) |
| Styling | Tailwind CSS + shadcn/ui + Radix (accessible, unstyled primitives that shadcn builds on) |
| Backend / Database | You add your own. v0 generates UI only. You can use Next.js API routes for backend logic. |
| Hosting | Vercel (natural fit since v0 is made by Vercel) |
Important: v0 generates beautiful UI components, but it does not give you a database, authentication, or backend. If your app needs to save data or have user accounts, you'll need to add those yourself. Think of v0 as a designer, not a full-stack builder.
What typically breaks
- Expecting it to handle backend (it won't)
- Integration issues when you add your own DB/auth
- Next.js routing confusion
What to learn first
- Next.js basics (pages, layouts, routing)
- How to connect a backend
- Vercel deployment settings
Replit Agent
| Frontend | React or vanilla JavaScript (varies based on what you asked for) |
| Backend | Node.js / Express (JavaScript) or Python / Flask — the agent picks based on your request |
| Database | Replit DB (simple key-value storage) or PostgreSQL (full relational database) |
| Hosting | Replit Deployments (runs directly on Replit's infrastructure) |
What typically breaks
- Replit-specific dependencies that don't work elsewhere
- Cold starts (app is slow after being idle)
- Database persistence issues on free tier
What to learn first
- Whatever language it picked (check the file extensions:
.js= JavaScript,.py= Python) - Deployment basics
- Replit's Secrets tab (for environment variables)
Create.xyz
| Frontend | React |
| Backend | Serverless functions (small pieces of backend code that run on-demand, without you managing a server) |
| Hosting | Create.xyz cloud |
What typically breaks
- API integrations (third-party services it connected to)
- Scaling limits on the free/starter tier
- Limited ability to customize beyond what the tool offers
What to learn first
- How APIs work (requests, responses, status codes)
- Serverless concepts (functions that run without a dedicated server)
- Reading error messages in the browser console
Cursor / Claude Code / Copilot
AI Agents in IDEKey difference: These tools don't have a fixed stack. They build with whatever you already have in your project, or whatever they decide is a good fit. Every project will be different.
| Common defaults | Next.js + Tailwind CSS + Prisma (a tool that lets your code talk to databases) + PostgreSQL + NextAuth (authentication for Next.js apps) |
| But also... | Could be Python + FastAPI, or Ruby on Rails, or anything. It depends on what you asked for and what was in your project already. |
| Hosting | You choose — the agent generates code, not infrastructure |
What typically breaks
- The agent's assumptions about your project structure
- Dependency conflicts (it adds packages that clash)
- Code that works in isolation but breaks with your existing code
What to learn first
- Read what the agent generated (seriously, read the files)
- Understand your
package.json(it lists every dependency) - Check our AI Coding Tools guide
The 7 Layers of Your App
Every web app — whether you built it with vibe coding or by hand — has these layers. When something breaks, figure out which layer is the problem, and you're halfway to fixing it.
Frontend Framework (React, Vue, Svelte)
This is what users see and interact with — buttons, forms, pages, navigation. It's the "face" of your app.
When it breaks: Blank white screen, buttons that don't respond, pages that won't load.
Styling (Tailwind CSS, CSS Modules)
Controls how your app looks — colors, spacing, fonts, responsive layout. It's cosmetic but important.
When it breaks: Layout looks wrong, elements overlap, mobile view is broken, styles missing after deploy.
Backend / API (Node.js, Python, serverless functions)
The business logic of your app. It processes data, talks to the database, handles payments, sends emails — everything that happens "behind the scenes."
When it breaks: 500 errors, data not saving, features silently failing, API timeout messages.
Database (PostgreSQL, MongoDB, SQLite)
Where your app's data actually lives — user accounts, posts, settings, everything. If the database goes down, your app has amnesia.
When it breaks: Data disappears, old data shows up, "connection refused" errors, slow queries.
Authentication (Clerk, Supabase Auth, NextAuth)
Controls who can access what. Handles login, signup, sessions, and permissions. This is your app's bouncer.
When it breaks: Can't log in, sessions expire randomly, "unauthorized" errors, redirect loops.
Hosting / Deployment (Vercel, Netlify, Replit)
Where your app physically runs on the internet. It takes your code and makes it available at a URL for anyone to visit.
When it breaks: Site is down entirely, deploy fails, "502 Bad Gateway" errors, slow load times.
Domain & DNS (Namecheap, Cloudflare, Google Domains)
How people find your app. DNS (Domain Name System) is like the internet's phone book — it translates "yourapp.com" into the server address where your app lives.
When it breaks: "Site can't be reached," custom domain not working, SSL certificate errors (the padlock icon).
My App Broke — Where Do I Look?
Don't panic. Find your symptom below, and we'll point you to the right layer and the first thing to check.
"Page is blank / white screen"
Layer: Frontend (JavaScript error crashed the page)
First step: Open your browser's Developer Console (right-click the page, click "Inspect", then go to the "Console" tab). Look for red error messages. The error will usually tell you which file and line number broke. Google the exact error message — someone else has had it before.
"Data isn't saving"
Layer: Database or Backend
First step: If you're using Supabase, open the Supabase dashboard and check the Table Editor — is the data there? If not, check the Supabase logs (under Database > Logs). Common cause: Row Level Security (RLS) policies are blocking writes. Also check that your API keys in environment variables are correct.
"Login doesn't work"
Layer: Authentication
First step: Go to your auth provider's dashboard (Supabase Auth tab, Clerk dashboard, etc.). Check if the user account exists. Check if email confirmation is required but not set up. Check if auth tokens have expired. Also verify your auth-related environment variables (like SUPABASE_URL and SUPABASE_ANON_KEY) are set correctly in your hosting platform.
"Site is slow"
Layer: Hosting or Database queries
First step: Check your hosting dashboard for resource usage. If you're on Replit's free tier, cold starts (the server sleeping and waking up) cause delays. If it's slow after loading, the problem is likely database queries — you might be fetching too much data at once. Check the Network tab in browser DevTools to see which requests are slow.
"Works locally but not after deploy"
Layer: Environment variables
First step: This is almost always missing environment variables. Your local machine has a .env file with secrets (API keys, database URLs). Your hosting platform needs these too, but they don't transfer automatically. Go to your hosting dashboard (Vercel, Netlify, Replit) and add each variable from your .env file to the environment settings.
"API errors / 500 errors"
Layer: Backend
First step: A "500" error means something crashed on the server side. Check your hosting platform's function logs or server logs (Vercel: Functions tab; Netlify: Functions log; Replit: Console). The error message in the logs will tell you exactly what went wrong. Common causes: missing environment variables, database connection issues, or a bug in the server code.
"Styling looks broken / layout is weird"
Layer: CSS / Styling
First step: If you're using Tailwind CSS, make sure the Tailwind config file includes all your source files (so it generates the right CSS classes). If styles work locally but not in production, your build step might be stripping unused classes. Check the browser's "Elements" panel in DevTools — inspect the broken element and see what CSS is being applied.
What Should I Learn First?
You don't need to learn everything. Here's a priority order that applies no matter which tool you used. Each step builds on the last.
Learn what's in your package.json (5 minutes)
Open the file called package.json in the root of your project. Under "dependencies", you'll see a list of every technology your app uses. Google each name — just knowing what they are gives you a huge head start. This is your app's ingredient list.
"dependencies": {
"react": "^18.2.0", // Your frontend framework
"@supabase/supabase-js": "^2.0.0", // Your database client
"tailwindcss": "^3.4.0" // Your styling tool
}
Understand your database
Your database is where all your app's data lives. If you're using Supabase, log into the dashboard and explore the Table Editor. If you're using something else, find its dashboard. Understand what tables exist, what data is in them, and what happens when you add or delete a row. This is the most critical thing to understand because data problems cause the most confusing bugs.
Learn your frontend framework basics
If your app uses React (most vibe-coded apps do), spend an hour on the official React tutorial. You don't need to master it — just understand components (reusable pieces of UI), props (data passed to components), and state (data that changes over time). This will make 80% of the generated code readable to you.
Understand deployment
Learn how your code goes from "files on your computer" to "a live website." Understand environment variables, build commands, and how to read deploy logs. Most "works locally but not in production" problems come from not understanding this step.
You don't need to become an expert.
The goal isn't to learn everything from scratch. It's to know enough to read error messages, find the right dashboard, and ask the right questions when you paste an error into ChatGPT or Claude. That's a superpower.