Session 1 · Week 1

Setup & Your First Build

This is the foundation session. We'll get your development environment running, connect everything together, and end the hour with a real working page that you generated with AI. No more setup after today — every session from here is building.

What we'll cover

  • Opening your code editor in the browser — no software to install
  • Signing in to Claude Code, your AI developer
  • Connecting Claude directly to your database
  • Setting up the secret keys your app needs to work
  • Running your first prompt and watching real code appear
  • Drawing the architecture: how a web app actually works behind the scenes

What you'll achieve

By the end of this session, you'll have:

  • A working development environment running in your browser
  • Claude Code authenticated and connected to your Supabase database
  • A live preview URL where you can see your app running
  • A custom homepage that you built by talking to AI
  • A clear mental model of how websites and apps fit together

New concepts (light touch)

  • Repository — a folder for your project, backed up online
  • Database — like a collection of spreadsheets your app reads from and writes to
  • Codespace — a computer in the cloud you can code on, right in your browser
  • Environment variables — the secret passwords your app uses to talk to other services

Before next session

Play. Open your Codespace and ask Claude to:

  • Add a second page — maybe an About page
  • Add a navigation bar that links between your pages
  • Change the colours of the homepage
  • Break something on purpose, then ask Claude to fix it

The point isn't perfection — it's getting comfortable typing prompts and watching things happen. Bring whatever questions or weird results you hit to session two.