Building a Full Stack E-Commerce App with TanStack Start and Directus

I built a full stack e-commerce demo store — products, categories, cart sync, user authentication, email verification, protected routes, rich text content, and a complete admin dashboard to manage it all.

The live demo is at demostore.northernrangedigital.com.

This series documents the entire stack I used to build it, the decisions I made along the way, and the patterns I've settled on for building full stack apps. Everything is grounded in real code from a real project.

The Stack

• TanStack Start — full stack React framework with file-based routing, SSR, loaders and type-safe navigation

• Directus — headless CMS and backend, self-hosted on a VPS, handling data, auth, file storage and the admin dashboard

• PostgreSQL — the database underneath Directus

• Tailwind CSS v4 — styling, with the Typography plugin for rich text rendering

• Shadcn UI — component library built on top of Tailwind

• Zustand — client-side state management for auth and cart

• Coolify — self-hosted deployment platform managing the frontend, Directus and PostgreSQL via Docker Compose

• Resend — email delivery for verification and password reset, configured via SMTP in Docker Compose

Why This Stack

I wanted a setup that was flexible, cost-effective, and production-ready without stitching together five different paid services. Everything runs on a single VPS for around $20/month — Directus handles the backend, authentication, file storage and admin UI all in one place, and Coolify handles deployments automatically when I push code.

The result is a full stack that scales from a weekend project to a production app without changing tools or blowing up the infrastructure bill.

What This Series Covers

Each post in this series covers a specific part of the stack with real code from the demo store:

1. Why I chose Directus as my backend — what it offers, how it's licensed, and when it's the right fit

2. Connecting TanStack Start to Directus with the SDK — setting up the client, typed data fetching, filtering

3. Metadata, data loading and loading skeletons in TanStack Start — head, loader and pendingComponent

4. Protecting routes with Zustand — auth store, hydration, layout route guards

5. Directus auth out of the box — registration, login, email verification and password reset

6. Rendering rich text safely — DOMPurify, html-react-parser and Tailwind Typography

If you're evaluating TanStack Start, Directus, or this kind of self-hosted setup for your next project, this series is built for you. Every post includes real code, real decisions, and honest tradeoffs.

Let's build.