How Web Apps Actually Work: What Every AI Assisted Developer Needs to Know

If you're going to build web apps with AI -- even with the best tools in the world -- you need to understand how they actually work. Not at PhD level. Just the mental model.

Because here's what happens when you don't have this: you prompt AI to build you an app, it generates a bunch of files, something doesn't work, and you have absolutely no idea where to even start looking. Is it a frontend problem? A backend problem? A database problem? A deployment problem? You can't tell because you don't have the map.

This article gives you the map. After reading this, you'll understand how every piece of a web app fits together. And that understanding is what separates someone who can actually build things from someone who just generates code and hopes for the best.

The Big Picture: Three Layers

Every web app has three layers. Every single one. From a simple blog to Instagram to your banking app:

1. The [[Frontend]] -- what you see in your browser. Buttons, text, images, forms, animations. This is built with HTML (structure), CSS (styling), and JavaScript (interactivity). In modern apps, we use React to build the frontend because it makes managing complex UIs way easier through components.

2. The [[Backend]] -- the brains behind the scenes. When you click "Sign Up," something has to process that request, validate your email, hash your password, and store your account. That's the backend. It runs on a server and exposes APIs that the frontend can call.

3. The [[Database]] -- where everything gets saved. User accounts, posts, orders, messages. Without a database, your app has amnesia. Every time you refresh the page, everything would disappear. Supabase gives you a PostgreSQL database that's easy to set up and comes with an API built in.

How They Talk to Each Other

The frontend and backend communicate through a pattern called request/response. It works like ordering food at a restaurant:

1. You (the frontend) place an order (send a request to an API endpoint)
2. The kitchen (the backend) prepares your food (processes the request, queries the database)
3. The waiter brings it back (the response comes back with data)

This happens constantly. Loading a page? Request. Submitting a form? Request. Liking a post? Request. Your browser is firing off requests all day long.

The data travels as JSON -- a simple format that looks like JavaScript objects. When you fetch a user's profile, the API sends back something like {"name": "Sarah", "email": "sarah@example.com"}. Your React frontend takes that data and renders it into the UI.

Once you understand this cycle, you can debug almost anything. Data not showing up? Check the API request. Getting an error? Look at the response. Wrong data? Check the database query.

Authentication: Who Are You?

Most apps need to know who's using them. That's authentication -- the sign up / log in flow.

When you create an account, the backend stores your credentials securely (passwords get hashed, never stored as plain text). When you log in, the backend checks your credentials and gives you a session token -- basically a VIP pass that says "this person is legit." Your browser stores this token and sends it with every request so the backend knows who's asking.

Supabase handles all of this for you. Email/password login, Google sign in, magic links -- a few lines of code and it works. But understanding the concept matters because when auth breaks (and it will), you need to know whether the problem is "the user isn't logged in," "the token expired," or "the database policy is blocking access."

Routing: How URLs Map to Pages

When you type a URL like myapp.com/dashboard, something needs to figure out what page to show. That's routing.

In Next.js, routing is automatic. You create a file at app/dashboard/page.jsx and boom -- visiting /dashboard shows whatever that file renders. Need a dynamic page like /blog/my-first-post? Create app/blog/[slug]/page.jsx and Next.js passes the slug as a parameter.

This file based system is one of the reasons Next.js is so beginner friendly. No configuration files, no router setup. Files become pages.

Deployment: Getting It on the Internet

Your app runs locally at localhost:3000 while you're building it. Deployment is the process of putting it on the actual internet so anyone can use it.

With Vercel, the flow is:

1. Push your code to GitHub (version control)
2. Connect your GitHub repo to Vercel
3. Vercel automatically builds and deploys your app
4. You get a URL like my-app.vercel.app
5. Every time you push new code, Vercel deploys the update automatically

You also need to set your environment variables in Vercel's dashboard -- things like your Supabase URL and API key. These are secrets that shouldn't be in your code.

Add a custom domain for $10/year and you've got a professional looking app on the internet. The whole process takes about 5 minutes once you've done it once.

Why This Matters for AI Development

With this mental model, you're not just prompting AI blindly. You know the architecture. When you tell Claude Code to "add a favorites feature," you understand that it needs to: create a database table, write an API endpoint (or use Supabase's auto API), build a React component with state management, and handle the loading/error states.

That's the difference between vibe coding and real building. You've got the map. AI just helps you move faster.