The building blocks

The core pieces the template is built on, and how they fit together into a single application.

Cover Image for The building blocks

The template is intentionally boring in the best way: it leans on a small set of well-understood tools rather than inventing its own. Here's the shape of it.

The stack at a glance

  • Next.js App Router for routing, server components, and the build.
  • A typed data layer backed by Postgres, so your queries are checked at compile time.
  • First-class auth with email, one-time codes, and team accounts already wired up.
  • A shared UI kit of accessible components that every screen is composed from.

Everything is a package

Rather than one giant application, the codebase is a set of focused packages that the app composes. The marketing site, the authenticated dashboard, and the content you're reading are all thin layers over that shared foundation.

Designed to be replaced

None of this is precious. Each layer exposes a small, documented surface, so you can swap the pieces you disagree with without unravelling the rest. Start by reading the project structure guide to see where everything lives.

Get an AI summary of Template Four