# asukatraloc22-rgb/my-japan-2 architecture

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

- Interactive diagram: https://gitdiagram.com/asukatraloc22-rgb/my-japan-2
- Repository: https://github.com/asukatraloc22-rgb/my-japan-2

## Overview

Nihongo no Michi is a French-language Japanese-learning web app with JLPT course content, practice activities, progress tracking, and PWA support. The user-facing workflow is to study lesson material and practise Japanese through quizzes, exams, flashcards, or voice answers; the app also tracks statistics and can speak Japanese text. The excerpts show the learning code and kanji data in separate files, but do not establish how they are wired together. The service worker explicitly caches app assets and handles offline requests; unsampled HTML and app sections limit further connection detail.

Main entry points: [`app.js`](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js) (Learning interface), [`sw.js`](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/sw.js) (Service worker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Learning and practice"]
  node_learning_app["Learning interface<br/>[app.js]"]
  node_courses["JLPT courses<br/>[app.js]"]
  node_quizzes["Quizzes and exams<br/>[app.js]"]
  node_flashcards["Flashcards and SRS<br/>[app.js]"]
  node_voice_practice["Voice practice<br/>[app.js]"]
  node_audio["Audio feedback<br/>[app.js]"]
end

subgraph group_data["Learning data and progress"]
  node_kanji_data["Kanji and vocabulary<br/>[database.js]"]
  node_progress["Statistics and XP<br/>[app.js]"]
end

subgraph group_pwa["Offline and notifications"]
  node_service_worker["Service worker<br/>[sw.js]"]
  node_notifications["Push notifications<br/>[sw.js]"]
end

node_learner(("Learner"))
node_speech_recognition["Speech recognition"]
node_local_storage[("Browser local storage")]
node_cache_storage[("Cache storage")]
node_network["Network"]

node_learner -->|"uses"| node_learning_app
node_learning_app -->|"opens lessons"| node_courses
node_learning_app -->|"starts practice"| node_quizzes
node_learning_app -->|"reviews cards"| node_flashcards
node_learning_app -->|"starts speaking"| node_voice_practice
node_voice_practice -->|"recognizes speech"| node_speech_recognition
node_quizzes -->|"plays feedback"| node_audio
node_progress -->|"reads and writes"| node_local_storage
node_service_worker -->|"reads and writes"| node_cache_storage
node_service_worker -->|"fetches requests"| node_network
node_service_worker -->|"dispatches push"| node_notifications

click node_learning_app "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js"
click node_courses "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js"
click node_quizzes "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js"
click node_flashcards "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js"
click node_voice_practice "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js"
click node_audio "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js"
click node_kanji_data "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/database.js"
click node_progress "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js"
click node_service_worker "https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/sw.js"
click node_notifications "https://github.com/asukatraloc22-rgb/my-japan-2/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_learning_app,node_courses,node_quizzes,node_flashcards,node_voice_practice,node_audio toneBlue
class node_kanji_data,node_progress,node_local_storage,node_cache_storage toneAmber
class node_service_worker,node_notifications toneMint
class node_learner,node_speech_recognition,node_network toneIndigo
```

## Components

### Learning and practice

- [Learning interface](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js): `app.js`
- [JLPT courses](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js): `app.js`
- [Quizzes and exams](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js): `app.js`
- [Flashcards and SRS](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js): `app.js`
- [Voice practice](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js): `app.js`
- [Audio feedback](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js): `app.js`

### Learning data and progress

- [Kanji and vocabulary](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/database.js): `database.js`
- [Statistics and XP](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/app.js): `app.js`

### Offline and notifications

- [Service worker](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/sw.js): `sw.js`
- [Push notifications](https://github.com/asukatraloc22-rgb/my-japan-2/blob/main/sw.js): `sw.js`

### Other components

- **Learner**
- **Speech recognition**
- **Browser local storage**
- **Cache storage**
- **Network**

## Connections

- Learner → Learning interface: uses
- Learning interface → JLPT courses: opens lessons (evidence: `app.js`)
- Learning interface → Quizzes and exams: starts practice (evidence: `app.js`)
- Learning interface → Flashcards and SRS: reviews cards (evidence: `app.js`)
- Learning interface → Voice practice: starts speaking (evidence: `app.js`)
- Voice practice → Speech recognition: recognizes speech (evidence: `app.js`)
- Quizzes and exams → Audio feedback: plays feedback (evidence: `app.js`)
- Statistics and XP → Browser local storage: reads and writes (evidence: `app.js`)
- Service worker → Cache storage: reads and writes (evidence: `sw.js`)
- Service worker → Network: fetches requests (evidence: `sw.js`)
- Service worker → Push notifications: dispatches push (evidence: `sw.js`)