Frontend and backend

Every web app has two halves. One half runs on your screen. The other half runs on a computer somewhere else. Knowing which is which helps you keep your app safe.

What is the frontend?

The frontend is the dining room of the restaurant. It's everything you see and touch in the browser. A browser is the program you use to visit websites, like Chrome, Safari, or Edge.

The frontend is made from three building blocks:

• HTML is the structure: headings, text, buttons, and images.
• CSS is the style: colors, fonts, spacing, and layout.
• JavaScript is the behavior: what happens when you click or type.

Think of a house. HTML is the walls, CSS is the paint, and JavaScript is the electricity that makes the lights turn on.

What is the backend?

The backend is the kitchen. It runs on a server, which is just a computer that is always on and connected to the internet. Visitors never see it directly.

The backend does jobs like these:

• Checks your email and password when you log in.
• Saves your order and reads products from the database.
• Calls an AI model, like the Claude API, using a secret key.
• Takes payments through a service like Stripe.

Why secrets live on the server

Here is the most important idea on this page. Anything in the frontend is downloaded to the visitor's computer. Anyone can open their browser tools and read it.

So if you put a secret API key in frontend code, you have handed it to every visitor. The backend is different. Its code stays on the server, so secrets stay hidden.

Telling your AI where code should run

AI builders sometimes take the quick route and call an AI API straight from the browser. You can prevent this with one clear sentence in your prompt.

Add an AI shopping assistant to my store.
The Claude API call must happen on the backend (a server-side route), not in the browser.
Read the API key from an environment variable called ANTHROPIC_API_KEY.
The frontend should only send the user's question to my backend route and show the answer.

Let's break this down:

• "On the backend" tells the AI where the secret work happens.
• "Environment variable" tells it where the key lives. You'll learn about these soon.
• The last line keeps the frontend simple: ask the kitchen, then show the result.

Common mistakes

Thinking "hidden" code is private

Wrong: "The key is in a JavaScript file nobody looks at, so it's fine."
Right: "Anything sent to the browser is public. Keep the key on the server."

Not saying where code should run

Wrong: "Add a chatbot that uses my OpenAI key."
Right: "Add a chatbot. Call the OpenAI API from a server-side route and read the key from an environment variable."

What's next?

You know the dining room and the kitchen. Next, let's meet the waiter that carries messages between them: the API.