How veeresh-bikkaneti/system-design-and-architecture works
System Design Mastery is a browser-based interactive course: learners browse the roadmap, open lessons, read diagrams and take quizzes, then save progress and earn badges. An optional client-side tutor answers lesson questions using retrieved course cards and on-device generation; narration supports lesson listening. Progress and quiz state persist in browser storage. Optional GitHub sign-in/sync uses the Worker. The graph follows the documented workflow and shown imports; unsampled internals are represented only at supported paths, and unverified integration links are omitted.
Main entry points: App.tsx App routing · progress.ts Progress state · agent.ts Tutor agent · HomePage.tsx Course home
Components 22
Course experience
- App routing
src/App.tsx - Course home
src/pages/HomePage.tsx - Learning roadmap
src/pages/RoadmapPage.tsx - Lesson reading
src/pages/LessonPage.tsx - Lesson content
src/lib/lessons.ts - Interactive diagrams
src/components/diagrams/PacketFlow.tsx - Lesson quizzes
src/components/Quiz.tsx
Progress and identity
- Progress state
src/store/progress.ts - Lesson unlocking
src/lib/progress-gate.ts - Badge gallery
src/pages/BadgesPage.tsx - Sign-in and sync
src/components/AuthBar.tsx - Auth Worker
worker/src/index.ts
Ben tutor
- Tutor chat
src/components/qa/QaChatPanel.tsx - Tutor agent
src/ai/local/agent.ts - Course cards
src/ai/local/cards.ts - Card retrieval
src/ai/local/retrieve.ts - Semantic routing
src/ai/local/semantic/router.ts - Index codec
src/ai/local/semantic/codec.ts - On-device inference
src/ai/local/inference.ts
Lesson media
- Lesson narration
src/components/LessonNarrator.tsx
Other components
- Learner
- Browser AI engines
Connections 30
- Learner → App routing: opens course
README.md - App routing → Course home: routes to
src/App.tsx - App routing → Learning roadmap: routes to
src/App.tsx - App routing → Lesson reading: routes to
src/App.tsx - Course home → Lesson content: lists lessons
src/pages/HomePage.tsx - Learning roadmap → Lesson content: lists lessons
src/pages/RoadmapPage.tsx - Lesson reading → Lesson content: loads lesson
src/pages/LessonPage.tsx - App routing → Interactive diagrams: loads diagrams
src/App.tsx - App routing → Lesson quizzes: provides quiz
src/App.tsx - Lesson reading → Lesson narration: renders narration
src/pages/LessonPage.tsx - Course home → Progress state: reads progress
src/pages/HomePage.tsx - Learning roadmap → Progress state: reads progress
src/pages/RoadmapPage.tsx - Lesson reading → Progress state: records completion
src/pages/LessonPage.tsx - Lesson quizzes → Progress state: records scores
- Course home → Lesson unlocking: checks unlocks
src/pages/HomePage.tsx - Learning roadmap → Lesson unlocking: checks unlocks
src/pages/RoadmapPage.tsx - Badge gallery → Progress state: reads progress
src/pages/BadgesPage.tsx - Sign-in and sync → Progress state: reads progress
src/components/AuthBar.tsx - Sign-in and sync → Auth Worker: exchanges OAuth
src/components/AuthBar.tsx - Learner → Tutor chat: asks question
README.md - Tutor chat → Tutor agent: requests answer
- Tutor agent → Course cards: uses course cards
src/ai/local/agent.ts - Tutor agent → Card retrieval: retrieves context
src/ai/local/agent.ts - On-device inference → Tutor agent: prepares turns
src/ai/local/inference.ts - On-device inference → Card retrieval: retrieves context
src/ai/local/inference.ts - Semantic routing → Tutor agent: builds query
src/ai/local/semantic/router.ts - Semantic routing → Card retrieval: uses card names
src/ai/local/semantic/router.ts - Semantic routing → Index codec: scores vectors
src/ai/local/semantic/router.ts - On-device inference → Browser AI engines: runs locally
README.md - Learner → Lesson narration: listens
README.md