# mrdedede/kanjibenkyo architecture

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

- Interactive diagram: https://gitdiagram.com/mrdedede/kanjibenkyo
- Repository: https://github.com/mrdedede/kanjibenkyo

## Overview

Kanjibenkyo is an Angular kanji-study client with account access and a hosted API. Users can sign in or sign up, browse kanji by level, inspect a kanji and example phrases, and mark kanji as studied; the home view also distinguishes logged-in and logged-out states. The client’s HTTP service calls a hosted API, while the tree also contains a Python server entry point. The README is empty and the server implementation was not excerpted, so its relationship to the hosted API is uncertain; the graph shows only the server’s indexed utility import.

Main entry points: [`Client/src/app/app-routing.module.ts`](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/app-routing.module.ts) (Route table), [`Client/src/app/shared/login.service.ts`](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/login.service.ts) (Login service), [`Client/src/app/shared/http.service.ts`](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/http.service.ts) (HTTP service), [`Client/src/app/kanji-list/kanji-card/kanji-card.component.ts`](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/kanji-list/kanji-card/kanji-card.component.ts) (Kanji detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Client shell"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_routing["Route table"]
  node_app["App shell<br/>[app.component.ts]"]
  node_home["Home view<br/>[home.component.ts]"]
  node_welcome["Logged-out view"]
  node_dashboard["Logged-in view"]
  node_sidebar["Study sidebar"]
  node_header["Header"]
  node_about["About page<br/>[about.component.ts]"]
  node_notfound["Not-found page"]
end

subgraph group_accounts["Accounts"]
  node_login["Login form<br/>[login.component.ts]"]
  node_signup["Signup form"]
  node_loginservice["Login service<br/>[login.service.ts]"]
end

subgraph group_study["Kanji study"]
  node_level["Level list"]
  node_card["Kanji detail"]
  node_kanjiservice["Kanji service<br/>[kanji.service.ts]"]
end

subgraph group_backend["Backend"]
  node_http["HTTP service<br/>[http.service.ts]"]
  node_hosted{{"Hosted API"}}
  node_server["Python server<br/>[main.py]"]
  node_userutil["User utility<br/>[util.py]"]
end

node_user(("Learner"))

node_user -->|"opens routes"| node_routing
node_bootstrap -->|"bootstraps"| node_app
node_routing -->|"routes to"| node_home
node_routing -->|"routes to"| node_login
node_routing -->|"routes to"| node_signup
node_routing -->|"routes to"| node_level
node_routing -->|"routes to"| node_card
node_routing -->|"routes to"| node_about
node_routing -->|"fallback route"| node_notfound
node_app -->|"reads session"| node_loginservice
node_home -->|"checks status"| node_loginservice
node_login -->|"submits credentials"| node_loginservice
node_signup -->|"submits account"| node_loginservice
node_loginservice -->|"delegates requests"| node_http
node_level -->|"requests level"| node_http
node_card -->|"loads kanji"| node_kanjiservice
node_card -->|"checks study state"| node_loginservice
node_kanjiservice -->|"delegates data calls"| node_http
node_kanjiservice -->|"uses account state"| node_loginservice
node_http -->|"calls API"| node_hosted
node_server -->|"imports utility"| node_userutil

click node_bootstrap "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/main.ts"
click node_routing "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/app-routing.module.ts"
click node_app "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/app.component.ts"
click node_home "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/home.component.ts"
click node_welcome "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/not-logged/not-logged.component.ts"
click node_dashboard "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/logged/logged.component.ts"
click node_sidebar "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/sidebar/sidebar.component.ts"
click node_header "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/header/header.component.ts"
click node_about "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/about/about.component.ts"
click node_notfound "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/page-not-found/page-not-found.component.ts"
click node_login "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/login/login.component.ts"
click node_signup "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/signup/signup.component.ts"
click node_loginservice "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/login.service.ts"
click node_level "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/kanji-list/kanji-list.component.ts"
click node_card "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/kanji-list/kanji-card/kanji-card.component.ts"
click node_kanjiservice "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/kanji.service.ts"
click node_http "https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/http.service.ts"
click node_server "https://github.com/mrdedede/kanjibenkyo/blob/master/Server/main.py"
click node_userutil "https://github.com/mrdedede/kanjibenkyo/blob/master/Server/initialization/util.py"

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_bootstrap,node_routing,node_app,node_home,node_welcome,node_dashboard,node_sidebar,node_header,node_about,node_notfound toneBlue
class node_login,node_signup,node_loginservice toneAmber
class node_level,node_card,node_kanjiservice toneMint
class node_http,node_hosted,node_server,node_userutil toneRose
class node_user toneIndigo
```

## Components

### Client shell

- [App bootstrap](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/main.ts): `Client/src/main.ts`
- [Route table](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/app-routing.module.ts): `Client/src/app/app-routing.module.ts`
- [App shell](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/app.component.ts): `Client/src/app/app.component.ts`
- [Home view](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/home.component.ts): `Client/src/app/home/home.component.ts`
- [Logged-out view](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/not-logged/not-logged.component.ts): `Client/src/app/home/not-logged/not-logged.component.ts`
- [Logged-in view](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/logged/logged.component.ts): `Client/src/app/home/logged/logged.component.ts`
- [Study sidebar](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/home/sidebar/sidebar.component.ts): `Client/src/app/home/sidebar/sidebar.component.ts`
- [Header](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/header/header.component.ts): `Client/src/app/header/header.component.ts`
- [About page](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/about/about.component.ts): `Client/src/app/about/about.component.ts`
- [Not-found page](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/page-not-found/page-not-found.component.ts): `Client/src/app/page-not-found/page-not-found.component.ts`

### Accounts

- [Login form](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/login/login.component.ts): `Client/src/app/login/login.component.ts`
- [Signup form](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/signup/signup.component.ts): `Client/src/app/signup/signup.component.ts`
- [Login service](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/login.service.ts): `Client/src/app/shared/login.service.ts`

### Kanji study

- [Level list](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/kanji-list/kanji-list.component.ts): `Client/src/app/kanji-list/kanji-list.component.ts`
- [Kanji detail](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/kanji-list/kanji-card/kanji-card.component.ts): `Client/src/app/kanji-list/kanji-card/kanji-card.component.ts`
- [Kanji service](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/kanji.service.ts): `Client/src/app/shared/kanji.service.ts`

### Backend

- [HTTP service](https://github.com/mrdedede/kanjibenkyo/blob/master/Client/src/app/shared/http.service.ts): `Client/src/app/shared/http.service.ts`
- **Hosted API**
- [Python server](https://github.com/mrdedede/kanjibenkyo/blob/master/Server/main.py): `Server/main.py`
- [User utility](https://github.com/mrdedede/kanjibenkyo/blob/master/Server/initialization/util.py): `Server/initialization/util.py`

### Other components

- **Learner**

## Connections

- Learner → Route table: opens routes (evidence: `Client/src/app/app-routing.module.ts`)
- App bootstrap → App shell: bootstraps (evidence: `Client/src/main.ts`)
- Route table → Home view: routes to (evidence: `Client/src/app/app-routing.module.ts`)
- Route table → Login form: routes to (evidence: `Client/src/app/app-routing.module.ts`)
- Route table → Signup form: routes to (evidence: `Client/src/app/app-routing.module.ts`)
- Route table → Level list: routes to (evidence: `Client/src/app/app-routing.module.ts`)
- Route table → Kanji detail: routes to (evidence: `Client/src/app/app-routing.module.ts`)
- Route table → About page: routes to (evidence: `Client/src/app/app-routing.module.ts`)
- Route table → Not-found page: fallback route (evidence: `Client/src/app/app-routing.module.ts`)
- App shell → Login service: reads session (evidence: `Client/src/app/app.component.ts`)
- Home view → Login service: checks status (evidence: `Client/src/app/home/home.component.ts`)
- Login form → Login service: submits credentials (evidence: `Client/src/app/login/login.component.ts`)
- Signup form → Login service: submits account (evidence: `Client/src/app/signup/signup.component.ts`)
- Login service → HTTP service: delegates requests (evidence: `Client/src/app/shared/login.service.ts`)
- Level list → HTTP service: requests level (evidence: `Client/src/app/kanji-list/kanji-list.component.ts`)
- Kanji detail → Kanji service: loads kanji (evidence: `Client/src/app/kanji-list/kanji-card/kanji-card.component.ts`)
- Kanji detail → Login service: checks study state (evidence: `Client/src/app/kanji-list/kanji-card/kanji-card.component.ts`)
- Kanji service → HTTP service: delegates data calls (evidence: `Client/src/app/shared/kanji.service.ts`)
- Kanji service → Login service: uses account state (evidence: `Client/src/app/shared/kanji.service.ts`)
- HTTP service → Hosted API: calls API (evidence: `Client/src/app/shared/http.service.ts`)
- Python server → User utility: imports utility (evidence: `Server/main.py`)