How rubenhtun/dollo-grammar works
Dollo Grammar is a React learning app for studying English grammar, with a learning path and hub alongside progress, rewards, and account-oriented pages. The principal flow is a learner opening the app, navigating to a learning area, and viewing levels/modules or learning progress. The sampled LearningPath renders LevelList, while LearningHub navigates to the path. Other page capabilities are represented by their tree paths; their internal wiring and any backend or durable learning-data flow are not established by the excerpts.
Main entry points: App.tsx Page router · main.tsx App entry · navigation-provider.tsx Navigation state · Topbar.tsx Topbar controls
Components 24
Application shell
- App entry
src/main.tsx - Page router
src/App.tsx - Navigation state
src/providers/navigation-provider.tsx - App shell
src/shell/AppShell.tsx - Sidebar navigation
src/shell/Sidebar.tsx - Topbar controls
src/shell/Topbar.tsx - Navigation config
src/shell/navigation.ts
Learning journey
- Learning path
src/pages/LearningPath/index.tsx - Level list
src/pages/LearningPath/components/LevelList.tsx - Learning hub
src/pages/LearningHub/index.tsx - Saved level card
src/pages/LearningHub/components/SavedLevelCard.tsx - Dollo Bonus
src/pages/DolloBonus/index.tsx - Dollo Plus
src/pages/DolloPlus/index.tsx
Progress and rewards
- Dashboard
src/pages/Dashboard/index.tsx - Mistake journal
src/pages/MistakeJournal/index.tsx - Achievements
src/pages/Achievements/index.tsx - Rewards store
src/pages/RewardsStore/index.tsx - Insights
src/pages/Insights/index.tsx
Preferences
- Settings
src/pages/Settings/index.tsx - Theme provider
src/providers/theme-provider.tsx - Theme state
src/stores/theme-store.ts - Language provider
src/providers/language-provider.tsx - Translations
src/i18n/index.ts
Other components
- Learner
Connections 25
- Learner → App entry: opens
- App entry → Page router: mounts
- App entry → Theme provider: wraps with
- App entry → Language provider: wraps with
- App entry → Navigation state: wraps with
- Page router → Navigation state: reads route
- Page router → App shell: renders in
- Page router → Dashboard: dispatches
- Page router → Learning path: dispatches
- Page router → Learning hub: dispatches
- Page router → Dollo Bonus: dispatches
- Page router → Dollo Plus: dispatches
- Page router → Mistake journal: dispatches
- Page router → Achievements: dispatches
- Page router → Rewards store: dispatches
- Page router → Insights: dispatches
- Page router → Settings: dispatches
- Learning hub → Navigation state: navigates to path
- Learning hub → Saved level card: renders
- Learning path → Level list: renders
- Theme provider → Theme state: reads theme
- Language provider → Translations: configures language
- Topbar controls → Theme state: sets theme
- Topbar controls → Translations: changes language
- Topbar controls → Navigation state: toggles sidebar