Skip to content

Serverless Functions & Connecting APIs

What are we trying to accomplish?

The goal of these two lectures, Serverless Functions and Connecting an API, is to equip students with the knowledge and practical skills necessary to let a Full-Stack Application reach beyond its own database and safely use third-party services, using Claude Code to implement the work end to end. Students will first learn what serverless functions are, why they exist, and when to reach for one instead of Supabase's auto-generated PostgREST endpoints, with a particular focus on keeping secret keys out of the browser by using an Edge Function as a secure middleman. They will learn how CORS works (origins, response headers, and the OPTIONS preflight request) so they can recognize a CORS error as a header problem rather than a logic problem, and they will prompt Claude Code to build and deploy Supabase Edge Functions that accept query parameters and request bodies. They will then learn how to evaluate and choose an external API, read its documentation to understand its endpoints, parameters, and return shape, and integrate the PokéAPI through an Edge Function that returns a trimmed payload. Finally, they will integrate the Dog API, which introduces API keys, and learn how to protect them with .env files, .gitignore, and Supabase Secrets. By the end of these lectures, students should be capable of independently identifying when their application needs an external API, evaluating it, and directing Claude Code to integrate it securely.

Lectures and Assignments

Lectures

Assignments

TLO's (Terminal Learning Objectives)

  • Explain what serverless functions are and when an application needs one instead of PostgREST
  • Describe how CORS works and how to account for it in a browser-facing Edge Function
  • Evaluate an external API and read its documentation to determine its endpoints, parameters, and return shape
  • Direct Claude Code to build, deploy, and test Supabase Edge Functions that integrate third-party APIs while keeping secret keys protected

ELO's (Enabling Learning Objectives)

  • Define a serverless function and describe its lifecycle (receive request, execute logic, return response, shut down)
  • Describe how Supabase Edge Functions run on the Deno runtime
  • Compare what PostgREST endpoints can do with what Edge Functions can do
  • Explain why a frontend should never hold secret API keys and how an Edge Function acts as a secure middleman
  • Identify situations that call for a serverless function and situations that do not
  • Define an origin (protocol, domain, and port) and explain why a cross-origin request can be blocked by the browser
  • Explain the Access-Control-Allow-Origin header and the OPTIONS preflight request
  • Explain why CORS headers must be included on every response, including error responses
  • Distinguish passing input through query parameters from passing input through a request body
  • Write a Claude Code prompt that creates, deploys, and supplies curl tests for an Edge Function, including error cases
  • Apply a checklist (documentation, cost, authentication, maintenance, reliability, rate limits, support, format) to decide whether an API is worth integrating
  • Read API documentation to identify endpoints, parameters, and response shape, and trim the response to only what the frontend needs
  • Explain why API keys must stay out of source code and Git history, and use .env, .gitignore, and Deno.env.get to protect them
  • Use supabase secrets set to supply keys to deployed Edge Functions and describe where a key lives in each environment