A production-grade reference implementation of the full TanStack ecosystem — Router, Query, Table, Virtual, and Form — built end-to-end with React 19, Vite, TypeScript, and a complete CI / testing / accessibility / observability toolchain.
Built as a working demo of how to wire TanStack's libraries together the way you'd want to in a real codebase: type-safe routing, cached + virtualized data, schema-validated forms, dark mode, i18n, e2e tests, and a zero-warning lint policy.
Live data source: PokeAPI. Pick a Pokémon, browse the virtualized table, build a team via a Zod-validated form.
TanStack ships excellent libraries but most demos show one of them in isolation. This project shows them working together — and surrounds them with the production tooling (testing, CI, accessibility audits, bundle analysis, security scans) you'd actually need to ship.
- TanStack Router — file-based routing, type-safe navigation, route prefetching, error boundaries
- TanStack Query — caching, background refetching, infinite queries, optimistic updates, devtools, cross-tab sync
- TanStack Table — sortable, filterable data grid
- TanStack Virtual — virtualized scrolling for large lists
- TanStack Form — Zod-schema-validated forms with field-level state
- Strict TypeScript end-to-end
- Zero-warning ESLint policy (
--max-warnings 0) enforced via Husky + lint-staged on every commit - Vitest unit + integration tests with V8 coverage
- Playwright e2e tests
- MSW (Mock Service Worker) for API mocking in tests
- Lighthouse CI performance budgets
- axe-core automated accessibility checks
- Snyk + npm audit dependency security scanning
- TypeDoc generated API documentation
- vite-bundle-visualizer for bundle analysis
- i18next with browser language detection
- Tailwind CSS with dark mode
- Vercel-ready deployment
| Layer | Stack |
|---|---|
| Framework | React 19, Vite 6, TypeScript |
| Routing | TanStack Router (file-based) |
| Data | TanStack Query, TanStack Table, TanStack Virtual |
| Forms | TanStack Form + Zod |
| Styling | Tailwind CSS (dark mode), PostCSS |
| i18n | i18next, react-i18next, browser-languagedetector |
| Testing | Vitest, Testing Library, MSW, Playwright, jsdom |
| Quality | ESLint, Prettier, Husky, lint-staged, TypeDoc |
| Performance / a11y | Lighthouse CI, axe-core, vite-bundle-visualizer |
| Security | Snyk, npm audit |
| Deploy | Vercel |
- Node.js 22.12.0+ (see
.nvmrc) - npm
git clone https://github.com/seanebones-lang/TanStack-Wonderland.git
cd TanStack-Wonderland
npm install --legacy-peer-depsnpm run dev # http://localhost:5173The bundled "Eleven" chatbot uses xAI Grok. To enable real responses (instead of mock answers), add an API key to .env.local:
VITE_GROK_API_KEY=your_key_here
Without a key, the chatbot still works using mock responses.
| Script | What it does |
|---|---|
npm run dev |
Vite dev server |
npm run build |
Type-check + production build |
npm run preview |
Preview production build |
npm run test |
Vitest (unit + integration) |
npm run test:coverage |
Vitest with V8 coverage |
npm run test:e2e |
Playwright e2e suite |
npm run test:e2e:ui |
Playwright in UI mode |
npm run lint |
ESLint, zero warnings |
npm run format |
Prettier write |
npm run type-check |
tsc --noEmit |
npm run lighthouse |
Lighthouse CI run |
npm run analyze |
Bundle visualizer |
npm run docs:generate |
TypeDoc API docs |
npm run security:audit |
npm audit (moderate+) |
npm run security:check |
Snyk |
npm run validate |
type-check + lint + test + build (the full gate) |
src/
├── components/ # Reusable React components
│ ├── Chatbot.tsx
│ ├── ErrorBoundary.tsx
│ ├── LanguageSelector.tsx
│ └── Toast.tsx
├── routes/ # TanStack Router file-based routes
│ ├── __root.tsx
│ ├── index.tsx # Home — Pokémon grid (Query)
│ ├── pokemon-table.tsx # Virtualized + sortable Table
│ └── form.tsx # Team builder (Form + Zod)
├── i18n/ # Localization
├── mocks/ # MSW handlers
├── test/ # Test setup
├── utils/
├── queryClient.ts # TanStack Query config
├── router.tsx # Router setup
└── main.tsx # Entry point
- Home (
/) — Pokémon grid backed by TanStack Query against PokeAPI, with loading/error states. - Pokémon Table (
/pokemon-table) — Virtualized + sortable + filterable table powered by TanStack Table + Virtual. - Team Builder (
/form) — Form with field-level validation via TanStack Form + Zod, with optimistic updates.
Vercel-ready out of the box (vercel.json included):
npm i -g vercel
vercel --prod100_PERCENT_COMPLETE.md— feature checklistFINAL_FEATURES.md— complete feature inventoryASSESSMENT_REPORT.md— engineering quality assessmentACCESSIBILITY_STATEMENT.md— a11y conformanceSECURITY.md— security policyCHANGELOG.md— release history
ISC