# amiyokm/tanstack_router_with_shadcn_template architecture

> Architecture diagram of the GitHub repository amiyokm/tanstack_router_with_shadcn_template, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/amiyokm/tanstack_router_with_shadcn_template
- Repository: https://github.com/amiyokm/tanstack_router_with_shadcn_template

## Overview

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: [`src/routeTree.gen.ts`](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routeTree.gen.ts) (Route tree), [`src/routes/pokemons/index.tsx`](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/pokemons/index.tsx) (Pokémon listing), [`src/api/pokemon.ts`](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/api/pokemon.ts) (Pokémon queries), [`src/components/ui`](https://github.com/amiyokm/tanstack_router_with_shadcn_template/tree/main/src/components/ui) (UI components)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app_entry["React entry<br/>[main.tsx]"]
  node_route_tree["Route tree<br/>[routeTree.gen.ts]"]
  node_shell["Shared navigation<br/>[__root.tsx]"]
  node_home["Home page<br/>[index.tsx]"]
  node_about["About page<br/>[about.tsx]"]
end

subgraph group_browse["Pokémon browsing"]
  node_listing["Pokémon listing<br/>[index.tsx]"]
  node_detail["Pokémon detail<br/>[$id.tsx]"]
  node_moves["Move details<br/>[moves.$id.tsx]"]
  node_search_schema["Search validation<br/>[queries.ts]"]
end

subgraph group_data["Data access"]
  node_api["Pokémon queries<br/>[pokemon.ts]"]
  node_pokemon_types["Pokémon data types<br/>[pokemon.ts]"]
end

subgraph group_ui["Presentation"]
  node_ui_components["UI components"]
  node_class_utils["Class utilities<br/>[utils.ts]"]
end

node_visitor(("Visitor"))
node_pokeapi["PokeAPI"]

node_visitor -->|"opens app"| node_app_entry
node_app_entry -->|"registers routes"| node_route_tree
node_route_tree -->|"sets root route"| node_shell
node_route_tree -->|"registers route"| node_home
node_route_tree -->|"registers route"| node_about
node_route_tree -->|"registers route"| node_listing
node_route_tree -->|"registers route"| node_detail
node_route_tree -->|"registers route"| node_moves
node_shell -->|"links to"| node_listing
node_listing -->|"validates search"| node_search_schema
node_listing -->|"loads page data"| node_api
node_detail -->|"loads Pokémon"| node_api
node_moves -->|"loads Pokémon"| node_api
node_api -->|"requests data"| node_pokeapi
node_api -->|"types responses"| node_pokemon_types
node_listing -->|"renders controls"| node_ui_components
node_detail -->|"renders details"| node_ui_components
node_moves -->|"renders moves"| node_ui_components
node_ui_components -->|"merges classes"| node_class_utils

click node_app_entry "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/main.tsx"
click node_route_tree "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routeTree.gen.ts"
click node_shell "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/__root.tsx"
click node_home "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/index.tsx"
click node_about "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/about.tsx"
click node_listing "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/pokemons/index.tsx"
click node_detail "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/pokemons/%24id.tsx"
click node_moves "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/pokemons/moves.%24id.tsx"
click node_search_schema "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/schema/queries.ts"
click node_api "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/api/pokemon.ts"
click node_pokemon_types "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/types/pokemon.ts"
click node_ui_components "https://github.com/amiyokm/tanstack_router_with_shadcn_template/tree/main/src/components/ui"
click node_class_utils "https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/lib/utils.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_entry,node_route_tree,node_shell,node_home,node_about toneBlue
class node_listing,node_detail,node_moves,node_search_schema toneAmber
class node_api,node_pokemon_types,node_pokeapi toneMint
class node_ui_components,node_class_utils toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/main.tsx): `src/main.tsx`
- [Route tree](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routeTree.gen.ts): `src/routeTree.gen.ts`
- [Shared navigation](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`
- [Home page](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [About page](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/about.tsx): `src/routes/about.tsx`

### Pokémon browsing

- [Pokémon listing](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/pokemons/index.tsx): `src/routes/pokemons/index.tsx`
- [Pokémon detail](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/pokemons/%24id.tsx): `src/routes/pokemons/$id.tsx`
- [Move details](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/routes/pokemons/moves.%24id.tsx): `src/routes/pokemons/moves.$id.tsx`
- [Search validation](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/schema/queries.ts): `src/schema/queries.ts`

### Data access

- [Pokémon queries](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/api/pokemon.ts): `src/api/pokemon.ts`
- [Pokémon data types](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/types/pokemon.ts): `src/types/pokemon.ts`

### Presentation

- [UI components](https://github.com/amiyokm/tanstack_router_with_shadcn_template/tree/main/src/components/ui): `src/components/ui`
- [Class utilities](https://github.com/amiyokm/tanstack_router_with_shadcn_template/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Other components

- **Visitor**
- **PokeAPI**

## Connections

- Visitor → React entry: opens app (evidence: `src/main.tsx`)
- React entry → Route tree: registers routes (evidence: `src/main.tsx`)
- Route tree → Shared navigation: sets root route (evidence: `src/routeTree.gen.ts`)
- Route tree → Home page: registers route (evidence: `src/routeTree.gen.ts`)
- Route tree → About page: registers route (evidence: `src/routeTree.gen.ts`)
- Route tree → Pokémon listing: registers route (evidence: `src/routeTree.gen.ts`)
- Route tree → Pokémon detail: registers route (evidence: `src/routeTree.gen.ts`)
- Route tree → Move details: registers route (evidence: `src/routeTree.gen.ts`)
- Shared navigation → Pokémon listing: links to (evidence: `src/routes/__root.tsx`)
- Pokémon listing → Search validation: validates search (evidence: `src/routes/pokemons/index.tsx`)
- Pokémon listing → Pokémon queries: loads page data (evidence: `src/routes/pokemons/index.tsx`)
- Pokémon detail → Pokémon queries: loads Pokémon (evidence: `src/routes/pokemons/$id.tsx`)
- Move details → Pokémon queries: loads Pokémon (evidence: `src/routes/pokemons/moves.$id.tsx`)
- Pokémon queries → PokeAPI: requests data (evidence: `src/api/pokemon.ts`)
- Pokémon queries → Pokémon data types: types responses (evidence: `src/api/pokemon.ts`)
- Pokémon listing → UI components: renders controls (evidence: `src/routes/pokemons/index.tsx`)
- Pokémon detail → UI components: renders details (evidence: `src/routes/pokemons/$id.tsx`)
- Move details → UI components: renders moves (evidence: `src/routes/pokemons/moves.$id.tsx`)
- UI components → Class utilities: merges classes (evidence: `src/components/ui/button.tsx`)