/library / template-vite-react-spa
templateWeb app

Vite + React SPA with TanStack Query + Router

A pure client-side React SPA on Vite. TanStack Query for server state, TanStack Router for type-safe routing, Zustand for local UI state. Use when SSR is overkill and you want a small fast bundle.

use whenInternal tool, admin dashboard, or product surface where SEO doesn't matter and you want React's full client-side power without Next.

May 12, 20262,380 bytesvitereacttanstackspadashboard
download .md↓

[App Name]

Client-side React app. Authenticated, data-heavy, no SEO requirement.

Source of truth

Vercel deploys from main. The deployed bundle is the source of truth for what users see; rebuild + redeploy to change anything.

Tech stack

Vite 6 + React 19 + TypeScript. TanStack Router (file-based routing with type-safe links). TanStack Query for all server state (no Redux for server data). Zustand for local UI state (modal open, sidebar collapsed, etc). Tailwind v4 for styling. Deployed to Vercel as static output.

Deploy

git push origin main. Vercel runs npm run build (Vite outputs to dist/) and serves it. SPA routing handled via vercel.json rewrites: every path returns index.html.

File map

  • src/routes/ file-based routes; __root.tsx is the layout
  • src/routes/_authed/ authed pages (loader-protected)
  • src/routes/login.tsx login page
  • src/api/ typed fetch wrappers per resource
  • src/components/ shared components
  • src/stores/ Zustand stores
  • src/lib/auth.ts token storage + refresh
  • vite.config.ts plugins: TanStack Router, Tailwind, TypeScript paths
  • vercel.json SPA rewrite rule

.env keys

  • VITE_API_BASE_URL your backend API base
  • VITE_PUBLIC_POSTHOG_KEY analytics (optional)

Hard rules

  • All server data flows through TanStack Query. No useEffect-fetch.
  • All routes are typed via TanStack Router. No <a href> for internal links.
  • Auth token in localStorage with a refresh interceptor. Never in URLs.
  • Bundle budget: under 250KB JS gzipped on first paint. Run npm run analyze before each release.
  • No CSS-in-JS runtime. Tailwind + CSS Modules only.

Recent significant changes

  • 2026-05-12: Scaffolded. Locked: TanStack Router over React Router (codegen + types). Zustand over Redux. No styled-components.

Next session: start here

  1. Set VITE_API_BASE_URL in .env.local to your API.
  2. Implement src/lib/auth.ts token storage matching your backend.
  3. Build first route under src/routes/_authed/.
  4. Set up CI to run npm run typecheck && npm run lint && npm run build on every PR.
  5. Deploy to Vercel, attach domain.
← older
Go + Templ + HTMX (no-JS web app)
newer →
Phoenix LiveView app (Elixir realtime, no JS framework)

Get the next CLAUDE.md in your inbox.

One new template every week, plus occasional case studies.