Tanstack Start

Tanstack Start

Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwin

Category: development Source: jezweb/claude-skills

What Is Tanstack Start?

Tanstack Start is a modern, full-stack web application framework that leverages the power of TanStack Start v1, React 19, and a suite of best-in-class developer tools. Designed to run on Cloudflare Workers, Tanstack Start provides server-side rendering (SSR), file-based routing, seamless server functions, and a robust authentication system—all without relying on template repositories or boilerplate code. With this Claude Code skill, every project file is generated individually, ensuring a perfectly tailored codebase for each application.

Tanstack Start integrates Tailwind CSS v4, shadcn/ui components, Drizzle ORM, and Cloudflare's D1 database. Authentication is handled via better-auth, supporting both Google OAuth and traditional email/password flows. The result is a production-ready stack that emphasizes performance, type-safety, and developer experience from the ground up.

Why Use Tanstack Start?

Modern web applications demand rapid development, seamless scalability, and security without sacrificing developer ergonomics. Tanstack Start addresses these needs with a composable, convention-driven approach:

  • Zero Boilerplate: Every file is generated from scratch, not cloned from a monolithic template. This reduces technical debt and ensures only relevant code is present.
  • SSR and File-based Routing: Leverage server-side rendering for SEO and performance, with a clear, file-based route structure inspired by frameworks like Next.js and Remix.
  • Serverless by Default: Deploy instantly on Cloudflare Workers, benefiting from global low-latency and scale-out infrastructure.
  • Integrated Auth and DB: Secure authentication flows and a robust database layer (D1 + Drizzle) are built in, reducing integration headaches.
  • Modern UI Toolkit: Tailwind v4 and shadcn/ui provide utility-first styling and accessible, customizable UI components.

These features make Tanstack Start an excellent choice for building SaaS dashboards, admin panels, internal tools, or any application needing a modern, full-stack foundation.

How to Get Started

To build a new app with the Tanstack Start Claude skill, open Claude's code interface and specify your project requirements. The skill will generate all necessary files based on your needs—no cloning or scaffolding required.

Example: Creating a New Project

PROJECT_NAME/
├── src/
│   ├── routes/
│   │   ├── __root.tsx
│   │   ├── index.tsx
│   │   ├── login.tsx
│   │   ├── register.tsx
│   │   ├── _authed.tsx
│   │   └── _authed/
│   │       ├── dashboard.tsx
│   │       ├── items.tsx
│   │       ├── items.$id.tsx
│   │       └── items.new.tsx
├── drizzle/
│   └── schema.ts
├── db/
│   └── migrations/
├── worker/
│   └── index.ts
└── tailwind.config.ts

Sample Route File (dashboard.tsx):

import { useQuery } from '@tanstack/react-query'
import { getStats } from '../server/dashboard'

export default function Dashboard() {
  const { data, isLoading } = useQuery(['stats'], getStats)
  if (isLoading) return <div>Loading...</div>
  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
      <div className="grid grid-cols-2 gap-6">
        <StatCard title="Users" value={data.users} />
        <StatCard title="Items" value={data.items} />
      </div>
    </div>
  )
}

Key Features

  • Server-Side Rendering (SSR): Every route can fetch data and render on the server, delivering fast initial page loads and improved SEO.
  • File-Based Routing: Place a .tsx file in the routes/ directory and it becomes a route. Nested folders enable layout composition and route guards.
  • Server Functions: Write TypeScript server functions in the same repo, seamlessly invoked from your UI using TanStack conventions.
  • Authentication: Use better-auth for Google OAuth and email/password flows with session management out of the box.
  • Database Layer: Use D1 (Cloudflare's SQLite-based serverless DB) with Drizzle ORM for type-safe migrations and queries.
  • UI/Styling: Rapidly style components with Tailwind v4 and enhance UI with shadcn/ui primitives.
  • Deployment: Deploy directly to Cloudflare Workers, taking advantage of edge performance and cost efficiency.

Best Practices

  • Structure Routes Clearly: Use nested folders and layout files (__root.tsx, _authed.tsx) to separate public and authenticated areas. This improves maintainability and enforces access control.
  • Leverage Type Safety: Drizzle ORM and TypeScript ensure end-to-end type safety, from database models to API responses.
  • Keep Server Logic Modular: Define server functions (server/*.ts) by domain (e.g., dashboard.ts, items.ts). This improves testability and isolates business logic.
  • Utilize Tailwind and shadcn/ui: Combine utility classes with headless components for rapid, accessible UI development.
  • Secure Authentication Endpoints: Always validate user input on both client and server, and leverage better-auth’s built-in protections.

Important Notes

  • No Template Repo: All code is generated per project; there is no base repository. This means you should use version control from the start and regularly commit generated files.
  • Cloudflare Workers Limitations: Be aware of Cloudflare’s worker limits (CPU time, request size). D1 is ideal for lightweight, serverless persistence, but not suited for heavy transactional workloads.
  • Tailwind v4+shadcn/ui: Ensure that your team is familiar with Tailwind’s utility-first approach and the conventions of shadcn/ui for best results.
  • Authentication Setup: Configure your Google OAuth credentials securely in environment variables. Email/password flows require proper email delivery setup if you enable forgot-password features.
  • Local Development: Use wrangler for local Cloudflare Worker development and database migrations. Test authentication and SSR flows locally before deploying.

Tanstack Start, coupled with Claude’s code generation skill, offers a flexible, modern approach to full-stack development on the edge—without the baggage of templates or boilerplate. By following conventions and best practices, you can build, scale, and maintain robust applications with confidence.