A production-ready TanStack Start boilerplate with SSR, type-safe file-based routing, authentication, a blog/content system, and a modern developer toolchain.
| Category | Tools |
|---|---|
| Framework | TanStack Start + React 19 + Vite 7 |
| Routing | TanStack Router (file-based, type-safe) |
| Server State | TanStack Query |
| Forms | TanStack Form |
| Tables | TanStack Table |
| Client State | Zustand |
| Styling | Tailwind CSS v4 + shadcn/ui (New York) |
| HTTP Client | Axios |
| Authentication | Jose (JWT) |
| Date Utility | dayjs |
| Content | Content Collections (Markdown) |
| Validation | Zod |
| Monitoring | Sentry (@sentry/tanstackstart-react) |
| Linting & Formatting | Biome |
| Testing | Vitest + Testing Library |
| Commit Linting | Commitlint (conventional commits) + Husky |
| Bundle Analysis | rollup-plugin-visualizer |
# Install dependencies
yarn install
# Start dev server (port 3000)
yarn dev
# Build for production
yarn build
# Preview production build
yarn preview| Command | Description |
|---|---|
yarn dev |
Start dev server on port 3000 |
yarn build |
Production build |
yarn preview |
Preview production build |
yarn test |
Run tests with Vitest |
yarn lint |
Lint with Biome |
yarn format |
Format with Biome |
yarn check |
Lint + format with Biome |
├── content/
│ └── blog/ # Blog posts (Markdown)
├── public/ # Static assets
├── src/
│ ├── components/
│ │ └── ui/ # shadcn/ui components
│ ├── constants/ # App constants & environment config
│ ├── data/ # Demo/seed data
│ ├── features/ # Feature modules (public & protected)
│ ├── hooks/ # Custom React hooks
│ ├── integrations/
│ │ └── tanstack-query/ # Query provider & devtools
│ ├── lib/ # Utilities, API client, auth & site config
│ ├── locales/ # i18n locale files
│ ├── providers/ # React context providers (theme, etc.)
│ ├── routes/ # File-based routes
│ │ ├── (protected)/ # Auth-required route group
│ │ │ └── index.tsx # Protected home page
│ │ ├── (public)/ # Public route group
│ │ │ └── auth/ # Auth pages (login, register, etc.)
│ │ ├── __root.tsx # Root layout (header, footer, providers)
│ │ ├── about.tsx # About page
│ │ ├── blog.index.tsx # Blog listing
│ │ ├── blog.$slug.tsx # Blog post (dynamic)
│ │ ├── rss[.]xml.ts # RSS feed endpoint
│ │ └── sitemap[.]xml.ts # Sitemap endpoint
│ ├── services/ # API service layers
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Shared utility functions
│ ├── router.tsx # Router configuration
│ ├── routeTree.gen.ts # Auto-generated route tree (do not edit)
│ ├── start.ts # TanStack Start entry
│ └── styles.css # Global styles & theme tokens
├── biome.json # Biome config
├── commitlint.config.mts # Commitlint config
├── components.json # shadcn/ui config
├── content-collections.ts # Content collections config
├── vite.config.ts # Vite config
└── tsconfig.json # TypeScript config
Routes are defined as files in src/routes/ and auto-discovered by TanStack Router. The generated route tree (routeTree.gen.ts) provides full type safety for links, params, and search params.
Routes are organized into route groups:
(protected)/— requires authentication, guarded by auth middleware(public)/— publicly accessible pages (auth pages, etc.)
JWT-based authentication using Jose with session management utilities. Protected routes automatically redirect unauthenticated users. Auth hooks (useAuth) provide easy access to auth state in components.
A centralized API client built with Axios (src/lib/api.ts) with interceptors for auth tokens and error handling. Feature-specific API services are organized in src/services/.
Blog posts live in content/blog/ as .md files with frontmatter:
---
title: My Post
description: A short summary
pubDate: "2025-06-01"
heroImage: /images/hero.jpg
---
Your content here...An RSS feed is generated automatically at /rss.xml and a sitemap at /sitemap.xml.
Supports Light, Dark, and Auto (system preference) modes. Theme choice is persisted in localStorage and a blocking init script prevents flash of unstyled content on load. The theme provider is located in src/providers/theme-provider.tsx.
Add new components with:
pnpm dlx shadcn@latest add <component>Installed components: button, field, input, label, select, separator, slider, switch, textarea.
@/*→./src/*
The React Compiler babel plugin is enabled for automatic optimizations (memoization, etc.).
TanStack DevTools are integrated in development with plugins for both Router and Query devtools, accessible from the bottom-right corner.
The rollup-plugin-visualizer generates a treemap visualization of the production bundle at dist/bundle-stats.html, including gzip and brotli size analysis.
Error monitoring via @sentry/tanstackstart-react for automatic error and performance tracking in production.
Biome replaces ESLint and Prettier. It runs automatically on pre-commit via Husky.
Commits must follow Conventional Commits. Enforced by Commitlint + Husky on every commit.
Allowed types: feat, fix, docs, chore, style, refactor, ci, test, perf, revert, vercel
Allowed scopes: deps, auth, ui, api, config, docs, test, ci, chore, refactor, style
Example:
feat(ui): add date picker component
fix(api): handle timeout on fetch
chore(deps): upgrade tanstack packages
GitHub Actions runs on push to main and on pull requests:
- Biome lint
- TypeScript type checking
- Production build