# delrhen/my-web-dev architecture

> Architecture diagram of the GitHub repository delrhen/my-web-dev, 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/delrhen/my-web-dev
- Repository: https://github.com/delrhen/my-web-dev

## Overview

The main product is the VALORANT Agent Archive in api-3: users browse agents, inspect profiles and abilities, compare agents, save favorites, explore maps and strategies, and browse cosmetics. Page controllers fetch and render data through the API client, with local browser storage for favorites and comparison state. The tree also contains separate small/static projects; with no README or sampled implementation tying them to the archive, they are not represented as one product. Some page controllers are only partially sampled, so links to their undocumented dependencies are omitted.

Main entry points: [`api-3/js/api.js`](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/api.js) (API client), [`api-3/js/agent-profile.js`](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/agent-profile.js) (Agent profile), [`api-3/js/compare.js`](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/compare.js) (Agent comparison), [`api-3/js/favorites.js`](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/favorites.js) (Favorites)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Archive experience"]
  node_agent_browse["Agent browser<br/>[agents.js]"]
  node_agent_profile["Agent profile<br/>[agent-profile.js]"]
  node_comparison["Agent comparison<br/>[compare.js]"]
  node_favorites["Favorites<br/>[favorites.js]"]
  node_collections["Cosmetic collections<br/>[collections.js]"]
  node_home["Home page<br/>[home.js]"]
end

subgraph group_reference["Game reference"]
  node_map_browser["Map browser<br/>[maps.js]"]
  node_map_detail["Map tactics<br/>[map-detail.js]"]
  node_strategies["Curated strategies<br/>[map-strategies.js]"]
end

subgraph group_platform["Client platform"]
  node_api_client["API client<br/>[api.js]"]
  node_ui_components["UI components<br/>[components.js]"]
  node_storage[("Browser storage<br/>[storage.js]")]
  node_app_init["App initialization<br/>[app.js]"]
end

node_visitor(("Visitor"))
node_valorant_api{{"VALORANT API"}}

node_visitor -->|"browses agents"| node_agent_browse
node_visitor -->|"opens profile"| node_agent_profile
node_visitor -->|"compares agents"| node_comparison
node_visitor -->|"views favorites"| node_favorites
node_visitor -->|"browses cosmetics"| node_collections
node_visitor -->|"browses maps"| node_map_browser
node_visitor -->|"opens map"| node_map_detail
node_agent_browse -->|"fetches agents"| node_api_client
node_agent_browse -->|"renders cards"| node_ui_components
node_agent_profile -->|"fetches profile"| node_api_client
node_agent_profile -->|"updates favorites"| node_storage
node_agent_profile -->|"formats profile"| node_ui_components
node_comparison -->|"loads agents"| node_api_client
node_comparison -->|"tracks selection"| node_storage
node_comparison -->|"formats comparison"| node_ui_components
node_favorites -->|"loads agents"| node_api_client
node_favorites -->|"reads favorites"| node_storage
node_favorites -->|"renders agents"| node_ui_components
node_collections -->|"loads items"| node_api_client
node_map_browser -->|"loads maps"| node_api_client
node_map_detail -->|"loads map data"| node_api_client
node_map_detail -.->|"gets strategies"| node_strategies
node_app_init -->|"checks version"| node_api_client
node_api_client -->|"fetches game data"| node_valorant_api

click node_agent_browse "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/agents.js"
click node_agent_profile "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/agent-profile.js"
click node_comparison "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/compare.js"
click node_favorites "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/favorites.js"
click node_collections "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/collections.js"
click node_home "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/home.js"
click node_map_browser "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/maps.js"
click node_map_detail "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/map-detail.js"
click node_strategies "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/map-strategies.js"
click node_api_client "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/api.js"
click node_ui_components "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/components.js"
click node_storage "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/storage.js"
click node_app_init "https://github.com/delrhen/my-web-dev/blob/main/api-3/js/app.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_agent_browse,node_agent_profile,node_comparison,node_favorites,node_collections,node_home toneBlue
class node_map_browser,node_map_detail,node_strategies toneAmber
class node_api_client,node_ui_components,node_storage,node_app_init,node_valorant_api toneMint
class node_visitor toneIndigo
```

## Components

### Archive experience

- [Agent browser](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/agents.js): `api-3/js/agents.js`
- [Agent profile](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/agent-profile.js): `api-3/js/agent-profile.js`
- [Agent comparison](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/compare.js): `api-3/js/compare.js`
- [Favorites](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/favorites.js): `api-3/js/favorites.js`
- [Cosmetic collections](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/collections.js): `api-3/js/collections.js`
- [Home page](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/home.js): `api-3/js/home.js`

### Game reference

- [Map browser](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/maps.js): `api-3/js/maps.js`
- [Map tactics](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/map-detail.js): `api-3/js/map-detail.js`
- [Curated strategies](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/map-strategies.js): `api-3/js/map-strategies.js`

### Client platform

- [API client](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/api.js): `api-3/js/api.js`
- [UI components](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/components.js): `api-3/js/components.js`
- [Browser storage](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/storage.js): `api-3/js/storage.js`
- [App initialization](https://github.com/delrhen/my-web-dev/blob/main/api-3/js/app.js): `api-3/js/app.js`

### Other components

- **Visitor**
- **VALORANT API**

## Connections

- Visitor → Agent browser: browses agents (evidence: `api-3/js/agents.js`)
- Visitor → Agent profile: opens profile (evidence: `api-3/js/agent-profile.js`)
- Visitor → Agent comparison: compares agents (evidence: `api-3/js/compare.js`)
- Visitor → Favorites: views favorites (evidence: `api-3/js/favorites.js`)
- Visitor → Cosmetic collections: browses cosmetics (evidence: `api-3/js/collections.js`)
- Visitor → Map browser: browses maps (evidence: `api-3/js/maps.js`)
- Visitor → Map tactics: opens map (evidence: `api-3/js/map-detail.js`)
- Agent browser → API client: fetches agents (evidence: `api-3/js/agents.js`)
- Agent browser → UI components: renders cards (evidence: `api-3/js/agents.js`)
- Agent profile → API client: fetches profile (evidence: `api-3/js/agent-profile.js`)
- Agent profile → Browser storage: updates favorites (evidence: `api-3/js/agent-profile.js`)
- Agent profile → UI components: formats profile (evidence: `api-3/js/agent-profile.js`)
- Agent comparison → API client: loads agents (evidence: `api-3/js/compare.js`)
- Agent comparison → Browser storage: tracks selection (evidence: `api-3/js/compare.js`)
- Agent comparison → UI components: formats comparison (evidence: `api-3/js/compare.js`)
- Favorites → API client: loads agents (evidence: `api-3/js/favorites.js`)
- Favorites → Browser storage: reads favorites (evidence: `api-3/js/favorites.js`)
- Favorites → UI components: renders agents (evidence: `api-3/js/favorites.js`)
- Cosmetic collections → API client: loads items (evidence: `api-3/js/collections.js`)
- Map browser → API client: loads maps (evidence: `api-3/js/maps.js`)
- Map tactics → API client: loads map data (evidence: `api-3/js/map-detail.js`)
- Map tactics → Curated strategies: gets strategies
- App initialization → API client: checks version (evidence: `api-3/js/app.js`)
- API client → VALORANT API: fetches game data (evidence: `api-3/js/api.js`)