# henrique2020/code-x architecture

> Architecture diagram of the GitHub repository henrique2020/code-x, 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/henrique2020/code-x
- Repository: https://github.com/henrique2020/code-x

## Overview

Codex is a browser-based catalog for listing and viewing solved programming-competition problems. Its main workflow loads language folders and problem files from GitHub, renders a searchable navigation list, fetches a selected solution, decodes and highlights its code, and caches it for later viewing. The graph reflects the sampled JavaScript; repository contents and page markup are not otherwise shown, so no additional capabilities or connections are inferred.

Main entry points: [`scripts.js`](https://github.com/henrique2020/code-x/blob/main/scripts.js) (App Controller), [`api.js`](https://github.com/henrique2020/code-x/blob/main/api.js) (GitHub API Client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Catalog UI"]
  node_ui["Menu and Viewer<br/>[scripts.js]"]
end

subgraph group_runtime["Application Runtime"]
  node_app["App Controller<br/>[scripts.js]"]
  node_cache["Local Cache<br/>[scripts.js]"]
  node_utils["Code Utilities<br/>[scripts.js]"]
end

subgraph group_remote["GitHub Access"]
  node_github_api["GitHub API Client<br/>[api.js]"]
end

node_visitor(("Visitor"))
node_github["GitHub Contents API"]
node_prism["Prism Highlighter"]

node_visitor -->|"searches and selects"| node_ui
node_ui -->|"selects file"| node_app
node_app -->|"loads structure"| node_github_api
node_github_api -->|"requests contents"| node_github
node_github_api -->|"returns structure"| node_app
node_app -->|"renders menu"| node_ui
node_app -->|"checks and stores"| node_cache
node_app -->|"fetches selected file"| node_github_api
node_github_api -->|"requests file"| node_github
node_github_api -->|"returns content"| node_app
node_app -->|"decodes and detects language"| node_utils
node_app -->|"updates code view"| node_ui
node_ui -->|"highlights code"| node_prism

click node_app "https://github.com/henrique2020/code-x/blob/main/scripts.js"
click node_cache "https://github.com/henrique2020/code-x/blob/main/scripts.js"
click node_utils "https://github.com/henrique2020/code-x/blob/main/scripts.js"
click node_ui "https://github.com/henrique2020/code-x/blob/main/scripts.js"
click node_github_api "https://github.com/henrique2020/code-x/blob/main/api.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_ui toneBlue
class node_app,node_cache,node_utils toneAmber
class node_github_api,node_github toneMint
class node_visitor,node_prism toneIndigo
```

## Components

### Catalog UI

- [Menu and Viewer](https://github.com/henrique2020/code-x/blob/main/scripts.js): `scripts.js`

### Application Runtime

- [App Controller](https://github.com/henrique2020/code-x/blob/main/scripts.js): `scripts.js`
- [Local Cache](https://github.com/henrique2020/code-x/blob/main/scripts.js): `scripts.js`
- [Code Utilities](https://github.com/henrique2020/code-x/blob/main/scripts.js): `scripts.js`

### GitHub Access

- [GitHub API Client](https://github.com/henrique2020/code-x/blob/main/api.js): `api.js`

### Other components

- **Visitor**
- **GitHub Contents API**
- **Prism Highlighter**

## Connections

- Visitor → Menu and Viewer: searches and selects (evidence: `scripts.js`)
- Menu and Viewer → App Controller: selects file (evidence: `scripts.js`)
- App Controller → GitHub API Client: loads structure (evidence: `scripts.js`)
- GitHub API Client → GitHub Contents API: requests contents (evidence: `api.js`)
- GitHub API Client → App Controller: returns structure (evidence: `api.js`)
- App Controller → Menu and Viewer: renders menu (evidence: `scripts.js`)
- App Controller → Local Cache: checks and stores (evidence: `scripts.js`)
- App Controller → GitHub API Client: fetches selected file (evidence: `scripts.js`)
- GitHub API Client → GitHub Contents API: requests file (evidence: `api.js`)
- GitHub API Client → App Controller: returns content (evidence: `api.js`)
- App Controller → Code Utilities: decodes and detects language (evidence: `scripts.js`)
- App Controller → Menu and Viewer: updates code view (evidence: `scripts.js`)
- Menu and Viewer → Prism Highlighter: highlights code (evidence: `scripts.js`)