The Builder's Stack

Frontend, backend, database — three jobs. Knowing which does what is how you ship without getting lost.

Building with AI · Lesson 25 · 10 min read

You can prompt, evaluate, do RAG, and build an agent — but “turn it into a real app people can use” still feels like a fog. Where does the AI call happen? Where does the key live? Where does data persist? Without a mental model of the stack, you wire things into the wrong place — usually the dangerous one. Let’s clear the fog.

Three jobs: frontend, backend, database

• Frontend — what runs in the user’s browser: the interface. Anything here is public (a user can read it), so no secrets.
• Backend — your server-side code: it holds secrets (API keys), calls the model, enforces limits, and is the trusted place to do sensitive work.
• Database — durable storage for users’ data, progress, app state.

The model call belongs in the backend (behind a proxy), exactly like the one this very platform uses for grading. The frontend asks the backend; the backend holds the key and talks to the model.

This app’s own stack: the React frontend (public) calls /api/ai (backend), which injects the secret key and calls the model. The key never touches the browser. That’s the pattern you’ll reuse for any AI app.

Data flows in a loop

A request flows: frontend → backend (auth, key, model call, business logic) → database (read/write) → back to the frontend to render. Each layer has one responsibility, which is what keeps an app understandable as it grows. When something breaks, you ask “which layer owns this?” — the same triage instinct from prompt debugging, applied to architecture.

Tracing one feature — “summarize my notes”:
1. Frontend: user clicks Summarize, sends their notes to the backend.
2. Backend: checks the user, injects the API key, calls the model, applies limits.
3. Database: saves the summary to the user’s record.
4. Frontend: renders the saved summary. Each layer did exactly its one job.