Feature guide

Course learning

The course map, weekly progression, focused lesson stages, guide, words, and resources.

← Technical overview

What this domain owns

How a lesson is found, shown, and moved through. It consumes catalogue and progress rules rather than duplicating them.

Feature flow diagram

#learn / #week / #lesson
        │
        v
Course overview or LessonView
        │          │
        │          ├── Learning catalogue (lesson data)
        │          ├── Entitlements (may open?)
        │          └── Learner progress (completion/review)
        v
Focused Learn · Practice · Guide · Words · Resources stage

This diagram shows the normal direction of control and data. Follow it before changing a boundary or adding a dependency.

Class and relationship diagram

┌──────────────┐ lesson id ┌──────────────────┐ renders ┌──────────────┐
│ AppRoute     │──────────▶│ CourseLesson     │────────▶│ LessonStage  │
└──────────────┘           ├──────────────────┤         └──────────────┘
                           │ + section        │
                           │ + lesson          │
                           └───┬─────────┬─────┘
                               │         │
                 ┌─────────────▼─┐   ┌───▼─────────────┐
                 │ Catalogue      │   │ Entitlements    │
                 │ + lesson(id)   │   │ + canAccess()   │
                 └───────────────┘   └─────────────────┘

Boxes show the important data types or services. Their fields and main methods are listed inside; arrows show the primary dependency or data relationship.

Sequence diagram

Learner
CourseLesson
Catalogue
Entitlements
LessonStage
Progress
open lesson section
find lesson by id
lesson data
may learner access it?
allow or deny
render Learn/Practice/Guide/Words/Resources
rendered stage
record completion when activity finishes

Read this from top to bottom: each arrow is the next interaction in the normal successful path.

Start here in the code

Choose any filename to open it directly in VS Code.

How it works

  1. Learner opens a week or lesson route.
  2. Course sequence orders the catalogue.
  3. LessonView renders one requested stage.
  4. Completion calls learner-progress actions.
  5. The next lesson or review becomes available under entitlement rules.

Read this code

components/course/course-lesson.tsxOpen in VS Code — Render one lesson stage from the route

const section = route.lessonSection ?? 'learn';
const lesson = catalogue.lesson(route.lessonId);

if (!lesson) return <NotFound />;
if (!canAccessLesson({ plan }, lesson.id)) return <Paywall />;

return <LessonStage lesson={lesson} section={section} />;

What each part is doing

  1. The route chooses the lesson and requested stage, not the component itself.
  2. The catalogue remains the source of lesson content.
  3. Access is checked before rendering a Premium lesson; do not copy access rules into each stage.

This is a deliberately short excerpt of the real pattern, with unrelated details omitted. Read the named file for the complete implementation.

Related API and server boundaries

  • GET /api/content/lessons for published outline overrides.
  • GET /api/content/lessons/:id for a published lesson override.

Tests to read and run

Implementation notes

This is the home for detailed explanations, decision records, request examples, and diagrams for this feature. Add new feature-specific documentation here instead of expanding the platform overview.