# archilantern/qwerty-learner architecture

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

- Interactive diagram: https://gitdiagram.com/archilantern/qwerty-learner
- Repository: https://github.com/archilantern/qwerty-learner

## Overview

Qwerty Learner combines vocabulary memorization with English keyboard muscle-memory practice. The main workflow selects a dictionary chapter, loads its words, accepts typing practice, and presents speed/accuracy feedback; pronunciation and dictation settings enrich practice. Separate areas provide dictionary browsing, error review, and historical analytics, backed by local browser records and persistent preferences. README capability claims supplement the sampled source; links for unsampled page internals are intentionally conservative.

Main entry points: [`src/index.tsx`](https://github.com/archilantern/qwerty-learner/blob/master/src/index.tsx) (Application Router), [`src/pages/Typing/index.tsx`](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/index.tsx) (Typing Practice), [`src/pages/Typing/hooks/useWordList.ts`](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/hooks/useWordList.ts) (Chapter Word List), [`src/utils/db/index.ts`](https://github.com/archilantern/qwerty-learner/blob/master/src/utils/db/index.ts) (Local Records)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_practice["Practice"]
  node_typing["Typing Practice<br/>[index.tsx]"]
  node_wordlist["Chapter Word List<br/>[useWordList.ts]"]
  node_practiceui["Typing Controls<br/>[index.tsx]"]
  node_results["Practice Results<br/>[index.tsx]"]
  node_pronunciation["Pronunciation"]
end

subgraph group_library["Dictionary Library"]
  node_gallery["Dictionary Gallery<br/>[index.tsx]"]
  node_dictdetail["Dictionary Details<br/>[index.tsx]"]
  node_dictdata["Dictionary Catalog<br/>[dictionary.ts]"]
  node_fetcher["Word List Fetcher<br/>[wordListFetcher.ts]"]
end

subgraph group_insights["Review and Insights"]
  node_errorbook["Error Book<br/>[index.tsx]"]
  node_analysis["Practice Analysis<br/>[index.tsx]"]
end

subgraph group_platform["State and Services"]
  node_app["Application Router<br/>[index.tsx]"]
  node_db[("Local Records<br/>[index.ts]")]
  node_wordrecords["Word Records<br/>[record.ts]"]
  node_chaprecords["Chapter Records<br/>[review-record.ts]"]
  node_state["User Preferences<br/>[index.ts]"]
end

node_learner(("Learner"))
node_youdao{{"Youdao Audio"}}

node_learner -->|"opens"| node_app
node_app -->|"routes to"| node_typing
node_app -->|"routes to"| node_gallery
node_app -->|"routes to"| node_analysis
node_app -->|"routes to"| node_errorbook
node_typing -->|"loads words"| node_wordlist
node_wordlist -->|"reads selection"| node_state
node_wordlist -->|"resolves dictionary"| node_dictdata
node_wordlist -->|"fetches list"| node_fetcher
node_learner -->|"types answers"| node_practiceui
node_practiceui -->|"submits input"| node_typing
node_typing -->|"shows outcome"| node_results
node_typing -->|"requests audio"| node_pronunciation
node_pronunciation -.->|"streams audio"| node_youdao
node_learner -->|"browses"| node_gallery
node_gallery -->|"opens details"| node_dictdetail
node_dictdetail -->|"reads catalog"| node_dictdata
node_learner -->|"reviews mistakes"| node_errorbook
node_errorbook -->|"reads records"| node_db
node_learner -->|"views progress"| node_analysis
node_analysis -->|"queries history"| node_db
node_db -->|"stores entries"| node_wordrecords
node_db -->|"stores chapters"| node_chaprecords
node_state -->|"maps selection"| node_dictdata

click node_app "https://github.com/archilantern/qwerty-learner/blob/master/src/index.tsx"
click node_typing "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/index.tsx"
click node_wordlist "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/hooks/useWordList.ts"
click node_practiceui "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/components/WordPanel/index.tsx"
click node_results "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/components/ResultScreen/index.tsx"
click node_pronunciation "https://github.com/archilantern/qwerty-learner/blob/master/src/hooks/usePronunciation.ts"
click node_gallery "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Gallery-N/index.tsx"
click node_dictdetail "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Gallery-N/DictDetail/index.tsx"
click node_dictdata "https://github.com/archilantern/qwerty-learner/blob/master/src/resources/dictionary.ts"
click node_fetcher "https://github.com/archilantern/qwerty-learner/blob/master/src/utils/wordListFetcher.ts"
click node_errorbook "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/ErrorBook/index.tsx"
click node_analysis "https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Analysis/index.tsx"
click node_db "https://github.com/archilantern/qwerty-learner/blob/master/src/utils/db/index.ts"
click node_wordrecords "https://github.com/archilantern/qwerty-learner/blob/master/src/utils/db/record.ts"
click node_chaprecords "https://github.com/archilantern/qwerty-learner/blob/master/src/utils/db/review-record.ts"
click node_state "https://github.com/archilantern/qwerty-learner/blob/master/src/store/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_typing,node_wordlist,node_practiceui,node_results,node_pronunciation toneBlue
class node_gallery,node_dictdetail,node_dictdata,node_fetcher toneAmber
class node_errorbook,node_analysis toneMint
class node_app,node_db,node_wordrecords,node_chaprecords,node_state toneRose
class node_learner,node_youdao toneIndigo
```

## Components

### Practice

- [Typing Practice](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/index.tsx): `src/pages/Typing/index.tsx`
- [Chapter Word List](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/hooks/useWordList.ts): `src/pages/Typing/hooks/useWordList.ts`
- [Typing Controls](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/components/WordPanel/index.tsx): `src/pages/Typing/components/WordPanel/index.tsx`
- [Practice Results](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Typing/components/ResultScreen/index.tsx): `src/pages/Typing/components/ResultScreen/index.tsx`
- [Pronunciation](https://github.com/archilantern/qwerty-learner/blob/master/src/hooks/usePronunciation.ts): `src/hooks/usePronunciation.ts`

### Dictionary Library

- [Dictionary Gallery](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Gallery-N/index.tsx): `src/pages/Gallery-N/index.tsx`
- [Dictionary Details](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Gallery-N/DictDetail/index.tsx): `src/pages/Gallery-N/DictDetail/index.tsx`
- [Dictionary Catalog](https://github.com/archilantern/qwerty-learner/blob/master/src/resources/dictionary.ts): `src/resources/dictionary.ts`
- [Word List Fetcher](https://github.com/archilantern/qwerty-learner/blob/master/src/utils/wordListFetcher.ts): `src/utils/wordListFetcher.ts`

### Review and Insights

- [Error Book](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/ErrorBook/index.tsx): `src/pages/ErrorBook/index.tsx`
- [Practice Analysis](https://github.com/archilantern/qwerty-learner/blob/master/src/pages/Analysis/index.tsx): `src/pages/Analysis/index.tsx`

### State and Services

- [Application Router](https://github.com/archilantern/qwerty-learner/blob/master/src/index.tsx): `src/index.tsx`
- [Local Records](https://github.com/archilantern/qwerty-learner/blob/master/src/utils/db/index.ts): `src/utils/db/index.ts`
- [Word Records](https://github.com/archilantern/qwerty-learner/blob/master/src/utils/db/record.ts): `src/utils/db/record.ts`
- [Chapter Records](https://github.com/archilantern/qwerty-learner/blob/master/src/utils/db/review-record.ts): `src/utils/db/review-record.ts`
- [User Preferences](https://github.com/archilantern/qwerty-learner/blob/master/src/store/index.ts): `src/store/index.ts`

### Other components

- **Learner**
- **Youdao Audio**

## Connections

- Learner → Application Router: opens
- Application Router → Typing Practice: routes to
- Application Router → Dictionary Gallery: routes to
- Application Router → Practice Analysis: routes to
- Application Router → Error Book: routes to
- Typing Practice → Chapter Word List: loads words
- Chapter Word List → User Preferences: reads selection
- Chapter Word List → Dictionary Catalog: resolves dictionary
- Chapter Word List → Word List Fetcher: fetches list
- Learner → Typing Controls: types answers
- Typing Controls → Typing Practice: submits input
- Typing Practice → Practice Results: shows outcome
- Typing Practice → Pronunciation: requests audio
- Pronunciation → Youdao Audio: streams audio
- Learner → Dictionary Gallery: browses
- Dictionary Gallery → Dictionary Details: opens details
- Dictionary Details → Dictionary Catalog: reads catalog
- Learner → Error Book: reviews mistakes
- Error Book → Local Records: reads records
- Learner → Practice Analysis: views progress
- Practice Analysis → Local Records: queries history
- Local Records → Word Records: stores entries
- Local Records → Chapter Records: stores chapters
- User Preferences → Dictionary Catalog: maps selection