Chapter 1

What Is a Web Application?

Understand the fundamental building blocks of a website using a restaurant analogy.

More Than Just a Web Page

When you visit a website like this one, you're not just looking at a static document — you're interacting with a web application. You can log in, create habits, track progress, and see charts. All of this requires multiple systems working together behind the scenes.

The Restaurant Analogy

Think of a web app like a restaurant

The dining room is the frontend — it's what you see and interact with: the menu, the tables, the decor. The kitchen is the backend — it's where the real work happens: processing orders, cooking food, and managing ingredients. The waiter is the API — they carry your order from the table to the kitchen, and bring food back to you.

The Three Parts of Every Web App

Frontend (Client)

Everything that runs in your browser — the buttons you click, the text you read, the colors and layout. Built with HTML, CSS, and JavaScript.

Backend (Server)

A program running on a remote computer that processes requests, talks to the database, and sends back data. You never see it directly.

API (Application Programming Interface)

The agreed-upon language between frontend and backend. When you click 'Save Habit', the frontend sends a message via the API, and the backend knows exactly how to handle it.

What Happens When You Visit This Site?

  1. 1You type the URL or click a link — your browser sends a request to the server
  2. 2The server sends back HTML, CSS, and JavaScript files — this is the frontend code
  3. 3Your browser runs the JavaScript, which makes the page interactive
  4. 4When you do something (like check off a habit), the frontend sends a request to the API
  5. 5The API route on the server processes it and talks to the database
  6. 6The database stores or retrieves the data
  7. 7The server sends a response back, and the frontend updates what you see

A Real Example from This Site

Here's actual code from StudyTracker that handles loading your habits. This is the "kitchen" processing an "order":

src/app/api/habits/route.ts
export async function GET(request: Request) {
  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();

  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const habits = await prisma.habit.findMany({
    where: { userId: user.id },
    orderBy: { createdAt: "desc" },
  });

  return NextResponse.json(habits);
}
Don't worry about understanding every line of code. The important thing is the pattern: the frontend asks, the backend processes, the database stores.

Test Your Knowledge

Question 1 of 3Score: 0

In the restaurant analogy, what does the API represent?

Next Chapter