TanStack Router Template

My basic template with TanStack Start and a few other libraries.

Features

• ⚡️ Vite - Lightning fast build tool
• 🎯 TanStack Start - Type-safe routing for React
• ⚛️ React 19 - The library for web and native user interfaces
• 🔍 TypeScript - JavaScript with syntax for types
• 🎨 Tailwind CSS - A utility-first CSS framework
• 🏪 Zustand - Bear necessities for state management
• 📝 React Hook Form - Performant form validation
• 🔐 Zod - TypeScript-first schema validation
• 🎨 shadcn/ui - Re-usable components built with Radix UI and Tailwind CSS
• 🎭 Radix UI - Unstyled, accessible components
• 🎯 ESLint - Code linting with modern config
• 🎯 TypeScript ESLint - TypeScript support in ESLint

Getting Started

Prerequisites

• Node.js (v20 or higher)
• pnpm

Installation

Clone the repository:

git clone https://github.com/toyamarodrigo/tanstack-start-template.git
cd tanstack-start-template

Install dependencies:

pnpm install

Start the development server:

pnpm dev

The application will be available at http://localhost:3000.

Available Scripts

• pnpm dev - Start development server at port 3000
• pnpm build - Build for production
• pnpm start - Preview production build at port 5000
• pnpm lint - Run ESLint
• pnpm lint:fix - Fix ESLint errors
• pnpm typecheck - Check TypeScript types

Project Structure

src/
├── components/                  # Reusable UI components and error boundaries
│   ├── ui/                      # shadcn/ui components
│   ├── not-found.tsx            # 404 error component
│   └── default-catch-boundary.tsx # Global error boundary component
├── lib/                         # Utility functions and shared configurations
├── routes/                      # TanStack Router route definitions
│   ├── __root.tsx               # Root layout component with global providers
│   └── index.tsx                # Home page route component
├── styles/                      # Global styles and CSS configurations
├── utils/                       # Application-specific utility functions
│   ├── logging-middleware.tsx   # Logging middleware for TanStack Router
│   ├── posts.tsx                # Post-related utilities and types
│   └── seo.ts                   # SEO utilities and meta tag helpers
├── router.tsx                   # Main router configuration and setup
├── routeTree.gen.ts             # Auto-generated route tree (TanStack Router)
└── vite-env.d.ts                # Vite environment type definitions

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.