L08 · Spec · 4 min
Frontend and backend
In one sentence
The frontend is the part of your app that runs inside each visitor's browser (screens, buttons and forms), while the backend runs on a secure server where your app checks logins, talks to the database, uses secret keys, and calls AI models.
Think of it like this
Think of a restaurant: the frontend is the dining room where guests read the menu, sit at tables, and place orders. The backend is the kitchen behind closed doors, where the recipes, the safe, the pantry, and the stoves live.
How it works
Every web app has two sides. The DefinitionfrontendThe part of an app that runs in the visitor's browser: what people see and click.Open in the glossary → runs on the visitor's computer or phone inside their web browser: it draws the layout, responds to clicks, and shows friendly messages. Because it runs on the visitor's device, anyone can inspect the code and data sent to the frontend.
The DefinitionbackendThe part of an app that runs on a server: it keeps data, checks logins and talks to other services.Open in the glossary → runs on a computer you control—DefinitionlocalhostYour own computer acting as a server while you test, usually at `http://localhost:3000`.Open in the glossary → while you test, and DefinitionVercelThe service that turns your code on GitHub into a live site, with a Preview for every change.Open in the glossary → when your app is online. Because visitors cannot peek inside the server, the backend is the only safe place to keep a DefinitionsecretAnything that opens your accounts: API keys, passwords, tokens. Kept only in Vercel and `.env.local`.Open in the glossary → (such as an DefinitionAPI keyA password your app uses with another service. Whoever has it can spend your money.Open in the glossary →), read or write your DefinitiondatabaseWhere your app remembers things between visits, like accounts or saved recipes.Open in the glossary →, and call an AI DefinitionmodelThe AI system that produces answers, like the one behind your coding agent.Open in the glossary →.
For the same reason, your backend never trusts a request just because a button was hidden in the frontend. Every backend action (called a Server Action or Route Handler in Next.js) checks the user's login session and permissions first, validates the input data with a schema, and only then touches the database.
With the Next.js DefinitionframeworkA ready-made foundation for building apps. Agentic Makers uses Next.js.Open in the glossary → (App Router), your frontend and backend live together in the same Definitionrepo (repository)Your project folder plus its full history. Git records each checkpoint so you can go back to any version.Open in the glossary → folder. You don't need two separate projects; your Definitioncoding agentAn AI that works in your project folder: it reads files, writes code and runs commands, with your permission.Open in the glossary → marks which files run on the server and which ones run in the browser, and makes sure no secret variable ever starts with NEXT_PUBLIC_.
What it looks like in your project
When you write your Definitionspec`SPEC.md`: what you're building, who it's for, what's in and out, and how you'll know it works.Open in the glossary →, you don't have to design server endpoints yourself. You simply describe what visitors see and what the app remembers or computes, and your agent places UI components in the frontend and keeps all logins, database queries, and AI calls strictly in the backend.
Copy for your agent
Show me which parts of my app run in the browser (frontend) and which run on the server (backend), and verify that no secrets or AI calls are exposed to the client.
Quick check · 1 question