Chapter 10. Front end and back end — the dining room and the kitchen

Key points

• Everything built so far is the front end — the dining room
• The contents of the front end can be inspected by anyone
• The back end, where you put what must not be seen, is the world beyond

Everything you built is front end

Two very important words in the development world: front end and back end. Understanding the difference shows you what is visible, what is hidden, and what needs protecting.

When you look at a website you click buttons, read text, look at images. Everything visible belongs to the region called the front end — the side in front of the user.

The profile page from Chapter 5 and the website from Chapter 9 are, fundamentally, all front end.

Anyone can look inside the front end

This is the most important point in the chapter.

Front-end code is sent to the browser and runs inside the browser. To run it, the browser has to read the code. The browser can read it, therefore the person using the browser can read it too.

Try pressing F12 (or Cmd + Option + I on a Mac) on the page you are reading now. A "developer tools" panel opens showing all the code that makes up the page. Front-end code is freely visible to anyone.

For a profile page or a website that is no problem — they exist to be seen. But if you put something that must not be seen — a password, or a secret key for using an external service — into the front end, that too is in plain view.

Where the unseen work goes: the back end

So where does work that must not be seen go? Into code that runs on a server rather than in the browser. That region — server-side code — is called the back end: the side the user cannot see.

Code in the back end is visible only to the developer. Opening the browser's developer tools shows nothing of it.

A restaurant makes it clearer

Front end = the dining room. Where the customer sits, reads the menu and receives the food. Everything visible to a customer is here.

Back end = the kitchen. Customers cannot see inside. The recipes, the suppliers, the steps of preparation — all hidden in the kitchen.

The customer (front end) orders a glass of water. The kitchen (back end) prepares it and delivers it to the table. The customer does not need to know where the water came from.

When you need to talk to an external service — weather data, booking records — use the secret key inside the kitchen only, and deliver just the result to the dining room. The key never reaches the customer's eyes.

The tool for adding a kitchen: Next.js

"Building a back end" sounds daunting, but it is simpler than expected. A tool called Next.js lets you house the dining room (front) and the kitchen (back) inside one project.

The framework that Chapter 5 told you not to use for a simple page is exactly this. A framework is like a set of structural timbers for building a house: the foundation is prepared for you and you develop on top of it.

Using Next.js is like adding a kitchen to your own restaurant. The dining room and kitchen sit in the same building, so there is only one place to manage, which suits AI development outstandingly well. And Vercel, from Chapter 8, runs Next.js at its best (the same company makes both).

⚠️ That said, Next.js raises the difficulty a notch: installing dedicated software, using the command line. A site that only shows things — a profile page, a website — needs no kitchen. A kitchen becomes necessary when work that must not be seen appears: login, storing data, integrating with external services. This guide stops just short of that. The goal here is simply knowing that the kitchen exists.

Chapter 10 summary

• Everything built so far is front end; its contents are visible to anyone
• Work that must not be seen goes in the back end, on the server
• Next.js houses dining room and kitchen in one building; use it when you need it