# 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](https://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.