Welcome to the course

This is a course on the modern SaaS web stack, written in June 2026 by Claude Opus 4.8 with human curation along the way — so expect the occasional minor error or internal contradiction.

Two ideas shape everything here. The first is systems design over syntax: in 2026, typing the code is the easy part. What compounds is the thinking that comes before it — modeling your data, designing your API contracts, shaping code so it stays easy to change. The second is a lean, real-world stack: the smallest set of tools a real SaaS would actually ship with, each one either the sensible default or earning its place for a reason we’ll name when we get there.

Is this course for you?

This is not a beginner’s course. It teaches JavaScript and React from scratch, but it assumes you already know how to program. Take the quick check below to confirm you’re in the right place — and to find out where to start.

What you’ll learn

The course is 628 lessons across 108 chapters, grouped into 22 units — the blue uppercase sections in the sidebar. Take them in order; each one builds on the last:

JavaScript and TypeScript, the language at depth: generics, narrowing, discriminated unions, Promises and async/await, and the modern Node toolchain.
HTTP and the Browser Platform, how a request becomes a page: fetch, the DOM, events, cookies, web storage, and the DevTools you’ll live in.
React, JSX, and Tailwind, the component model and styling, with shadcn/ui, design tokens, dark mode, and responsive layout.
Next.js and the App Router, Server and Client Components, Suspense streaming, and the render model that frames the rest of the course.
Postgres and Drizzle, the data layer on Neon: schema, relations, migrations, transactions, and type-safe queries.
Forms, Validation, and Server Actions, moving data in and out safely with Zod, native forms, FormData, and useActionState.
Transactional Email, your first real outbound message with React Email and Resend, plus sender identity and deliverability.
Authentication, email + password, sessions, email verification, and password reset with Better Auth.
Organizations and RBAC, multi-tenancy, roles, invitations, and an audit log.
Lists, URL State, and Soft Delete, production list views with URL-driven filters, sorting, pagination, and archive/restore.
Webhooks and Stripe Billing, Checkout, the Customer Portal, subscriptions, and an idempotent webhook pipeline.
Background Work and Object Storage, durable jobs on Trigger.dev and presigned-URL uploads to Cloudflare R2.
Notifications, a multi-channel dispatcher fanning events across email and an in-app inbox.
Cache and Rate Limiting, tag-driven cache invalidation and Upstash rate limits.
TanStack Query and Zustand, client-state patterns: optimistic updates, infinite scroll, and a multi-step wizard.
Errors and Security, fail-closed error handling, CSP with nonces, security headers, and a pre-launch audit pass.
Time and Internationalization, the Temporal API, timezones and DST, and localized dates, numbers, and currency with next-intl.
Testing, unit, integration, and end-to-end tests with Vitest, MSW, and Playwright.
Observability and Performance, Sentry, structured logging, PostHog, and Core Web Vitals.
Git, CI, Deployment, and Migrations, GitHub Actions, shipping to Vercel, and zero-downtime schema changes.
Documentation and Code Review, Diataxis docs, ADRs, and a five-layer review stack.
AI with the Vercel AI SDK, an ask-your-own-data chat with tool calling and per-user token quotas.

Most chapters are teaching chapters, each closing with a short, low-pressure quiz. Interspersed are shorter project chapters where you apply what you just learned to a real codebase — project by project, you’ll assemble a multi-tenant invoicing SaaS. The progress bar at the top tracks how far you’ve come.

The tech stack

The tech you'll learn in this course, grouped by role.

Inside a lesson

Lessons are built to be worked through, not just read. Dense code arrives as stepped walkthroughs that highlight one section at a time and explain it, with hover definitions on the tricky terms and side-by-side tabs contrasting the wrong way with the right one. Concepts that are hard to picture become interactive diagrams you advance step by step, so you watch cause and effect unfold instead of squinting at a static image. And when someone has already explained a topic beautifully in a YouTube video, it’s embedded right there so you don’t have to go looking.

You stay hands-on throughout: predict-the-output drills, drag-to-sort and matching exercises, in-browser editors that actually run and check your code — even PR-style reviews where you leave comments on a diff. Some coding exercises go a step further and give you AI-written feedback on your work.

Meet your AI tutor

The star icon at the top right opens a chat you can ask questions on the current code. You can also highlight a section of text or code and click on the Ask AI tooltip. Some exercises also have a Feedback button to get inline feedback.

AI features run on OpenRouter: grab a free API key and paste it in the chat pane. It uses free models by default but you can choose any model in the chat settings. Without a key, exercises still work, you just won’t get personalized feedback.

Start the first lesson