# magentakey/labu-kindle-book-algoritma architecture

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

- Interactive diagram: https://gitdiagram.com/magentakey/labu-kindle-book-algoritma
- Repository: https://github.com/magentakey/labu-kindle-book-algoritma

## Overview

This is an Indonesian-language interactive algorithms learning application. Learners browse algorithm visualizations or course modules, inspect step-by-step traces, take quizzes, and retain study progress. The sampled routing and imports establish the main page flow and several visualization dependencies; the broader module, quiz, and challenge branches are represented from the source tree and index, so their internal connections are left unasserted where wiring was not shown.

Main entry points: [`src/App.jsx`](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/App.jsx) (Route Shell), [`src/pages/ModulDetail.jsx`](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/ModulDetail.jsx) (Module Pages), [`src/pages/AlgoritmaDetail.jsx`](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/AlgoritmaDetail.jsx) (Algorithm Detail), [`src/materi/useProgress.js`](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/materi/useProgress.js) (Study Progress)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_routes["Route Shell<br/>[App.jsx]"]
  node_shell["Navigation Shell<br/>[AppShell.jsx]"]
  node_pwa_events["Offline And PWA<br/>[PwaEvents.jsx]"]
  node_ui_kit["UI Kit<br/>[UiKit.jsx]"]
end

subgraph group_learning["Learning Content"]
  node_course_pages["Module Pages<br/>[ModulDetail.jsx]"]
  node_course_metadata["Module Metadata<br/>[modul.js]"]
  node_course_content["Module Content<br/>[index.js]"]
  node_course_components["Learning Components<br/>[blocks.jsx]"]
  node_quizzes["Quiz Experience<br/>[QuizDetail.jsx]"]
  node_challenge_editor["Coding Challenges<br/>[ChallengeIDE.jsx]"]
  node_test_runner["Challenge Test Runner<br/>[runTests.js]"]
  node_runner_worker["Runner Worker<br/>[runner.worker.js]"]
  node_quiz_data["Quiz Data<br/>[quiz.js]"]
end

subgraph group_algorithms["Algorithm Visualizers"]
  node_algorithm_catalog["Algorithm Catalog<br/>[Algoritma.jsx]"]
  node_algorithm_detail["Algorithm Detail"]
  node_algorithm_data["Algorithm Metadata<br/>[algoritma.js]"]
  node_trace_registry["Trace Registry<br/>[traces.js]"]
  node_trace_algorithms["Trace Algorithms"]
  node_visualization["Visualization Stages"]
  node_step_player["Step Player<br/>[usePlayer.js]"]
  node_comparison["Algorithm Comparison<br/>[Bandingkan.jsx]"]
end

subgraph group_state["Learner State"]
  node_progress["Study Progress<br/>[useProgress.js]"]
  node_activity["Study Activity<br/>[aktivitas.js]"]
  node_progress_store[("Browser Progress Store<br/>[progress.js]")]
end

node_learner(("Learner"))

node_learner -.->|"opens"| node_routes
node_routes -->|"routes through"| node_shell
node_routes -->|"routes to"| node_algorithm_catalog
node_routes -->|"routes to"| node_algorithm_detail
node_routes -->|"routes to"| node_course_pages
node_routes -->|"routes to"| node_quizzes
node_routes -->|"mounts"| node_pwa_events
node_routes -->|"routes to"| node_ui_kit
node_algorithm_detail -->|"reads metadata"| node_algorithm_data
node_algorithm_detail -->|"loads traces"| node_trace_registry
node_trace_registry -->|"imports builders"| node_trace_algorithms
node_algorithm_detail -->|"renders stages"| node_visualization
node_visualization -->|"uses playback"| node_step_player
node_routes -->|"routes to"| node_comparison
node_course_pages -.->|"uses metadata"| node_course_metadata
node_course_pages -.->|"loads content"| node_course_content
node_course_pages -.->|"renders content"| node_course_components
node_quizzes -.->|"uses questions"| node_quiz_data
node_challenge_editor -.->|"runs tests"| node_test_runner
node_runner_worker -->|"imports runner"| node_test_runner
node_progress -->|"records study days"| node_activity
node_progress -->|"reads and writes"| node_progress_store

click node_routes "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/App.jsx"
click node_shell "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/layout/AppShell.jsx"
click node_algorithm_catalog "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/Algoritma.jsx"
click node_algorithm_detail "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/AlgoritmaDetail.jsx"
click node_algorithm_data "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/data/algoritma.js"
click node_trace_registry "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/algorithms/traces.js"
click node_trace_algorithms "https://github.com/magentakey/labu-kindle-book-algoritma/tree/main/src/algorithms/traces"
click node_visualization "https://github.com/magentakey/labu-kindle-book-algoritma/tree/main/src/viz"
click node_step_player "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/viz/usePlayer.js"
click node_comparison "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/Bandingkan.jsx"
click node_course_pages "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/ModulDetail.jsx"
click node_course_metadata "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/data/modul.js"
click node_course_content "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/content/modul/index.js"
click node_course_components "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/materi/blocks.jsx"
click node_quizzes "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/QuizDetail.jsx"
click node_challenge_editor "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/components/ChallengeIDE/ChallengeIDE.jsx"
click node_test_runner "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/lib/runTests.js"
click node_runner_worker "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/workers/runner.worker.js"
click node_progress "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/materi/useProgress.js"
click node_activity "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/lib/aktivitas.js"
click node_progress_store "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/lib/progress.js"
click node_quiz_data "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/data/quiz.js"
click node_pwa_events "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pwa/PwaEvents.jsx"
click node_ui_kit "https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/UiKit.jsx"

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_routes,node_shell,node_pwa_events,node_ui_kit toneBlue
class node_course_pages,node_course_metadata,node_course_content,node_course_components,node_quizzes,node_challenge_editor,node_test_runner,node_runner_worker,node_quiz_data toneAmber
class node_algorithm_catalog,node_algorithm_detail,node_algorithm_data,node_trace_registry,node_trace_algorithms,node_visualization,node_step_player,node_comparison toneMint
class node_progress,node_activity,node_progress_store toneRose
class node_learner toneIndigo
```

## Components

### Application

- [Route Shell](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation Shell](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/layout/AppShell.jsx): `src/layout/AppShell.jsx`
- [Offline And PWA](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pwa/PwaEvents.jsx): `src/pwa/PwaEvents.jsx`
- [UI Kit](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/UiKit.jsx): `src/pages/UiKit.jsx`

### Learning Content

- [Module Pages](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/ModulDetail.jsx): `src/pages/ModulDetail.jsx`
- [Module Metadata](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/data/modul.js): `src/data/modul.js`
- [Module Content](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/content/modul/index.js): `src/content/modul/index.js`
- [Learning Components](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/materi/blocks.jsx): `src/materi/blocks.jsx`
- [Quiz Experience](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/QuizDetail.jsx): `src/pages/QuizDetail.jsx`
- [Coding Challenges](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/components/ChallengeIDE/ChallengeIDE.jsx): `src/components/ChallengeIDE/ChallengeIDE.jsx`
- [Challenge Test Runner](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/lib/runTests.js): `src/lib/runTests.js`
- [Runner Worker](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/workers/runner.worker.js): `src/workers/runner.worker.js`
- [Quiz Data](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/data/quiz.js): `src/data/quiz.js`

### Algorithm Visualizers

- [Algorithm Catalog](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/Algoritma.jsx): `src/pages/Algoritma.jsx`
- [Algorithm Detail](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/AlgoritmaDetail.jsx): `src/pages/AlgoritmaDetail.jsx`
- [Algorithm Metadata](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/data/algoritma.js): `src/data/algoritma.js`
- [Trace Registry](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/algorithms/traces.js): `src/algorithms/traces.js`
- [Trace Algorithms](https://github.com/magentakey/labu-kindle-book-algoritma/tree/main/src/algorithms/traces): `src/algorithms/traces`
- [Visualization Stages](https://github.com/magentakey/labu-kindle-book-algoritma/tree/main/src/viz): `src/viz`
- [Step Player](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/viz/usePlayer.js): `src/viz/usePlayer.js`
- [Algorithm Comparison](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/pages/Bandingkan.jsx): `src/pages/Bandingkan.jsx`

### Learner State

- [Study Progress](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/materi/useProgress.js): `src/materi/useProgress.js`
- [Study Activity](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/lib/aktivitas.js): `src/lib/aktivitas.js`
- [Browser Progress Store](https://github.com/magentakey/labu-kindle-book-algoritma/blob/main/src/lib/progress.js): `src/lib/progress.js`

### Other components

- **Learner**

## Connections

- Learner → Route Shell: opens
- Route Shell → Navigation Shell: routes through (evidence: `src/App.jsx`)
- Route Shell → Algorithm Catalog: routes to (evidence: `src/App.jsx`)
- Route Shell → Algorithm Detail: routes to (evidence: `src/App.jsx`)
- Route Shell → Module Pages: routes to (evidence: `src/App.jsx`)
- Route Shell → Quiz Experience: routes to (evidence: `src/App.jsx`)
- Route Shell → Offline And PWA: mounts (evidence: `src/App.jsx`)
- Route Shell → UI Kit: routes to (evidence: `src/App.jsx`)
- Algorithm Detail → Algorithm Metadata: reads metadata (evidence: `src/pages/AlgoritmaDetail.jsx`)
- Algorithm Detail → Trace Registry: loads traces (evidence: `src/pages/AlgoritmaDetail.jsx`)
- Trace Registry → Trace Algorithms: imports builders (evidence: `src/algorithms/traces.js`)
- Algorithm Detail → Visualization Stages: renders stages (evidence: `src/pages/AlgoritmaDetail.jsx`)
- Visualization Stages → Step Player: uses playback (evidence: `src/viz/usePlayer.js`)
- Route Shell → Algorithm Comparison: routes to (evidence: `src/App.jsx`)
- Module Pages → Module Metadata: uses metadata
- Module Pages → Module Content: loads content
- Module Pages → Learning Components: renders content
- Quiz Experience → Quiz Data: uses questions
- Coding Challenges → Challenge Test Runner: runs tests
- Runner Worker → Challenge Test Runner: imports runner (evidence: `src/workers/runner.worker.js`)
- Study Progress → Study Activity: records study days (evidence: `src/materi/useProgress.js`)
- Study Progress → Browser Progress Store: reads and writes (evidence: `src/materi/useProgress.js`)