# buzadandeveloper/rxjs-poke-games architecture

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

- Interactive diagram: https://gitdiagram.com/buzadandeveloper/rxjs-poke-games
- Repository: https://github.com/buzadandeveloper/rxjs-poke-games

## Overview

This React app is a Pokémon-themed learning project with a Pokédex and a memory game. Users enter through the app router; the main domain branches are browsing Pokémon and playing a matching game. The documented reactive-state learning goal is reflected in the stores and API service layer. Sampled code confirms the app-to-router and service-to-client calls; page, store, and persistence wiring is not shown in the excerpts, so those links are omitted.

Main entry points: [`src/main.tsx`](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/main.tsx) (React entry), [`src/app/app.tsx`](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/app/app.tsx) (App), [`src/lib/api-client.ts`](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/lib/api-client.ts) (API client), [`src/service/index.ts`](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/service/index.ts) (Pokémon service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App<br/>[app.tsx]"]
  node_router["Router<br/>[index.tsx]"]
  node_layout["Main layout<br/>[main-layout.tsx]"]
  node_home["Home page<br/>[home-page.tsx]"]
end

subgraph group_browse["Pokédex"]
  node_dexpage["Pokédex page<br/>[poke-dex-page.tsx]"]
  node_dexlist["Pokémon list<br/>[poke-dex-list.tsx]"]
  node_dexcard["Pokémon card<br/>[poke-dex-card.tsx]"]
  node_dexmodal["Info modal"]
  node_dexstore["Pokédex store<br/>[poke-dex-store.ts]"]
end

subgraph group_game["Memory game"]
  node_gamepage["Game page"]
  node_deckselect["Deck selection<br/>[select-deck.tsx]"]
  node_decklist["Card deck<br/>[deck-list.tsx]"]
  node_score["Game score<br/>[game-score.tsx]"]
  node_win["Win dialog"]
  node_gamestore["Game store"]
  node_persistence["Best-turn storage<br/>[local-storage.ts]"]
end

subgraph group_data["Data services"]
  node_service["Pokémon service<br/>[index.ts]"]
  node_client["API client<br/>[api-client.ts]"]
end

node_visitor(("User"))
node_pokeapi(("PokéAPI"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"provides routes"| node_router
node_service -->|"requests data"| node_client
node_client -->|"GETs Pokémon"| node_pokeapi

click node_entry "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/main.tsx"
click node_app "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/app/app.tsx"
click node_router "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/app/router/index.tsx"
click node_layout "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/layouts/main-layout/main-layout.tsx"
click node_home "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/home/home-page.tsx"
click node_dexpage "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/poke-dex-page.tsx"
click node_dexlist "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/components/poke-dex-list/poke-dex-list.tsx"
click node_dexcard "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/components/poke-dex-list/poke-dex-card.tsx"
click node_dexmodal "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/components/poke-dex-list/poke-dex-info-modal.tsx"
click node_dexstore "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/stores/poke-dex/poke-dex-store.ts"
click node_gamepage "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/poke-memory-game-page.tsx"
click node_deckselect "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/select-deck/select-deck.tsx"
click node_decklist "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/deck-list/deck-list.tsx"
click node_score "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/game-score.tsx"
click node_win "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/game-win-dialog.tsx"
click node_gamestore "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/stores/poke-memory-game/poke-memory-game-store.ts"
click node_persistence "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/utils/local-storage.ts"
click node_service "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/service/index.ts"
click node_client "https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/lib/api-client.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_entry,node_app,node_router,node_layout,node_home,node_visitor toneBlue
class node_dexpage,node_dexlist,node_dexcard,node_dexmodal,node_dexstore toneAmber
class node_gamepage,node_deckselect,node_decklist,node_score,node_win,node_gamestore,node_persistence,node_pokeapi toneMint
class node_service,node_client toneRose
```

## Components

### App shell

- [React entry](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/main.tsx): `src/main.tsx`
- [App](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/app/app.tsx): `src/app/app.tsx`
- [Router](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/app/router/index.tsx): `src/app/router/index.tsx`
- [Main layout](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/layouts/main-layout/main-layout.tsx): `src/layouts/main-layout/main-layout.tsx`
- [Home page](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/home/home-page.tsx): `src/pages/home/home-page.tsx`

### Pokédex

- [Pokédex page](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/poke-dex-page.tsx): `src/pages/poke-dex/poke-dex-page.tsx`
- [Pokémon list](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/components/poke-dex-list/poke-dex-list.tsx): `src/pages/poke-dex/components/poke-dex-list/poke-dex-list.tsx`
- [Pokémon card](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/components/poke-dex-list/poke-dex-card.tsx): `src/pages/poke-dex/components/poke-dex-list/poke-dex-card.tsx`
- [Info modal](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-dex/components/poke-dex-list/poke-dex-info-modal.tsx): `src/pages/poke-dex/components/poke-dex-list/poke-dex-info-modal.tsx`
- [Pokédex store](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/stores/poke-dex/poke-dex-store.ts): `src/stores/poke-dex/poke-dex-store.ts`

### Memory game

- [Game page](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/poke-memory-game-page.tsx): `src/pages/poke-memory-game/poke-memory-game-page.tsx`
- [Deck selection](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/select-deck/select-deck.tsx): `src/pages/poke-memory-game/components/select-deck/select-deck.tsx`
- [Card deck](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/deck-list/deck-list.tsx): `src/pages/poke-memory-game/components/deck-list/deck-list.tsx`
- [Game score](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/game-score.tsx): `src/pages/poke-memory-game/components/game-score.tsx`
- [Win dialog](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/pages/poke-memory-game/components/game-win-dialog.tsx): `src/pages/poke-memory-game/components/game-win-dialog.tsx`
- [Game store](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/stores/poke-memory-game/poke-memory-game-store.ts): `src/stores/poke-memory-game/poke-memory-game-store.ts`
- [Best-turn storage](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/utils/local-storage.ts): `src/utils/local-storage.ts`

### Data services

- [Pokémon service](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/service/index.ts): `src/service/index.ts`
- [API client](https://github.com/buzadandeveloper/rxjs-poke-games/blob/main/src/lib/api-client.ts): `src/lib/api-client.ts`

### Other components

- **User**
- **PokéAPI**

## Connections

- User → React entry: opens app
- React entry → App: renders
- App → Router: provides routes
- Pokémon service → API client: requests data
- API client → PokéAPI: GETs Pokémon