# hawksk2497/wildriftcodex architecture

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

- Interactive diagram: https://gitdiagram.com/hawksk2497/wildriftcodex
- Repository: https://github.com/hawksk2497/wildriftcodex

## Overview

Wild Rift Codex is a champion browser with an AI-backed playstyle recommender. Users browse and search the champion catalog, open entries with abilities and skins, or describe their preferences to get a recommendation that is checked against stored champion data. The README also documents champion-data ingestion into Postgres. The ingestion implementation and some UI internals were not sampled, so those relationships reflect README documentation rather than inspected source.

Main entry points: [`web/App.tsx`](https://github.com/hawksk2497/wildriftcodex/blob/main/web/App.tsx) (App workflow), [`api/db/index.ts`](https://github.com/hawksk2497/wildriftcodex/blob/main/api/db/index.ts) (Database client), [`api/index.ts`](https://github.com/hawksk2497/wildriftcodex/blob/main/api/index.ts) (Express API), [`api/services/chat.ts`](https://github.com/hawksk2497/wildriftcodex/blob/main/api/services/chat.ts) (Recommendation service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_app["App workflow<br/>[App.tsx]"]
  node_search["Champion search<br/>[ChampionSearch.tsx]"]
  node_grid["Champion grid<br/>[ChampionGrid.tsx]"]
  node_card["Champion entry<br/>[ChampionCard.tsx]"]
  node_finder["Playstyle finder"]
  node_webapi["Web API client<br/>[index.ts]"]
end

subgraph group_api["API services"]
  node_api["Express API<br/>[index.ts]"]
  node_recommend["Recommendation service<br/>[chat.ts]"]
end

subgraph group_data["Champion data"]
  node_dbclient["Database client<br/>[index.ts]"]
  node_schema["Champion schema<br/>[schema.ts]"]
  node_postgres[("Postgres")]
  node_seed["Champion ingestion<br/>[seed.ts]"]
end

subgraph group_integrations["External integrations"]
  node_championsource["Champion data package"]
  node_gemini["Google Gemini"]
end

node_visitor(("Visitor"))

node_visitor -->|"browses"| node_app
node_app -->|"renders"| node_search
node_app -->|"renders"| node_finder
node_app -->|"renders"| node_grid
node_app -->|"renders"| node_card
node_app -->|"loads catalog"| node_webapi
node_finder -->|"requests recommendation"| node_webapi
node_webapi -->|"HTTP requests"| node_api
node_api -->|"queries catalog"| node_dbclient
node_api -->|"delegates recommendation"| node_recommend
node_recommend -->|"generates suggestion"| node_gemini
node_recommend -->|"checks champion"| node_dbclient
node_dbclient -->|"reads and writes"| node_postgres
node_dbclient -->|"uses schema"| node_schema
node_seed -->|"fetches champions"| node_championsource
node_seed -->|"upserts catalog"| node_dbclient

click node_app "https://github.com/hawksk2497/wildriftcodex/blob/main/web/App.tsx"
click node_search "https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/ChampionSearch.tsx"
click node_grid "https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/ChampionGrid.tsx"
click node_card "https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/ChampionCard.tsx"
click node_finder "https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/PlaystyleFinder.tsx"
click node_webapi "https://github.com/hawksk2497/wildriftcodex/blob/main/web/api/index.ts"
click node_api "https://github.com/hawksk2497/wildriftcodex/blob/main/api/index.ts"
click node_recommend "https://github.com/hawksk2497/wildriftcodex/blob/main/api/services/chat.ts"
click node_dbclient "https://github.com/hawksk2497/wildriftcodex/blob/main/api/db/index.ts"
click node_schema "https://github.com/hawksk2497/wildriftcodex/blob/main/api/db/schema.ts"
click node_seed "https://github.com/hawksk2497/wildriftcodex/blob/main/api/scripts/seed.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,node_search,node_grid,node_card,node_finder,node_webapi toneBlue
class node_api,node_recommend toneAmber
class node_dbclient,node_schema,node_postgres,node_seed toneMint
class node_championsource,node_gemini toneRose
class node_visitor toneIndigo
```

## Components

### Web experience

- [App workflow](https://github.com/hawksk2497/wildriftcodex/blob/main/web/App.tsx): `web/App.tsx`
- [Champion search](https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/ChampionSearch.tsx): `web/components/ChampionSearch.tsx`
- [Champion grid](https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/ChampionGrid.tsx): `web/components/ChampionGrid.tsx`
- [Champion entry](https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/ChampionCard.tsx): `web/components/ChampionCard.tsx`
- [Playstyle finder](https://github.com/hawksk2497/wildriftcodex/blob/main/web/components/PlaystyleFinder.tsx): `web/components/PlaystyleFinder.tsx`
- [Web API client](https://github.com/hawksk2497/wildriftcodex/blob/main/web/api/index.ts): `web/api/index.ts`

### API services

- [Express API](https://github.com/hawksk2497/wildriftcodex/blob/main/api/index.ts): `api/index.ts`
- [Recommendation service](https://github.com/hawksk2497/wildriftcodex/blob/main/api/services/chat.ts): `api/services/chat.ts`

### Champion data

- [Database client](https://github.com/hawksk2497/wildriftcodex/blob/main/api/db/index.ts): `api/db/index.ts`
- [Champion schema](https://github.com/hawksk2497/wildriftcodex/blob/main/api/db/schema.ts): `api/db/schema.ts`
- **Postgres**
- [Champion ingestion](https://github.com/hawksk2497/wildriftcodex/blob/main/api/scripts/seed.ts): `api/scripts/seed.ts`

### External integrations

- **Champion data package**
- **Google Gemini**

### Other components

- **Visitor**

## Connections

- Visitor → App workflow: browses
- App workflow → Champion search: renders
- App workflow → Playstyle finder: renders
- App workflow → Champion grid: renders
- App workflow → Champion entry: renders
- App workflow → Web API client: loads catalog
- Playstyle finder → Web API client: requests recommendation
- Web API client → Express API: HTTP requests
- Express API → Database client: queries catalog
- Express API → Recommendation service: delegates recommendation
- Recommendation service → Google Gemini: generates suggestion
- Recommendation service → Database client: checks champion
- Database client → Postgres: reads and writes
- Database client → Champion schema: uses schema
- Champion ingestion → Champion data package: fetches champions
- Champion ingestion → Database client: upserts catalog