Lab/Vibe Coding Academy
Level 3
45 min read

Level 3: The Orchestrator

Learn how forms, APIs, databases, and AI connect into one working system.

Level 3 - The Orchestrator

Welcome to Level 3.

The orchestrator connects the pieces. Pages, forms, APIs, databases, and AI all need to move in the same direction.

What Is an API?

An API is a contract between two parts of a system. One side asks for data or an action. The other side responds in a defined format.

In practice, that often means:

  • a frontend sends a request
  • a route handler processes it
  • a database stores or returns data
  • the UI updates with the result

If the assembler builds the pieces, the orchestrator decides how they talk to each other.

Asking Claude to Write a Fetch Call

AI works better when you specify the endpoint, payload, and expected response.

Instead of saying:

write a fetch call

say:

Write a TypeScript fetch POST request to /api/leads that sends name and email as JSON, handles non-200 responses, and returns the parsed response body.

That gives Claude the protocol, shape, and behavior you need.

Connecting a Form to Supabase

Connecting a form means mapping user input to a database write path. You collect values, validate them, submit them, and then handle success or failure.

The important system questions are:

  • Where does validation happen?
  • What table receives the data?
  • What should the UI do on success?
  • What error message should the user see?

Example Integration Flow

async function submitLead(formData: { name: string; email: string }) {
  const response = await fetch("/api/leads", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  });

  if (!response.ok) {
    throw new Error("Failed to save lead");
  }

  return response.json();
}

On the server, that route could write into Supabase. The key idea is that every connection has a defined role: UI gathers input, API transports it, database persists it.

Orchestration Mindset

Strong orchestration is not just "make it work." It is knowing where each responsibility belongs so the whole system stays understandable.

When you can explain the flow from form to API to database to UI state, you are no longer just generating code. You are directing a system.

// interactive exercises

What is an API in the context of a web app?

What makes a good prompt when asking Claude to write a fetch call?

When connecting a form to Supabase, what is the healthiest system boundary?

Ready to move on?

Mark this lesson as complete to log your progress and unlock the next level in the Academy.