Skip to content

Full-Stack Apps: RESTful APIs & Connecting It All

What are we trying to accomplish?

The goal of these two lectures, RESTful APIs and Connecting it All, is to equip students with the knowledge and practical skills necessary to combine a React + Vite front end and a Supabase back end into a single working Full-Stack Application, using Claude Code as the orchestrator of the integration. Students will first learn what a RESTful API is and why it acts as the contract and gatekeeper between a user interface and a database, how CRUD operations map to HTTP methods (POST, GET, PATCH/PUT, DELETE), and how to read status codes. They will practice these ideas by sending real requests to the endpoints that Supabase's PostgREST layer auto-generates for their tables using Postman. They will then learn the full-stack workflow that carries a user action from a React component, through a dedicated API service layer, into Supabase and PostgreSQL, and back to the UI. This includes handling asynchronous loading, success, and error states, treating the database as the source of truth, and protecting credentials with environment variables. Finally, they will organize their project under a shared .claude directory and direct Claude Code to coordinate specialized front-end and Supabase sub-agents, review its implementation plan before approving changes, and verify the finished integration with the Playwright and Supabase MCP servers. By the end of these lectures, students should be capable of independently planning, directing, and validating the connection between their front end and database so that their applications create, read, update, and delete real data that persists beyond a browser session.

Lectures and Assignments

Lectures

Assignments

TLO's (Terminal Learning Objectives)

  • Explain the role of a RESTful API between a front end and a database
  • Send CRUD requests to a Supabase project's auto-generated API using Postman
  • Connect a React + Vite front end to Supabase through an API service layer and environment variables
  • Orchestrate Claude Code sub-agents to integrate and verify a Full-Stack Application

ELO's (Enabling Learning Objectives)

  • Define an API, REST, and the conventions of a RESTful API (URLs as resources, HTTP methods, JSON, statelessness)
  • Map CRUD operations to HTTP methods and SQL equivalents
  • Distinguish when to use PATCH versus PUT and recognize the risk of unfiltered DELETE requests
  • Locate a Supabase project URL, publishable key, and API documentation, and set the required request headers
  • Interpret common HTTP status codes (200, 201, 204, 400, 401, 403, 404, 500) when debugging
  • Describe the full-stack request flow from a user action to the database and back
  • Explain why components should call a service layer and why loading, success, and error states must be handled
  • Store secrets in a .env file with the VITE_ prefix and exclude it from version control with .gitignore
  • Structure a shared .claude directory containing front-end and Supabase agents and skills
  • Review Claude Code's plan, approve changes, and verify the integration with the Playwright and Supabase MCP servers