Learn — how this site is built
This is the conceptual companion to the site's source code: it explains why the site is built the way it is, and uses the real code as a way to learn core web-development concepts — including the bugs that happened along the way and what each one teaches.
Written for curious beginners and intermediate devs. The chapters build on each other loosely, but each stands alone — if one assumes knowledge you don't have yet, skip it and come back.
Part I — Foundations
- 01 How the site fits together The 30-second pitch, how a request flows through the site, the folder map, and the server/client split that keeps secrets safe.
- 02 Svelte 5: runes and reactivity Runes — $props, $state, $derived, $effect — plus snippets and stores, with real examples from this site’s components.
- 03 SvelteKit: load, hooks, and endpoints Server load functions, hooks as middleware, API endpoints, and the seeded shuffle that ties them together.
Part II — The shop
- 04 How the shop works: Stripe + Supabase How two services split the work of selling one-of-a-kind drawings: data model, purchase flow, payment verification, safety properties, and what breaks when the same piece can also sell in person.
- 05 Building the cart: war stories Seven real bugs from turning single-item checkout into a multi-item cart, and the general lesson inside each one.
Part III — Security
Part IV — Behind the scenes
- 07 Running on the edge: Cloudflare Workers What running at the edge actually means: async-only crypto, per-request env vars, and why dev is not prod.
- 08 Data pipelines and automation The daily scrape-and-enrich music pipeline: idempotent jobs, conservative matching, polite API clients, and guardrails around prod.
- 09 Images and media Four sizes per drawing: WebP variants, srcset/sizes, lazy loading, and why the OG images stay JPG.
- 10 This page builds itself How the Learn section renders itself: Markdown to highlighted HTML at build time, with nothing heavy shipped to the browser.