What Is a Frontend? What Is a Backend? A Quick Explainer

AI Build South Africa

A fundamentals guide, written for someone whose AI agent writes both halves, not someone choosing a framework to learn either one by hand.

Quick answer

The frontend is everything a visitor actually sees and interacts with: the layout, the buttons, the text on screen, running inside their own browser. The backend is everything that happens out of their sight, on a server they never touch: checking a password, verifying a payment, deciding what a database is allowed to return. The frontend is visible and editable by anyone who opens it; the backend isn't. Your AI agent writes both, but they run in different places under different rules, which is exactly why some things (what a page looks like) can live entirely in the frontend, and other things (anything that has to actually be trusted) can't.

Tools for this build

Custom Prompt Builder

Turns your task, in your own words, into a prompt with clear limits for your AI coding agent.

PayFast Webhook Generator

Backend-only code by definition, since a webhook receiver can't run in a browser.

POPIA Compliance Checker

For when your backend starts handling real customer data.

The one-sentence version: what you see vs. what has to work

Open any website and everything you can point to, click, or read is the frontend: it was sent to your browser as HTML, CSS and JavaScript, and it runs on your own device. The backend is different in kind, not just location. It's code running on a server somewhere else entirely, doing the things a visitor's own browser can't be trusted to do correctly or safely: checking whether a password is right, confirming a payment actually went through, deciding whether this particular visitor is allowed to see this particular piece of data.

The practical test that separates them: if it's about how something looks or behaves on screen, it's frontend. If it's about whether something is true, allowed, or safe, it has to be backend. A frontend can display "Payment successful," but only a backend, checking a signed webhook the way this site's own guide to what a webhook is covers, can actually know it.

Frontend vs. backend

Frontend

Runs in the visitor's browser:

Visible and editable by anyone who opens dev tools; never trust it with a secret or a rule that must hold

Backend

Runs on a server, out of reach:

Where secrets, real checks and anything that must actually be enforced belong

AI Build · aibuild.co.za

Where you'll actually see this split on your own build

Open a generated project's files and this split has a real, visible shape. Our guide to the folder structure of an AI-built app walks through it: src/pages/ and src/components/ hold frontend code, which a build tool turns into the files a visitor's browser downloads; a backend folder such as supabase/functions/ holds code that only ever runs on a server. Base44 keeps the same split: its documentation lists a functions/ folder of backend functions, which run on Base44's own backend, not in the browser.

Why some AI tools start you with a frontend and nothing else

Claude Artifacts runs entirely inside your browser by default, no backend at all, which is exactly why it can't safely hold an API key or call an external service directly. Bolt.new used to start that way too, frontend-only until you connected a Supabase project, but since Bolt Cloud launched on 30 September 2025, new projects get a Supabase backend by default. Lovable (through Lovable Cloud, since September 2025) and Base44 likewise provision a backend for you by default.

The rule this split enforces: never trust the frontend with anything private

Because a visitor's browser fully controls the frontend code running inside it, anything sent there is effectively public, readable and editable by anyone who opens View Page Source or their browser's developer tools. This site's own guide to why you can't put an API key in the frontend covers this in depth using this site's own real PayFast signature bug as the worked example. The same rule extends past API keys: a discount-code check, an "is this user an admin" flag, anything that has to actually hold up rather than just display correctly, belongs in the backend, never the frontend alone.

Not every backend looks the same

"Backend" isn't one specific technology, it's a role, and different platforms fill it differently. Lovable and Bolt.new both use Supabase Edge Functions, written in TypeScript, deployed to Supabase's own infrastructure. Base44 keeps backend functions in a functions/ folder and runs them on its own backend, with no separate service to connect. A traditional hand-coded app might run a Node.js and Express server instead, the shape freeCodeCamp-style tutorials usually teach. All three are doing the same job under the hood: running trusted code somewhere the visitor's browser can't reach or edit.

Where to go next

The security rule this split exists to enforce: Why You Can't Put an API Key in the Frontend.
See the frontend/backend split in a real file tree: Understanding Your AI-Generated Project Structure.
Where your backend actually keeps data once it has one: What Is a Database?.

Not affiliated with the platforms we write about

AI Build South Africa is an independent resource. We're not endorsed by, or an official partner of, PayFast, Yoco, Peach Payments, Ozow, Meta, Lovable, Base44, Bolt.new or Anthropic. We do participate in affiliate and referral programmes with some of these providers, including Base44. See our Disclaimer for the full disclosure and our Terms of Service for the wider terms.

Frequently asked questions

Is Claude Artifacts frontend-only?

By default, yes. An Artifact runs entirely in your browser with no backend of its own, which is why it can't safely hold an API key, call an external payment gateway, or receive a webhook. Anything needing real server-side logic requires connecting an external backend, most commonly Supabase, the kind of backend Lovable and Bolt.new now provision for you by default.

Can I build a real app with just a frontend?

You can build something that looks and behaves like an app, but the moment it needs to remember information after the tab closes, verify a payment, or keep one user's data private from another, a frontend alone can't do it safely. Those all require a backend. A frontend-only build is genuinely fine for something like a static calculator or a portfolio page that has nothing private to protect.

Where does my backend actually run on Lovable, Base44 or Bolt.new?

Lovable and Bolt.new both run backend logic as Supabase Edge Functions on the Supabase backend each platform now provisions by default for new projects. Base44 runs its own backend functions inside its own runtime, no separate service to connect. Different infrastructure, same job: code that runs on a server you don't see, not in the visitor's browser.

What's the difference between the backend and the database?

The database is where data is stored. The backend is the code that decides what happens to that data: which requests are allowed, what gets validated, what gets calculated before anything is saved or returned. A backend without a database has nothing to persist; a database without a backend has no rules controlling who can touch it. Most real features need both, working together.

Why does something that already works in the frontend still need a backend change?

Because working in the frontend and working safely are different things. A discount code check or an admin-only button can appear to work perfectly in the browser while being trivially bypassed by anyone who opens developer tools, since the frontend's own logic is fully visible and editable by the visitor. Anything that has to actually be enforced, not just displayed, belongs in the backend.

Is the frontend/backend split the same as client/server?

Yes, same distinction, different pair of words. "Frontend" and "client" both mean the part running in the visitor's own browser. "Backend" and "server" both mean the part running elsewhere, out of the visitor's reach. You'll see both pairs used interchangeably across this site and everywhere else.