How amiyokm/tanstack_router_with_shadcn_template works
This is a React Pokémon browser, not the generic Vite template described by the README. A visitor navigates from the shared shell to a paginated Pokémon list, then to a Pokémon detail page and its move listing. Route loaders use React Query to fetch Pokémon data from PokeAPI; shared UI components render the results. The route tree and data-fetching paths are supported by excerpts and the source index. The home, About, and query-schema implementations were not excerpted, so their behavior is not inferred.
Main entry points: routeTree.gen.ts Route tree · index.tsx Pokémon listing · pokemon.ts Pokémon queries · ui UI components
Components 15
Application shell
- React entry
src/main.tsx - Route tree
src/routeTree.gen.ts - Shared navigation
src/routes/__root.tsx - Home page
src/routes/index.tsx - About page
src/routes/about.tsx
Pokémon browsing
- Pokémon listing
src/routes/pokemons/index.tsx - Pokémon detail
src/routes/pokemons/$id.tsx - Move details
src/routes/pokemons/moves.$id.tsx - Search validation
src/schema/queries.ts
Data access
- Pokémon queries
src/api/pokemon.ts - Pokémon data types
src/types/pokemon.ts
Presentation
- UI components
src/components/ui - Class utilities
src/lib/utils.ts
Other components
- Visitor
- PokeAPI
Connections 19
- Visitor → React entry: opens app
src/main.tsx - React entry → Route tree: registers routes
src/main.tsx - Route tree → Shared navigation: sets root route
src/routeTree.gen.ts - Route tree → Home page: registers route
src/routeTree.gen.ts - Route tree → About page: registers route
src/routeTree.gen.ts - Route tree → Pokémon listing: registers route
src/routeTree.gen.ts - Route tree → Pokémon detail: registers route
src/routeTree.gen.ts - Route tree → Move details: registers route
src/routeTree.gen.ts - Shared navigation → Pokémon listing: links to
src/routes/__root.tsx - Pokémon listing → Search validation: validates search
src/routes/pokemons/index.tsx - Pokémon listing → Pokémon queries: loads page data
src/routes/pokemons/index.tsx - Pokémon detail → Pokémon queries: loads Pokémon
src/routes/pokemons/$id.tsx - Move details → Pokémon queries: loads Pokémon
src/routes/pokemons/moves.$id.tsx - Pokémon queries → PokeAPI: requests data
src/api/pokemon.ts - Pokémon queries → Pokémon data types: types responses
src/api/pokemon.ts - Pokémon listing → UI components: renders controls
src/routes/pokemons/index.tsx - Pokémon detail → UI components: renders details
src/routes/pokemons/$id.tsx - Move details → UI components: renders moves
src/routes/pokemons/moves.$id.tsx - UI components → Class utilities: merges classes
src/components/ui/button.tsx