# hefengxian/my-ielts architecture

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

- Interactive diagram: https://gitdiagram.com/hefengxian/my-ielts
- Repository: https://github.com/hefengxian/my-ielts

## Overview

My IELTS is a browser-based IELTS study resource. Learners navigate subject sections and use their material directly: vocabulary browsing/typing and audio, grammar resources, listening strategy and practice, reading keyword substitutions, writing translation exercises, and speaking (currently marked TODO). The Vue entry point installs hash-based routing, while the shared shell renders the selected page. README capability descriptions supplement the sampled pages; wiring details for unsampled pages are represented only at their existing paths.

Main entry points: [`src/components/TheHeader.vue`](https://github.com/hefengxian/my-ielts/blob/master/src/components/TheHeader.vue) (Site navigation), [`src/pages/listening/index.vue`](https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/index.vue) (Listening guidance), [`src/pages/index.vue`](https://github.com/hefengxian/my-ielts/blob/master/src/pages/index.vue) (Study dashboard), [`src/App.vue`](https://github.com/hefengxian/my-ielts/blob/master/src/App.vue) (Shared layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_entry["Vue entry<br/>[main.ts]"]
  node_app["Shared layout<br/>[App.vue]"]
  node_navigation["Site navigation<br/>[TheHeader.vue]"]
  node_home["Study dashboard<br/>[index.vue]"]
end

subgraph group_vocab["Vocabulary study"]
  node_vocab_page["Vocabulary browser<br/>[index.vue]"]
  node_typing["Typing practice<br/>[typing.vue]"]
  node_vocab_data["Vocabulary data<br/>[vocabulary.js]"]
  node_vocab_audio["Vocabulary audio"]
end

subgraph group_skills["IELTS skills"]
  node_listening["Listening guidance<br/>[index.vue]"]
  node_listening_practice["Listening practice<br/>[179practice.vue]"]
  node_listening_corpus["Listening corpus<br/>[corpus.vue]"]
  node_listening_keywords["Listening keywords<br/>[keyword.vue]"]
  node_exam_words["179 exam words<br/>[index.vue]"]
  node_exam_audio["179 word audio"]
  node_reading["Reading keywords<br/>[index.vue]"]
  node_reading_data["538 keyword data<br/>[reading538words.js]"]
  node_writing["Writing exercises<br/>[index.vue]"]
  node_writing_data["Sentence exercises<br/>[100sentences.js]"]
  node_speaking["Speaking section<br/>[index.vue]"]
end

subgraph group_resources["Study resources"]
  node_grammar["Grammar lessons<br/>[index.vue]"]
  node_grammar_pdf["Grammar handout"]
end

node_learner(("Learner"))
node_youtube["YouTube video"]

node_learner -->|"chooses section"| node_navigation
node_learner -->|"opens study hub"| node_home
node_entry -->|"mounts"| node_app
node_entry -->|"routes to"| node_home
node_app -->|"renders"| node_navigation
node_app -->|"renders route"| node_home
node_navigation -->|"routes to"| node_vocab_page
node_navigation -->|"routes to"| node_grammar
node_navigation -->|"routes to"| node_listening
node_navigation -->|"routes to"| node_reading
node_navigation -->|"routes to"| node_writing
node_navigation -->|"routes to"| node_speaking
node_home -->|"links to"| node_typing
node_vocab_page -->|"reads"| node_vocab_data
node_typing -->|"uses"| node_vocab_data
node_vocab_page -->|"plays audio"| node_vocab_audio
node_typing -->|"plays audio"| node_vocab_audio
node_grammar -->|"presents handout"| node_grammar_pdf
node_grammar -.->|"embeds video"| node_youtube
node_listening -->|"links practice"| node_listening_practice
node_listening -->|"links corpus"| node_listening_corpus
node_listening -->|"links keywords"| node_listening_keywords
node_listening_keywords -->|"links word list"| node_exam_words
node_exam_words -->|"plays word audio"| node_exam_audio
node_reading -->|"reads"| node_reading_data
node_writing -->|"uses exercises"| node_writing_data

click node_entry "https://github.com/hefengxian/my-ielts/blob/master/src/main.ts"
click node_app "https://github.com/hefengxian/my-ielts/blob/master/src/App.vue"
click node_navigation "https://github.com/hefengxian/my-ielts/blob/master/src/components/TheHeader.vue"
click node_home "https://github.com/hefengxian/my-ielts/blob/master/src/pages/index.vue"
click node_vocab_page "https://github.com/hefengxian/my-ielts/blob/master/src/pages/vocabulary/index.vue"
click node_typing "https://github.com/hefengxian/my-ielts/blob/master/src/pages/vocabulary/typing.vue"
click node_vocab_data "https://github.com/hefengxian/my-ielts/blob/master/src/pages/vocabulary/vocabulary.js"
click node_vocab_audio "https://github.com/hefengxian/my-ielts/tree/master/public/vocabulary/audio"
click node_grammar "https://github.com/hefengxian/my-ielts/blob/master/src/pages/grammar/index.vue"
click node_grammar_pdf "https://github.com/hefengxian/my-ielts/tree/master/public/grammar"
click node_listening "https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/index.vue"
click node_listening_practice "https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/179practice.vue"
click node_listening_corpus "https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/corpus.vue"
click node_listening_keywords "https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/keyword.vue"
click node_exam_words "https://github.com/hefengxian/my-ielts/blob/master/src/pages/ielts/index.vue"
click node_exam_audio "https://github.com/hefengxian/my-ielts/tree/master/public/179_audios"
click node_reading "https://github.com/hefengxian/my-ielts/blob/master/src/pages/reading/index.vue"
click node_reading_data "https://github.com/hefengxian/my-ielts/blob/master/src/pages/reading/reading538words.js"
click node_writing "https://github.com/hefengxian/my-ielts/blob/master/src/pages/writing/index.vue"
click node_writing_data "https://github.com/hefengxian/my-ielts/blob/master/src/pages/writing/100sentences.js"
click node_speaking "https://github.com/hefengxian/my-ielts/blob/master/src/pages/speaking/index.vue"

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_home toneBlue
class node_vocab_page,node_typing,node_vocab_data,node_vocab_audio toneAmber
class node_listening,node_listening_practice,node_listening_corpus,node_listening_keywords,node_exam_words,node_exam_audio,node_reading,node_reading_data,node_writing,node_writing_data,node_speaking toneMint
class node_grammar,node_grammar_pdf toneRose
class node_learner,node_youtube toneIndigo
```

## Components

### Application shell

- [Vue entry](https://github.com/hefengxian/my-ielts/blob/master/src/main.ts): `src/main.ts`
- [Shared layout](https://github.com/hefengxian/my-ielts/blob/master/src/App.vue): `src/App.vue`
- [Site navigation](https://github.com/hefengxian/my-ielts/blob/master/src/components/TheHeader.vue): `src/components/TheHeader.vue`
- [Study dashboard](https://github.com/hefengxian/my-ielts/blob/master/src/pages/index.vue): `src/pages/index.vue`

### Vocabulary study

- [Vocabulary browser](https://github.com/hefengxian/my-ielts/blob/master/src/pages/vocabulary/index.vue): `src/pages/vocabulary/index.vue`
- [Typing practice](https://github.com/hefengxian/my-ielts/blob/master/src/pages/vocabulary/typing.vue): `src/pages/vocabulary/typing.vue`
- [Vocabulary data](https://github.com/hefengxian/my-ielts/blob/master/src/pages/vocabulary/vocabulary.js): `src/pages/vocabulary/vocabulary.js`
- [Vocabulary audio](https://github.com/hefengxian/my-ielts/tree/master/public/vocabulary/audio): `public/vocabulary/audio`

### IELTS skills

- [Listening guidance](https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/index.vue): `src/pages/listening/index.vue`
- [Listening practice](https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/179practice.vue): `src/pages/listening/179practice.vue`
- [Listening corpus](https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/corpus.vue): `src/pages/listening/corpus.vue`
- [Listening keywords](https://github.com/hefengxian/my-ielts/blob/master/src/pages/listening/keyword.vue): `src/pages/listening/keyword.vue`
- [179 exam words](https://github.com/hefengxian/my-ielts/blob/master/src/pages/ielts/index.vue): `src/pages/ielts/index.vue`
- [179 word audio](https://github.com/hefengxian/my-ielts/tree/master/public/179_audios): `public/179_audios`
- [Reading keywords](https://github.com/hefengxian/my-ielts/blob/master/src/pages/reading/index.vue): `src/pages/reading/index.vue`
- [538 keyword data](https://github.com/hefengxian/my-ielts/blob/master/src/pages/reading/reading538words.js): `src/pages/reading/reading538words.js`
- [Writing exercises](https://github.com/hefengxian/my-ielts/blob/master/src/pages/writing/index.vue): `src/pages/writing/index.vue`
- [Sentence exercises](https://github.com/hefengxian/my-ielts/blob/master/src/pages/writing/100sentences.js): `src/pages/writing/100sentences.js`
- [Speaking section](https://github.com/hefengxian/my-ielts/blob/master/src/pages/speaking/index.vue): `src/pages/speaking/index.vue`

### Study resources

- [Grammar lessons](https://github.com/hefengxian/my-ielts/blob/master/src/pages/grammar/index.vue): `src/pages/grammar/index.vue`
- [Grammar handout](https://github.com/hefengxian/my-ielts/tree/master/public/grammar): `public/grammar`

### Other components

- **Learner**
- **YouTube video**

## Connections

- Learner → Site navigation: chooses section
- Learner → Study dashboard: opens study hub
- Vue entry → Shared layout: mounts
- Vue entry → Study dashboard: routes to
- Shared layout → Site navigation: renders
- Shared layout → Study dashboard: renders route
- Site navigation → Vocabulary browser: routes to
- Site navigation → Grammar lessons: routes to
- Site navigation → Listening guidance: routes to
- Site navigation → Reading keywords: routes to
- Site navigation → Writing exercises: routes to
- Site navigation → Speaking section: routes to
- Study dashboard → Typing practice: links to
- Vocabulary browser → Vocabulary data: reads
- Typing practice → Vocabulary data: uses
- Vocabulary browser → Vocabulary audio: plays audio
- Typing practice → Vocabulary audio: plays audio
- Grammar lessons → Grammar handout: presents handout
- Grammar lessons → YouTube video: embeds video
- Listening guidance → Listening practice: links practice
- Listening guidance → Listening corpus: links corpus
- Listening guidance → Listening keywords: links keywords
- Listening keywords → 179 exam words: links word list
- 179 exam words → 179 word audio: plays word audio
- Reading keywords → 538 keyword data: reads
- Writing exercises → Sentence exercises: uses exercises