Patterns
Guide a creator through setup
Combine automatic product evidence with explicit manual progress without obscuring what has actually been completed.
On this page
Workflow
| Step | Responsibility |
|---|---|
| 1 | Load the simulated or authorized session context. |
| 2 | Calculate source user/course-derived automatic flags. |
| 3 | Read the user-specific browser manual flags. |
| 4 | Show the next setup step and visible completion count. |
| 5 | Let the person reach the real configuration destination. |
Decisions and composition
- Automatic and manual completion are separate source flags.
- A progress fill is feedback, not proof that every backend integration works.
- Keep onboarding content useful on phones without covering the course task.
Errors, recovery and limits
- No private user profile or student records are used.
- Positive total steps are required.
- Verify progress naming and keyboard action behavior.
Source references
| File | Responsibility |
|---|---|
| src/hooks/useOnboardingProgress.ts | Store |
| src/components/onboarding/OnboardingStep.tsx | Guidance |
| src/components/onboarding/CompletionBar.tsx | Count |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1