# rubenhtun/dollo-grammar architecture

> Architecture diagram of the GitHub repository rubenhtun/dollo-grammar, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rubenhtun/dollo-grammar
- Repository: https://github.com/rubenhtun/dollo-grammar

## Overview

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: [`src/App.tsx`](https://github.com/rubenhtun/dollo-grammar/blob/main/src/App.tsx) (Page router), [`src/main.tsx`](https://github.com/rubenhtun/dollo-grammar/blob/main/src/main.tsx) (App entry), [`src/providers/navigation-provider.tsx`](https://github.com/rubenhtun/dollo-grammar/blob/main/src/providers/navigation-provider.tsx) (Navigation state), [`src/shell/Topbar.tsx`](https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/Topbar.tsx) (Topbar controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["App entry<br/>[main.tsx]"]
  node_app["Page router<br/>[App.tsx]"]
  node_navigation["Navigation state"]
  node_shell["App shell<br/>[AppShell.tsx]"]
  node_sidebar["Sidebar navigation<br/>[Sidebar.tsx]"]
  node_topbar["Topbar controls<br/>[Topbar.tsx]"]
  node_navconfig["Navigation config<br/>[navigation.ts]"]
end

subgraph group_learning["Learning journey"]
  node_path["Learning path<br/>[index.tsx]"]
  node_levels["Level list<br/>[LevelList.tsx]"]
  node_hub["Learning hub<br/>[index.tsx]"]
  node_savedcard["Saved level card<br/>[SavedLevelCard.tsx]"]
  node_bonus["Dollo Bonus<br/>[index.tsx]"]
  node_plus["Dollo Plus<br/>[index.tsx]"]
end

subgraph group_progress["Progress and rewards"]
  node_dashboard["Dashboard<br/>[index.tsx]"]
  node_journal["Mistake journal<br/>[index.tsx]"]
  node_achievements["Achievements<br/>[index.tsx]"]
  node_rewards["Rewards store<br/>[index.tsx]"]
  node_insights["Insights<br/>[index.tsx]"]
end

subgraph group_preferences["Preferences"]
  node_settings["Settings<br/>[index.tsx]"]
  node_themeprovider["Theme provider<br/>[theme-provider.tsx]"]
  node_themestore["Theme state<br/>[theme-store.ts]"]
  node_language["Language provider"]
  node_i18n["Translations<br/>[index.ts]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_entry
node_entry -->|"mounts"| node_app
node_entry -->|"wraps with"| node_themeprovider
node_entry -->|"wraps with"| node_language
node_entry -->|"wraps with"| node_navigation
node_app -->|"reads route"| node_navigation
node_app -->|"renders in"| node_shell
node_app -->|"dispatches"| node_dashboard
node_app -->|"dispatches"| node_path
node_app -->|"dispatches"| node_hub
node_app -->|"dispatches"| node_bonus
node_app -->|"dispatches"| node_plus
node_app -->|"dispatches"| node_journal
node_app -->|"dispatches"| node_achievements
node_app -->|"dispatches"| node_rewards
node_app -->|"dispatches"| node_insights
node_app -->|"dispatches"| node_settings
node_hub -->|"navigates to path"| node_navigation
node_hub -->|"renders"| node_savedcard
node_path -->|"renders"| node_levels
node_themeprovider -->|"reads theme"| node_themestore
node_language -->|"configures language"| node_i18n
node_topbar -->|"sets theme"| node_themestore
node_topbar -->|"changes language"| node_i18n
node_topbar -->|"toggles sidebar"| node_navigation

click node_entry "https://github.com/rubenhtun/dollo-grammar/blob/main/src/main.tsx"
click node_app "https://github.com/rubenhtun/dollo-grammar/blob/main/src/App.tsx"
click node_navigation "https://github.com/rubenhtun/dollo-grammar/blob/main/src/providers/navigation-provider.tsx"
click node_shell "https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/AppShell.tsx"
click node_sidebar "https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/Sidebar.tsx"
click node_topbar "https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/Topbar.tsx"
click node_navconfig "https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/navigation.ts"
click node_dashboard "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Dashboard/index.tsx"
click node_path "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningPath/index.tsx"
click node_levels "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningPath/components/LevelList.tsx"
click node_hub "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningHub/index.tsx"
click node_savedcard "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningHub/components/SavedLevelCard.tsx"
click node_bonus "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/DolloBonus/index.tsx"
click node_plus "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/DolloPlus/index.tsx"
click node_journal "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/MistakeJournal/index.tsx"
click node_achievements "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Achievements/index.tsx"
click node_rewards "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/RewardsStore/index.tsx"
click node_insights "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Insights/index.tsx"
click node_settings "https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Settings/index.tsx"
click node_themeprovider "https://github.com/rubenhtun/dollo-grammar/blob/main/src/providers/theme-provider.tsx"
click node_themestore "https://github.com/rubenhtun/dollo-grammar/blob/main/src/stores/theme-store.ts"
click node_language "https://github.com/rubenhtun/dollo-grammar/blob/main/src/providers/language-provider.tsx"
click node_i18n "https://github.com/rubenhtun/dollo-grammar/blob/main/src/i18n/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_navigation,node_shell,node_sidebar,node_topbar,node_navconfig toneBlue
class node_path,node_levels,node_hub,node_savedcard,node_bonus,node_plus toneAmber
class node_dashboard,node_journal,node_achievements,node_rewards,node_insights toneMint
class node_settings,node_themeprovider,node_themestore,node_language,node_i18n toneRose
class node_learner toneIndigo
```

## Components

### Application shell

- [App entry](https://github.com/rubenhtun/dollo-grammar/blob/main/src/main.tsx): `src/main.tsx`
- [Page router](https://github.com/rubenhtun/dollo-grammar/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation state](https://github.com/rubenhtun/dollo-grammar/blob/main/src/providers/navigation-provider.tsx): `src/providers/navigation-provider.tsx`
- [App shell](https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/AppShell.tsx): `src/shell/AppShell.tsx`
- [Sidebar navigation](https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/Sidebar.tsx): `src/shell/Sidebar.tsx`
- [Topbar controls](https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/Topbar.tsx): `src/shell/Topbar.tsx`
- [Navigation config](https://github.com/rubenhtun/dollo-grammar/blob/main/src/shell/navigation.ts): `src/shell/navigation.ts`

### Learning journey

- [Learning path](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningPath/index.tsx): `src/pages/LearningPath/index.tsx`
- [Level list](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningPath/components/LevelList.tsx): `src/pages/LearningPath/components/LevelList.tsx`
- [Learning hub](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningHub/index.tsx): `src/pages/LearningHub/index.tsx`
- [Saved level card](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/LearningHub/components/SavedLevelCard.tsx): `src/pages/LearningHub/components/SavedLevelCard.tsx`
- [Dollo Bonus](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/DolloBonus/index.tsx): `src/pages/DolloBonus/index.tsx`
- [Dollo Plus](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/DolloPlus/index.tsx): `src/pages/DolloPlus/index.tsx`

### Progress and rewards

- [Dashboard](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Dashboard/index.tsx): `src/pages/Dashboard/index.tsx`
- [Mistake journal](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/MistakeJournal/index.tsx): `src/pages/MistakeJournal/index.tsx`
- [Achievements](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Achievements/index.tsx): `src/pages/Achievements/index.tsx`
- [Rewards store](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/RewardsStore/index.tsx): `src/pages/RewardsStore/index.tsx`
- [Insights](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Insights/index.tsx): `src/pages/Insights/index.tsx`

### Preferences

- [Settings](https://github.com/rubenhtun/dollo-grammar/blob/main/src/pages/Settings/index.tsx): `src/pages/Settings/index.tsx`
- [Theme provider](https://github.com/rubenhtun/dollo-grammar/blob/main/src/providers/theme-provider.tsx): `src/providers/theme-provider.tsx`
- [Theme state](https://github.com/rubenhtun/dollo-grammar/blob/main/src/stores/theme-store.ts): `src/stores/theme-store.ts`
- [Language provider](https://github.com/rubenhtun/dollo-grammar/blob/main/src/providers/language-provider.tsx): `src/providers/language-provider.tsx`
- [Translations](https://github.com/rubenhtun/dollo-grammar/blob/main/src/i18n/index.ts): `src/i18n/index.ts`

### Other components

- **Learner**

## Connections

- 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