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.

React is a JavaScript library for building user interfaces out of composable, reusable components.
Tailwind is a CSS framework that lets you style elements with small utility classes directly in your markup instead of writing separate stylesheets.
shadcn/ui is a collection of accessible, customizable React components that you copy into your own codebase and own outright, rather than installing as a dependency.
Next.js is the full-stack React framework that handles routing, server rendering, and data fetching; its App Router and render model frame the rest of the course.
Postgres is a mature open-source relational database, here hosted as a serverless, autoscaling service by Neon.
Drizzle is a TypeScript ORM that lets you define your database schema in code and write fully type-safe SQL queries.
Zod is a schema library that validates untrusted data at runtime and infers your static TypeScript types from the same definition.
React Email is a library for composing email templates as React components instead of hand-writing fragile HTML tables.
Resend is an email-delivery service whose API sends your transactional messages and handles deliverability.
Better Auth is an authentication library for TypeScript apps that provides email-and-password login, sessions, email verification, and password reset.
Stripe is a payments platform that handles Checkout, the Customer Portal, and recurring subscription billing.
Trigger.dev is a background-jobs platform that runs long or scheduled tasks durably, surviving deploys and crashes.
Cloudflare R2 is an S3-compatible object storage service for files like user uploads, accessed securely through presigned URLs.
Upstash Redis is a serverless Redis service, used here for caching and rate limiting.
TanStack Query is a client-side data-fetching library that caches server state and manages loading, refetching, and optimistic updates.
Zustand is a minimal state-management library for sharing client-side UI state across React components.
Vitest is a fast test runner for unit and integration tests, built on the same tooling as Vite.
Playwright is an end-to-end testing framework that drives a real browser to verify whole user flows.
Sentry is an error-monitoring and performance-tracing platform that reports exceptions and slow requests from production.
PostHog is a product-analytics platform for tracking user behavior, funnels, and Core Web Vitals.
Vercel is a hosting and deployment platform, built by the makers of Next.js, that serves the application to users.
AI SDK is a TypeScript toolkit for building AI features, providing a unified API for model calls, streaming, and tool calling.

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