How magentakey/labu-kindle-book-algoritma works
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: App.jsx Route Shell · ModulDetail.jsx Module Pages · AlgoritmaDetail.jsx Algorithm Detail · useProgress.js Study Progress
Components 25
Application
- Route Shell
src/App.jsx - Navigation Shell
src/layout/AppShell.jsx - Offline And PWA
src/pwa/PwaEvents.jsx - UI Kit
src/pages/UiKit.jsx
Learning Content
- Module Pages
src/pages/ModulDetail.jsx - Module Metadata
src/data/modul.js - Module Content
src/content/modul/index.js - Learning Components
src/materi/blocks.jsx - Quiz Experience
src/pages/QuizDetail.jsx - Coding Challenges
src/components/ChallengeIDE/ChallengeIDE.jsx - Challenge Test Runner
src/lib/runTests.js - Runner Worker
src/workers/runner.worker.js - Quiz Data
src/data/quiz.js
Algorithm Visualizers
- Algorithm Catalog
src/pages/Algoritma.jsx - Algorithm Detail
src/pages/AlgoritmaDetail.jsx - Algorithm Metadata
src/data/algoritma.js - Trace Registry
src/algorithms/traces.js - Trace Algorithms
src/algorithms/traces - Visualization Stages
src/viz - Step Player
src/viz/usePlayer.js - Algorithm Comparison
src/pages/Bandingkan.jsx
Learner State
- Study Progress
src/materi/useProgress.js - Study Activity
src/lib/aktivitas.js - Browser Progress Store
src/lib/progress.js
Other components
- Learner
Connections 22
- Learner → Route Shell: opens
- Route Shell → Navigation Shell: routes through
src/App.jsx - Route Shell → Algorithm Catalog: routes to
src/App.jsx - Route Shell → Algorithm Detail: routes to
src/App.jsx - Route Shell → Module Pages: routes to
src/App.jsx - Route Shell → Quiz Experience: routes to
src/App.jsx - Route Shell → Offline And PWA: mounts
src/App.jsx - Route Shell → UI Kit: routes to
src/App.jsx - Algorithm Detail → Algorithm Metadata: reads metadata
src/pages/AlgoritmaDetail.jsx - Algorithm Detail → Trace Registry: loads traces
src/pages/AlgoritmaDetail.jsx - Trace Registry → Trace Algorithms: imports builders
src/algorithms/traces.js - Algorithm Detail → Visualization Stages: renders stages
src/pages/AlgoritmaDetail.jsx - Visualization Stages → Step Player: uses playback
src/viz/usePlayer.js - Route Shell → Algorithm Comparison: routes to
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
src/workers/runner.worker.js - Study Progress → Study Activity: records study days
src/materi/useProgress.js - Study Progress → Browser Progress Store: reads and writes
src/materi/useProgress.js