TanStack Start Tutorial for Beginners

This free TanStack Start tutorial takes you from “what is a full-stack React framework?” to routing, loading data, server functions, a PostgreSQL database, sign-in, SEO and a free deploy to the internet. Every part is hands-on, and from Part 2 on, every command and output is real.

Start with Part 1 and go in order. Each part builds on the one before, and the parts below are linked as they’re published.

Who This Series Is For

  • complete beginners who want to build a real website with React
  • front-end developers who want to add server code and a database to their React apps
  • Next.js or React Router users who want to learn TanStack Start

What You Need

A Mac, a Windows 11 PC or a Linux computer where you’re allowed to install software, with Node.js on it from Part 2. You don’t need to know React or TypeScript: every idea is explained when it first appears. From Part 17, you also need PostgreSQL, which the PostgreSQL Tutorial shows you how to install. Everything runs free on your own computer; only the deploy part at the end uses free online accounts.

Set Up Your Computer

Install the current LTS version of Node.js from nodejs.org, and use any code editor. A setup guide for Visual Studio Code is linked here once it’s published:

  • How to Set Up VS Code for TanStack Start

All Parts

Module A: Start Here

Module B: Routing

  • Part 4: Dynamic Routes and Path Params
  • Part 5: Search Params: Type-Safe Filters and Sorting
  • Part 6: Layouts, Nested Routes and Navigation in Code

Module C: Data

  • Part 7: Load Data with Route Loaders
  • Part 8: Server Functions
  • Part 9: Forms and Mutations
  • Part 10: TanStack Query with TanStack Start
  • Part 11: Streaming and Deferred Data

Module D: Server

  • Part 12: What Runs Where: the Execution Model
  • Part 13: Environment Variables and Secrets
  • Part 14: Server Routes: Build a JSON API
  • Part 15: Middleware and Context
  • Part 16: Errors and Not Found Pages

Module E: Database

  • Part 17: Connect PostgreSQL with Drizzle ORM
  • Part 18: Create, Edit and Delete Data

Module F: Sign-In

  • Part 19: Sessions and Cookies
  • Part 20: Protected Routes
  • Part 21: Sign-In with Better Auth: Email and GitHub

Module G: Rendering

  • Part 22: Server-Side Rendering and Hydration Errors
  • Part 23: Selective SSR and SPA Mode
  • Part 24: Static Prerendering and ISR

Module H: Look and SEO

  • Part 25: Style with Tailwind CSS
  • Part 26: SEO: Titles, Meta Tags, Sitemap and Structured Data

Module I: Ship

  • Part 27: Test Your App with Vitest
  • Part 28: Production Build and Checklist
  • Part 29: Deploy to Netlify for Free with a Neon Database
  • Part 30: Final Project, Cheat Sheet and What to Learn Next

The Practice Project

Every part works on the same made-up bookshop website, so you watch one real app grow from a single page to a full-stack site with a database and sign-in, live on the internet. It sells the same invented books as the PostgreSQL Tutorial and the OpenTofu Tutorial. If you start in the middle of the series, each part begins with the complete files you need.

More Web Series

This series is part of the Web Series. To browse every topic, see the Blog Series page.

TanStack, React and other names mentioned are trademarks of their respective owners. JD Bots isn’t affiliated with or endorsed by TanStack.

Up ↑