# daslichtedu/japanesevocab architecture

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

- Interactive diagram: https://gitdiagram.com/daslichtedu/japanesevocab
- Repository: https://github.com/daslichtedu/japanesevocab

## Overview

Japanesevocab appears to be a browser-based Japanese study app, with vocabulary, grammar, exams, achievements, and kanji practice represented by files in the tree. The README provides no workflow details, and App.jsx and the data files were not sampled, so their internal wiring cannot be established. The shown kanji code supports handwriting practice and fetches stroke SVGs; the service worker explicitly caches a set of app assets and falls back to cache when network requests fail.

Main entry points: [`sw.js`](https://github.com/daslichtedu/japanesevocab/blob/main/sw.js) (Offline service worker), [`kanji-logic.js`](https://github.com/daslichtedu/japanesevocab/blob/main/kanji-logic.js) (Kanji practice), [`App.jsx`](https://github.com/daslichtedu/japanesevocab/blob/main/App.jsx) (Study app), [`Vocab.json`](https://github.com/daslichtedu/japanesevocab/blob/main/Vocab.json) (Vocabulary data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_study["Study features"]
  node_app["Study app<br/>[App.jsx]"]
  node_kanji["Kanji practice<br/>[kanji-logic.js]"]
end

subgraph group_content["Study content"]
  node_vocabulary["Vocabulary data<br/>[Vocab.json]"]
  node_grammar["Grammar data<br/>[grammar.json]"]
  node_exams["Exam data<br/>[exams.json]"]
  node_achievements["Achievement data<br/>[achievements.json]"]
  node_appdata["Study data module<br/>[data.js]"]
end

subgraph group_runtime["Browser runtime"]
  node_worker["Offline service worker<br/>[sw.js]"]
  node_cache[("Asset cache")]
end

node_learner(("Learner"))
node_kanjivg["KanjiVG SVG source"]
node_browserstorage[("Browser local storage")]

node_learner -.->|"uses"| node_app
node_kanji -->|"fetches strokes"| node_kanjivg
node_kanji -->|"stores mastery"| node_browserstorage
node_worker -->|"reads and writes"| node_cache
node_worker -->|"caches asset"| node_vocabulary
node_worker -->|"caches asset"| node_grammar
node_worker -->|"caches asset"| node_exams
node_worker -->|"caches asset"| node_achievements

click node_app "https://github.com/daslichtedu/japanesevocab/blob/main/App.jsx"
click node_kanji "https://github.com/daslichtedu/japanesevocab/blob/main/kanji-logic.js"
click node_vocabulary "https://github.com/daslichtedu/japanesevocab/blob/main/Vocab.json"
click node_grammar "https://github.com/daslichtedu/japanesevocab/blob/main/grammar.json"
click node_exams "https://github.com/daslichtedu/japanesevocab/blob/main/exams.json"
click node_achievements "https://github.com/daslichtedu/japanesevocab/blob/main/achievements.json"
click node_appdata "https://github.com/daslichtedu/japanesevocab/blob/main/data.js"
click node_worker "https://github.com/daslichtedu/japanesevocab/blob/main/sw.js"

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_app,node_kanji toneBlue
class node_vocabulary,node_grammar,node_exams,node_achievements,node_appdata,node_browserstorage toneAmber
class node_worker,node_cache toneMint
class node_learner,node_kanjivg toneIndigo
```

## Components

### Study features

- [Study app](https://github.com/daslichtedu/japanesevocab/blob/main/App.jsx): `App.jsx`
- [Kanji practice](https://github.com/daslichtedu/japanesevocab/blob/main/kanji-logic.js): `kanji-logic.js`

### Study content

- [Vocabulary data](https://github.com/daslichtedu/japanesevocab/blob/main/Vocab.json): `Vocab.json`
- [Grammar data](https://github.com/daslichtedu/japanesevocab/blob/main/grammar.json): `grammar.json`
- [Exam data](https://github.com/daslichtedu/japanesevocab/blob/main/exams.json): `exams.json`
- [Achievement data](https://github.com/daslichtedu/japanesevocab/blob/main/achievements.json): `achievements.json`
- [Study data module](https://github.com/daslichtedu/japanesevocab/blob/main/data.js): `data.js`

### Browser runtime

- [Offline service worker](https://github.com/daslichtedu/japanesevocab/blob/main/sw.js): `sw.js`
- **Asset cache**

### Other components

- **Learner**
- **KanjiVG SVG source**
- **Browser local storage**

## Connections

- Learner → Study app: uses
- Kanji practice → KanjiVG SVG source: fetches strokes (evidence: `kanji-logic.js`)
- Kanji practice → Browser local storage: stores mastery (evidence: `kanji-logic.js`)
- Offline service worker → Asset cache: reads and writes (evidence: `sw.js`)
- Offline service worker → Vocabulary data: caches asset (evidence: `sw.js`)
- Offline service worker → Grammar data: caches asset (evidence: `sw.js`)
- Offline service worker → Exam data: caches asset (evidence: `sw.js`)
- Offline service worker → Achievement data: caches asset (evidence: `sw.js`)