Behind This Website
You spent a semester on this site. You posted to the Class Board, voted on projects, watched the gallery fill up, asked the chat assistant for help, and signed in with GitHub. None of that ran on some special tooling you cannot touch. It runs on the same web you have been learning. This page is the map.
🗺️ The Whole Site in One Picture
Think of it as three layers:
- Pages you read. The homepage, schedule, session pages, guides, syllabus. These 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 Saw, and What Built It
| What you used | What it really is |
|---|---|
| Your personal site and the gallery | HTML, CSS, and JavaScript on GitHub Pages. The same thing you built for yourself. |
| 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 chat 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. |
🔌 Static vs. Live: 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.
One thing is worth noticing: the live corners are plain JavaScript sitting inside the page, calling Supabase and showing what comes back. It is the same JavaScript you practiced in class 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 Assistant That Answers You
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.
That proxy pattern is the single most useful thing to copy if you ever add AI to your own site. The rule is short: the key lives on a server you control, never in the browser. The assistant itself runs on Claude, the same family of models you have been using, 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 exact skill from the async and fetch unit, and the heart of your third 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. 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 you used all semester. The workflow was the one you practiced: describe what you want, read what the AI writes, understand it, and keep only what you can explain.
The exact model changed as the weeks went on, because new versions kept shipping. The most recent work on this site used Claude Opus 4.8. 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: Monday, 7/13/2026