SubtractEd

1. The app boots through HashRouter, mounts the React application, and registers a service worker for offline support.
2. Navigation and home state read from browser localStorage, then derive unlock status and completion percentages through shared progress helpers.
3. The user enters the guide, activity, assessment, or enrichment flow, where each screen gathers input through its own interaction model.
4. Answers are validated locally against question data or computed results, and the UI gives feedback with modal states plus procedural sound effects.
5. When a module is completed, the app persists that milestone to localStorage and emits a custom progress event so every open view stays synchronized.
6. Route guards and unlock checks redirect users back to Home if they try to skip prerequisites, while background music switches based on the current route.

The codebase uses a lightweight client-side persistence model instead of a full database-backed progress system. Guide completion, activity completion, and overall metrics are stored separately in localStorage, and a custom event bus keeps the home page, header navigation, and progress screen synchronized without prop drilling. That architecture keeps the unlock rules centralized in learningProgress.ts, which makes the progression logic easy to reuse in both route guards and visual state.

Each learning module is intentionally built around a different teaching pattern. Activity 1 focuses on physical chip manipulation, Activity 2 turns subtraction into movement on a number line, and Activity 3 scaffolds the keep-change-change algorithm through structured inputs. The assessment uses a simple question array for scoring, while the enrichment stage uses a crossword-style grid with shared intersections and level-based progression. The backend is currently a minimal Express scaffold, so the meaningful state and learning logic live on the client side where the experience stays fast, portable, and offline-friendly.