How agharsallah/esp-labs-web works
ESP32 Labs is a browser-based, interactive bench guide for learning the ESP32-S3. A learner opens a lesson, follows its wiring and command steps, and uses an in-browser simulator; progress and lesson variants are retained locally. From there, the guide supports reading the lab firmware line by line and exploring chip and datasheet material. The graph also preserves the board, parts, bench log, and localization capabilities documented in the README. Several subsystem links rely on README descriptions because their implementation files were not sampled.
Main entry points: router.tsx Hash router · CodeReader.tsx Code reader · ChipHome.tsx Chip guide · LessonPage.tsx Lesson page
Components 25
Application
- App entry
src/main.tsx - Hash router
src/app/router.tsx
Lessons and labs
- Labs home
src/features/home/LabsHome.tsx - Lesson page
src/features/lesson/LessonPage.tsx - Lesson model
src/domain/lesson.ts - Lesson content
src/content/lessons/sound.ts - Widget registry
src/widgets/registry.ts - Lab simulators
src/labs/shared/simulation.ts - Serial monitor
src/ui/terminal/Terminal.tsx - Progress state
src/features/progress/progress-store.ts - 3D board
src/features/home/board3d/BoardExplorer.tsx - Parts library
src/features/parts/PartsPage.tsx - Bench log
src/app/routes/log-route.tsx
Firmware reader
- Code reader
src/features/code/reader/CodeReader.tsx - Tours and glossary
src/features/code/content-query.ts - Tour and story
src/domain/code/tour.ts
Chip reference
- Chip guide
src/features/chip/pages/ChipHome.tsx - Pinout
src/features/chip/pages/PinsPage.tsx - Peripheral atlas
src/features/chip/pages/AtlasPage.tsx - Reference book
src/features/reference/book/BookReader.tsx - Reference queries
src/features/reference/queries.ts
Guide services
- Localization
src/i18n/i18n.ts - Settings
src/features/settings/SettingsPage.tsx
Other components
- Learner
- esp-labs firmware
Connections 25
- Learner → Hash router: opens guide
README.md - App entry → Hash router: renders routes
- App entry → Localization: initializes
src/main.tsx - Hash router → Labs home: routes home
src/app/router.tsx - Hash router → Lesson page: routes lesson
src/app/router.tsx - Learner → Lesson page: follows steps
README.md - Lesson content → Lesson model: defines lessons
src/content/lessons/sound.ts - Lesson model → Widget registry: references widgets
src/domain/lesson.ts - Lesson page → Lab simulators: renders preview
README.md - Lab simulators → Serial monitor: shows commands
README.md - Learner → Serial monitor: enters commands
README.md - Learner → Progress state: ticks steps
README.md - Labs home → 3D board: shows board
README.md - Hash router → Parts library: routes parts
src/app/router.tsx - Hash router → Bench log: routes log
src/app/router.tsx - Hash router → Code reader: routes code
src/app/router.tsx - Code reader → esp-labs firmware: reads firmware
README.md - Code reader → Tours and glossary: loads explanations
src/features/code/content-query.ts - Code reader → Tour and story: supports tours
README.md - Hash router → Chip guide: routes datasheet
src/app/router.tsx - Chip guide → Pinout: offers pinout
README.md - Chip guide → Peripheral atlas: offers atlas
README.md - Chip guide → Reference book: opens book
README.md - Reference book → Reference queries: loads sections
README.md - Hash router → Settings: routes settings
src/app/router.tsx