# decadevinhle/byte_crawler architecture

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

- Interactive diagram: https://gitdiagram.com/decadevinhle/byte_crawler
- Repository: https://github.com/decadevinhle/byte_crawler

## Overview

ByteCrawler is a static, browser-based Python learning game. Learners navigate a hash-routed site, study and run checkpoint lessons, clear them to unlock the boss fight, and track progress; the site also offers a sandbox, Python guide, and Reddit-style community. The graph separates learning, combat, community, and shared site presentation. Some capabilities are documented but their wiring is not shown in the excerpts, so those relationships are omitted rather than inferred.

Main entry points: [`js/course.js`](https://github.com/decadevinhle/byte_crawler/blob/main/js/course.js) (Lessons and challenges), [`js/router.js`](https://github.com/decadevinhle/byte_crawler/blob/main/js/router.js) (Hash router), [`js/boss.js`](https://github.com/decadevinhle/byte_crawler/blob/main/js/boss.js) (Boss quests), [`index.html`](https://github.com/decadevinhle/byte_crawler/blob/main/index.html) (Static site)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Learning path"]
  node_lessons["Lesson content<br/>[lessons-data.js]"]
  node_course["Lessons and challenges<br/>[course.js]"]
  node_python["Python interpreter<br/>[python.js]"]
  node_map["Dungeon map and guide<br/>[map.js]"]
  node_progress["Progress dashboard<br/>[dashboard.js]"]
  node_app_runtime["Application runtime<br/>[app.js]"]
end

subgraph group_combat["Boss fight"]
  node_boss_logic["Boss quests<br/>[boss.js]"]
  node_arena["3D arena effects<br/>[arena.js]"]
end

subgraph group_community["Community"]
  node_community_feed["Community feed<br/>[community.js]"]
end

subgraph group_site["Site presentation"]
  node_site_entry["Static site<br/>[index.html]"]
  node_router["Hash router<br/>[router.js]"]
  node_ui["Navigation and forms<br/>[ui.js]"]
  node_about["About video<br/>[about.js]"]
  node_hero_snow["Hero snow<br/>[snow.js]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_site_entry
node_site_entry -->|"loads pages"| node_router
node_learner -->|"chooses hash page"| node_router
node_router -->|"starts arena"| node_arena
node_router -->|"opens dashboard"| node_progress
node_course -->|"reads lesson data"| node_lessons
node_course -->|"runs code"| node_python
node_course -->|"updates dashboard"| node_progress
node_course -->|"refreshes map"| node_map
node_learner -->|"studies and submits"| node_course
node_learner -->|"submits quest code"| node_boss_logic
node_boss_logic -->|"runs code"| node_python
node_boss_logic -->|"sends fight effects"| node_arena
node_learner -->|"posts and votes"| node_community_feed
node_learner -->|"uses site controls"| node_ui
node_ui -->|"updates contact form"| node_site_entry
node_learner -->|"opens introduction"| node_about
node_learner -->|"views hero"| node_hero_snow

click node_site_entry "https://github.com/decadevinhle/byte_crawler/blob/main/index.html"
click node_router "https://github.com/decadevinhle/byte_crawler/blob/main/js/router.js"
click node_ui "https://github.com/decadevinhle/byte_crawler/blob/main/js/ui.js"
click node_about "https://github.com/decadevinhle/byte_crawler/blob/main/js/about.js"
click node_hero_snow "https://github.com/decadevinhle/byte_crawler/blob/main/js/snow.js"
click node_lessons "https://github.com/decadevinhle/byte_crawler/blob/main/js/lessons-data.js"
click node_course "https://github.com/decadevinhle/byte_crawler/blob/main/js/course.js"
click node_python "https://github.com/decadevinhle/byte_crawler/blob/main/js/python.js"
click node_map "https://github.com/decadevinhle/byte_crawler/blob/main/js/map.js"
click node_progress "https://github.com/decadevinhle/byte_crawler/blob/main/js/dashboard.js"
click node_app_runtime "https://github.com/decadevinhle/byte_crawler/blob/main/js/app.js"
click node_boss_logic "https://github.com/decadevinhle/byte_crawler/blob/main/js/boss.js"
click node_arena "https://github.com/decadevinhle/byte_crawler/blob/main/js/arena.js"
click node_community_feed "https://github.com/decadevinhle/byte_crawler/blob/main/js/community.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_lessons,node_course,node_python,node_map,node_progress,node_app_runtime toneBlue
class node_boss_logic,node_arena toneAmber
class node_community_feed toneMint
class node_site_entry,node_router,node_ui,node_about,node_hero_snow toneRose
class node_learner toneIndigo
```

## Components

### Learning path

- [Lesson content](https://github.com/decadevinhle/byte_crawler/blob/main/js/lessons-data.js): `js/lessons-data.js`
- [Lessons and challenges](https://github.com/decadevinhle/byte_crawler/blob/main/js/course.js): `js/course.js`
- [Python interpreter](https://github.com/decadevinhle/byte_crawler/blob/main/js/python.js): `js/python.js`
- [Dungeon map and guide](https://github.com/decadevinhle/byte_crawler/blob/main/js/map.js): `js/map.js`
- [Progress dashboard](https://github.com/decadevinhle/byte_crawler/blob/main/js/dashboard.js): `js/dashboard.js`
- [Application runtime](https://github.com/decadevinhle/byte_crawler/blob/main/js/app.js): `js/app.js`

### Boss fight

- [Boss quests](https://github.com/decadevinhle/byte_crawler/blob/main/js/boss.js): `js/boss.js`
- [3D arena effects](https://github.com/decadevinhle/byte_crawler/blob/main/js/arena.js): `js/arena.js`

### Community

- [Community feed](https://github.com/decadevinhle/byte_crawler/blob/main/js/community.js): `js/community.js`

### Site presentation

- [Static site](https://github.com/decadevinhle/byte_crawler/blob/main/index.html): `index.html`
- [Hash router](https://github.com/decadevinhle/byte_crawler/blob/main/js/router.js): `js/router.js`
- [Navigation and forms](https://github.com/decadevinhle/byte_crawler/blob/main/js/ui.js): `js/ui.js`
- [About video](https://github.com/decadevinhle/byte_crawler/blob/main/js/about.js): `js/about.js`
- [Hero snow](https://github.com/decadevinhle/byte_crawler/blob/main/js/snow.js): `js/snow.js`

### Other components

- **Learner**

## Connections

- Learner → Static site: opens (evidence: `README.md`)
- Static site → Hash router: loads pages (evidence: `README.md`)
- Learner → Hash router: chooses hash page (evidence: `js/router.js`)
- Hash router → 3D arena effects: starts arena (evidence: `js/router.js`)
- Hash router → Progress dashboard: opens dashboard (evidence: `js/router.js`)
- Lessons and challenges → Lesson content: reads lesson data (evidence: `js/course.js`)
- Lessons and challenges → Python interpreter: runs code (evidence: `js/course.js`)
- Lessons and challenges → Progress dashboard: updates dashboard (evidence: `js/course.js`)
- Lessons and challenges → Dungeon map and guide: refreshes map (evidence: `js/course.js`)
- Learner → Lessons and challenges: studies and submits (evidence: `js/course.js`)
- Learner → Boss quests: submits quest code (evidence: `js/boss.js`)
- Boss quests → Python interpreter: runs code (evidence: `js/boss.js`)
- Boss quests → 3D arena effects: sends fight effects (evidence: `js/boss.js`)
- Learner → Community feed: posts and votes (evidence: `js/community.js`)
- Learner → Navigation and forms: uses site controls (evidence: `js/ui.js`)
- Navigation and forms → Static site: updates contact form (evidence: `js/ui.js`)
- Learner → About video: opens introduction (evidence: `js/about.js`)
- Learner → Hero snow: views hero (evidence: `js/snow.js`)