Behind This Website
You spend a semester on this site. You post to the Class Board, vote on projects, watch the gallery fill up, ask the course assistant for help, and sign in with GitHub. None of that runs on special tooling you cannot touch. It runs on the same web this course teaches. This page is the map, and it is worth a read at any point in the semester: early for the shape of it, later for the parts you have since built yourself.
🗺️ The Whole Site in One Picture
Think of it as three layers:
- Pages you read. The homepage, schedule, session pages, guides, and syllabus are plain web pages, built once and served to everyone.
- Live corners. A handful of spots where you and your classmates actually write something: the Class Board, the vote pages, the lightning sign-up. These need to remember what people did.
- A database behind those corners. One shared place that stores the posts, votes, and sign-ups, plus the rules for who is allowed to read and write.
Most of the site is layer 1. The interesting question is why a few pages need layers 2 and 3.
🧩 What You Use and What Built It
| What you use | What it really is |
|---|---|
| Your personal site and the gallery | HTML, CSS, and JavaScript on GitHub Pages. The same thing you build for yourself in this course. |
| Session pages, schedule, calendar | Generated from plain text files. A tool called Astro turns that data into finished pages. |
| The slides, and the live CSS editor inside them | Built with Slidev, which makes slides out of Markdown. |
| Class Board, vote pages, lightning sign-up, sign-in | Backed by Supabase, a hosted database with a login system. |
| The search box | Powered by Pagefind, which indexes every page after the site is built. |
| "Sign in with GitHub" | GitHub OAuth, so you log in with the account you already have. |
| The course assistant in the corner | Your question goes to a small proxy server we run, which checks you are enrolled and forwards it to Claude. |
| The joke and space photo on the 404 page | Public APIs (JokeAPI and NASA): the joke fetched live in your browser, the photo pulled in when the site is built. |
🔌 Why Some Pages Need a Database
A static page is built one time and looks the same for every visitor. Your GitHub Pages site is static. That is why it is free to host and fast to load: the server just hands over a file it already has.
The moment a page has to remember something a visitor typed, static is no longer enough. When you post to the Class Board, that post has to be stored somewhere every other student can read it from. That storage, plus the rules for who may read and write, is what Supabase provides.
The live corners are plain JavaScript sitting inside the page, calling Supabase and showing what comes back. It is the same JavaScript this course teaches and the same idea of calling an API for data. There is no heavy framework hiding underneath. If you can read the JavaScript from your own project, you can read how the Class Board works.
🤖 The Course Assistant
The chat bubble in the corner is the clearest case of a page reaching out to another service. When you ask it a course question, that question does not go straight to the AI. It goes to a small server of our own first, called a proxy. That server does two jobs. It holds the secret key that pays for the AI, which must never sit inside a web page where anyone could copy it. And it checks that you are signed in and enrolled before spending anything. Only then does it pass your question to Claude and stream the answer back to your screen.
If you ever add AI to your own site, copy that proxy pattern and keep the key on a server you control. The course assistant itself runs on Claude, the same family of models this course works with, with a fast, lightweight version handling the quick back and forth.
🔭 The 404 Page Is a Live Demo
Type an address on this site that does not exist and you land on the 404 page. Look closely: it shows a real programming joke and a link to today's NASA astronomy picture. Both come from public APIs, and together they show two moments where you can call one.
The joke is fetched live, in your browser, the instant the page loads. That is the async and fetch skill the course builds toward, and the heart of the API mini project. The NASA photo is pulled in earlier, back when the site is built, then baked into the page so every visitor sees the same picture until the next build. It is the same move, calling someone else's API for data, timed two different ways.
🔄 How the Site Rebuilds Itself
One piece of this runs entirely out of sight. Nobody edits these pages by hand. The course content, meaning the schedule, each session page, and the slides, lives as plain text files in a separate repository. When that content changes, an automated robot called GitHub Actions wakes up, rebuilds every page from scratch, builds the search index with Pagefind, and publishes the finished site to GitHub Pages. The whole thing takes a couple of minutes and runs on its own.
That is also why the site loads fast and costs nothing to run. There is no server doing work at the moment you visit. Every page was built ahead of time, and you are reading a finished file. The live corners are the exception: they reach out to Supabase only for the one piece that has to be current.
🛠️ Built the Way You Build
This is where it ties back to the course. This whole site was built with Claude Code, an AI coding tool from Anthropic, working with Claude, the same kind of model this course puts in your hands. The workflow is the one you practice here: describe what you want, read what the AI writes, understand it, and keep only what you can explain.
The model kept changing while the site was being built, because new versions kept shipping. The work done in August 2026 used Claude Opus 5, which did not exist when the first pages went up. That pace is part of the point. The tools are moving fast, and the gap between a class website and your own project is smaller than it looks.
For the one rule behind that workflow, read Building and Learning with AI.
🧭 Want to Build Something Like It?
You already have the starting pieces. To go further:
- GitHub Pages gets a static site online for free, which is layer 1 and most of what a small project needs.
- React + Vite Setup is the next step up when a page needs more moving parts.
- Recommended Reading points to short pieces on building with AI.
Supabase, Astro, Slidev, and Pagefind all have friendly getting-started docs. Ask your AI tool to walk you through any one of them the same way you would ask it about your own code.
💬 Tell Me What You Think
Curious how a specific part works, or want a piece explained deeper? Feedback is welcome. Bring it to class, drop it on the Class Board, or send it my way. This page can grow with your questions.
Last updated: Wednesday, 9/23/2026