# hamidou-ctr/pokemon architecture

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

- Interactive diagram: https://gitdiagram.com/hamidou-ctr/pokemon
- Repository: https://github.com/hamidou-ctr/pokemon

## Overview

This is a browser-based Pokédex for searching and browsing Pokémon, then opening a detail view with specialized tabs. The main workflow loads and filters the catalog, displays cards, and opens a Pokémon detail overlay; the tabs present profile, evolution, matchup, statistics, and move-learning information. Shared state, cached API access, and reusable HTML helpers are internal layers. The excerpts establish the detail-tab registration pattern and several data-fetching behaviors; some cross-module wiring and unsampled tab implementations remain unverified.

Main entry points: [`js/pokemon-detail.js`](https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-detail.js) (Detail overlay), [`js/pokemon-list.js`](https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-list.js) (Search and list), [`js/data-loading.js`](https://github.com/hamidou-ctr/pokemon/blob/main/js/data-loading.js) (Cached API access), [`js/tabs/moves.js`](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/moves.js) (Moves learnset)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Pokédex catalog"]
  node_catalog_ui["Search and list<br/>[pokemon-list.js]"]
  node_pokemon_cards["Pokémon cards<br/>[pokemon-list.js]"]
end

subgraph group_detail["Pokémon details"]
  node_detail_view["Detail overlay<br/>[pokemon-detail.js]"]
  node_tab_registration["Tab registration<br/>[pokemon-detail.js]"]
end

subgraph group_tabs["Detail tabs"]
  node_about_tab["About profile<br/>[about.js]"]
  node_evolution_tab["Evolution tree<br/>[evolution.js]"]
  node_matchups_tab["Type matchups<br/>[matchups.js]"]
  node_stats_tab["Base statistics<br/>[stats.js]"]
  node_moves_tab["Moves learnset<br/>[moves.js]"]
  node_game_selector["Game selector"]
  node_moves_help["Moves guide<br/>[moves-help.js]"]
end

subgraph group_shared["Shared runtime"]
  node_state["Shared page state<br/>[state.js]"]
  node_data_access["Cached API access<br/>[data-loading.js]"]
  node_components["HTML components<br/>[components.js]"]
  node_configuration["App configuration<br/>[configuration.js]"]
end

node_visitor(("Visitor"))
node_pokeapi[("PokéAPI")]

node_visitor -->|"searches and browses"| node_catalog_ui
node_catalog_ui -.->|"requests Pokémon data"| node_data_access
node_catalog_ui -->|"renders results"| node_pokemon_cards
node_catalog_ui -->|"updates list state"| node_state
node_pokemon_cards -.->|"opens details"| node_detail_view
node_visitor -->|"opens a Pokémon"| node_detail_view
node_detail_view -->|"tracks selection"| node_state
node_detail_view -->|"shows registered tabs"| node_tab_registration
node_about_tab -->|"registers tab"| node_tab_registration
node_evolution_tab -->|"registers tab"| node_tab_registration
node_matchups_tab -.->|"registers tab"| node_tab_registration
node_stats_tab -->|"registers tab"| node_tab_registration
node_moves_tab -->|"registers tab"| node_tab_registration
node_detail_view -->|"renders selected tab"| node_about_tab
node_detail_view -->|"renders selected tab"| node_evolution_tab
node_detail_view -.->|"renders selected tab"| node_matchups_tab
node_detail_view -.->|"renders selected tab"| node_stats_tab
node_detail_view -.->|"renders selected tab"| node_moves_tab
node_about_tab -->|"fetches profile data"| node_data_access
node_evolution_tab -->|"fetches evolution data"| node_data_access
node_detail_view -->|"fetches species data"| node_data_access
node_data_access -->|"fetches JSON"| node_pokeapi
node_game_selector -->|"selects game"| node_moves_tab
node_moves_help -.->|"guides move viewing"| node_moves_tab
node_stats_tab -->|"builds bar rows"| node_components
node_configuration -.->|"configures list"| node_catalog_ui

click node_catalog_ui "https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-list.js"
click node_pokemon_cards "https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-list.js"
click node_detail_view "https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-detail.js"
click node_about_tab "https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/about.js"
click node_evolution_tab "https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/evolution.js"
click node_matchups_tab "https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/matchups.js"
click node_stats_tab "https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/stats.js"
click node_moves_tab "https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/moves.js"
click node_game_selector "https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/moves-game-select.js"
click node_moves_help "https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/moves-help.js"
click node_tab_registration "https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-detail.js"
click node_state "https://github.com/hamidou-ctr/pokemon/blob/main/js/state.js"
click node_data_access "https://github.com/hamidou-ctr/pokemon/blob/main/js/data-loading.js"
click node_components "https://github.com/hamidou-ctr/pokemon/blob/main/js/components.js"
click node_configuration "https://github.com/hamidou-ctr/pokemon/blob/main/js/configuration.js"

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_catalog_ui,node_pokemon_cards toneBlue
class node_detail_view,node_tab_registration,node_pokeapi toneAmber
class node_about_tab,node_evolution_tab,node_matchups_tab,node_stats_tab,node_moves_tab,node_game_selector,node_moves_help toneMint
class node_state,node_data_access,node_components,node_configuration toneRose
class node_visitor toneIndigo
```

## Components

### Pokédex catalog

- [Search and list](https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-list.js): `js/pokemon-list.js`
- [Pokémon cards](https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-list.js): `js/pokemon-list.js`

### Pokémon details

- [Detail overlay](https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-detail.js): `js/pokemon-detail.js`
- [Tab registration](https://github.com/hamidou-ctr/pokemon/blob/main/js/pokemon-detail.js): `js/pokemon-detail.js`

### Detail tabs

- [About profile](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/about.js): `js/tabs/about.js`
- [Evolution tree](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/evolution.js): `js/tabs/evolution.js`
- [Type matchups](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/matchups.js): `js/tabs/matchups.js`
- [Base statistics](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/stats.js): `js/tabs/stats.js`
- [Moves learnset](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/moves.js): `js/tabs/moves.js`
- [Game selector](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/moves-game-select.js): `js/tabs/moves-game-select.js`
- [Moves guide](https://github.com/hamidou-ctr/pokemon/blob/main/js/tabs/moves-help.js): `js/tabs/moves-help.js`

### Shared runtime

- [Shared page state](https://github.com/hamidou-ctr/pokemon/blob/main/js/state.js): `js/state.js`
- [Cached API access](https://github.com/hamidou-ctr/pokemon/blob/main/js/data-loading.js): `js/data-loading.js`
- [HTML components](https://github.com/hamidou-ctr/pokemon/blob/main/js/components.js): `js/components.js`
- [App configuration](https://github.com/hamidou-ctr/pokemon/blob/main/js/configuration.js): `js/configuration.js`

### Other components

- **Visitor**
- **PokéAPI**

## Connections

- Visitor → Search and list: searches and browses (evidence: `js/pokemon-list.js`)
- Search and list → Cached API access: requests Pokémon data
- Search and list → Pokémon cards: renders results (evidence: `js/pokemon-list.js`)
- Search and list → Shared page state: updates list state (evidence: `js/state.js`)
- Pokémon cards → Detail overlay: opens details
- Visitor → Detail overlay: opens a Pokémon (evidence: `js/pokemon-detail.js`)
- Detail overlay → Shared page state: tracks selection (evidence: `js/state.js`)
- Detail overlay → Tab registration: shows registered tabs (evidence: `js/pokemon-detail.js`)
- About profile → Tab registration: registers tab (evidence: `js/tabs/about.js`)
- Evolution tree → Tab registration: registers tab (evidence: `js/tabs/evolution.js`)
- Type matchups → Tab registration: registers tab
- Base statistics → Tab registration: registers tab (evidence: `js/tabs/stats.js`)
- Moves learnset → Tab registration: registers tab (evidence: `js/tabs/moves.js`)
- Detail overlay → About profile: renders selected tab (evidence: `js/pokemon-detail.js`)
- Detail overlay → Evolution tree: renders selected tab (evidence: `js/pokemon-detail.js`)
- Detail overlay → Type matchups: renders selected tab
- Detail overlay → Base statistics: renders selected tab
- Detail overlay → Moves learnset: renders selected tab
- About profile → Cached API access: fetches profile data (evidence: `js/tabs/about.js`)
- Evolution tree → Cached API access: fetches evolution data (evidence: `js/tabs/evolution.js`)
- Detail overlay → Cached API access: fetches species data (evidence: `js/pokemon-detail.js`)
- Cached API access → PokéAPI: fetches JSON (evidence: `js/data-loading.js`)
- Game selector → Moves learnset: selects game (evidence: `js/tabs/moves-game-select.js`)
- Moves guide → Moves learnset: guides move viewing
- Base statistics → HTML components: builds bar rows (evidence: `js/tabs/stats.js`)
- App configuration → Search and list: configures list