# mehedi-hasan-2426/sprichio architecture

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

- Interactive diagram: https://gitdiagram.com/mehedi-hasan-2426/sprichio
- Repository: https://github.com/mehedi-hasan-2426/sprichio

## Overview

Sprichio is a German-practice web app. Learners enter through a public introduction, take a placement test, then practise across 12 everyday topics and review checkpoints; grammar lessons and spaced-repetition flashcards provide separate practice paths. Progress is kept in the guest’s browser or synced for approved accounts. The graph reflects README capabilities and sampled call sites; some feature internals are represented by their existing directories where source was not sampled.

Main entry points: [`src/server/protect.ts`](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/protect.ts) (Course gate), [`src/state/ProgressContext.tsx`](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/state/ProgressContext.tsx) (Progress context), [`src/server/auth.ts`](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/auth.ts) (Google sign-in), [`pages/woche/[n]/[section].tsx`](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/woche/%5Bn%5D/%5Bsection%5D.tsx) (Topic lessons)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and access"]
  node_intro["Public introduction<br/>[index.tsx]"]
  node_placement["Placement test<br/>[einstufung.tsx]"]
  node_access["Access policy<br/>[access.ts]"]
  node_auth["Google sign-in<br/>[auth.ts]"]
  node_protection["Course gate<br/>[protect.ts]"]
end

subgraph group_course["Course learning"]
  node_dashboard["Learning dashboard<br/>[learn.tsx]"]
  node_course["Course loader<br/>[load.ts]"]
  node_topic["Topic lessons<br/>[&#91;section&#93;.tsx]"]
  node_lesson["Lesson content<br/>[SectionView.tsx]"]
  node_item["Exercise interaction<br/>[ItemView.tsx]"]
end

subgraph group_practice["Practice features"]
  node_grammar["Grammar lessons<br/>[&#91;...topic&#93;.tsx]"]
  node_grammarcontent["Grammar catalogue<br/>[grammar-lessons.ts]"]
  node_flashcards["Spaced flashcards<br/>[karten.tsx]"]
  node_vocabulary["Vocabulary content<br/>[knowledge.ts]"]
  node_checkpoint["Checkpoints<br/>[&#91;n&#93;.tsx]"]
  node_writing["Writing tasks<br/>[WritingTask.tsx]"]
  node_grammarpractice["Grammar practice"]
end

subgraph group_state["Progress and sync"]
  node_context["Progress context"]
  node_progress["Progress model<br/>[progress.ts]"]
  node_schedule["Review schedule<br/>[leitner.ts]"]
  node_sync["Sync coordinator<br/>[progress-sync.ts]"]
  node_transport["Progress transport<br/>[progress-client.ts]"]
end

subgraph group_server["Server services"]
  node_api["Progress API<br/>[progress-api.ts]"]
  node_store[("Cloud progress store<br/>[progress-store.ts]")]
  node_google(("Google identity"))
  node_postgres[("Neon Postgres")]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_intro
node_intro -->|"starts placement"| node_placement
node_placement -->|"continues into topics"| node_topic
node_learner -->|"enters course"| node_dashboard
node_dashboard -->|"requires access"| node_protection
node_protection -->|"checks session"| node_auth
node_auth -->|"checks eligibility"| node_access
node_auth -->|"authenticates with"| node_google
node_protection -->|"loads navigation"| node_course
node_topic -->|"guards page"| node_protection
node_topic -->|"renders lesson"| node_lesson
node_lesson -.->|"renders exercises"| node_item
node_learner -->|"chooses grammar"| node_grammar
node_grammar -->|"presents lessons"| node_grammarcontent
node_grammar -->|"renders practice"| node_grammarpractice
node_learner -->|"reviews cards"| node_flashcards
node_flashcards -->|"loads vocabulary"| node_vocabulary
node_learner -->|"takes checkpoint"| node_checkpoint
node_checkpoint -->|"renders writing task"| node_writing
node_item -->|"records answers"| node_progress
node_context -->|"updates progress"| node_progress
node_context -->|"uses review schedule"| node_schedule
node_context -->|"coordinates sync"| node_sync
node_sync -->|"reads and writes"| node_transport
node_transport -->|"requests progress"| node_api
node_api -->|"loads and saves"| node_store
node_store -.->|"persists progress"| node_postgres

click node_intro "https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/index.tsx"
click node_placement "https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/einstufung.tsx"
click node_access "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/access.ts"
click node_auth "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/auth.ts"
click node_protection "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/protect.ts"
click node_dashboard "https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/learn.tsx"
click node_course "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/load.ts"
click node_topic "https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/woche/%5Bn%5D/%5Bsection%5D.tsx"
click node_lesson "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/SectionView.tsx"
click node_item "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/ItemView.tsx"
click node_grammar "https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/grammatik/%5B...topic%5D.tsx"
click node_grammarcontent "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/content/grammar-lessons.ts"
click node_flashcards "https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/karten.tsx"
click node_vocabulary "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/content/knowledge.ts"
click node_checkpoint "https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/checkpoint/%5Bn%5D.tsx"
click node_writing "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/WritingTask.tsx"
click node_grammarpractice "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/GrammarPractice.tsx"
click node_context "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/state/ProgressContext.tsx"
click node_progress "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/progress.ts"
click node_schedule "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/leitner.ts"
click node_sync "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/progress-sync.ts"
click node_transport "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/progress-client.ts"
click node_api "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/progress-api.ts"
click node_store "https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/progress-store.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_intro,node_placement,node_access,node_auth,node_protection toneBlue
class node_dashboard,node_course,node_topic,node_lesson,node_item toneAmber
class node_grammar,node_grammarcontent,node_flashcards,node_vocabulary,node_checkpoint,node_writing,node_grammarpractice toneMint
class node_context,node_progress,node_schedule,node_sync,node_transport toneRose
class node_api,node_store,node_google,node_postgres,node_learner toneIndigo
```

## Components

### Entry and access

- [Public introduction](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/index.tsx): `pages/index.tsx`
- [Placement test](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/einstufung.tsx): `pages/einstufung.tsx`
- [Access policy](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/access.ts): `src/lib/access.ts`
- [Google sign-in](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/auth.ts): `src/server/auth.ts`
- [Course gate](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/protect.ts): `src/server/protect.ts`

### Course learning

- [Learning dashboard](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/learn.tsx): `pages/learn.tsx`
- [Course loader](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/load.ts): `src/server/load.ts`
- [Topic lessons](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/woche/%5Bn%5D/%5Bsection%5D.tsx): `pages/woche/[n]/[section].tsx`
- [Lesson content](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/SectionView.tsx): `src/components/SectionView.tsx`
- [Exercise interaction](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/ItemView.tsx): `src/components/ItemView.tsx`

### Practice features

- [Grammar lessons](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/grammatik/%5B...topic%5D.tsx): `pages/grammatik/[...topic].tsx`
- [Grammar catalogue](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/content/grammar-lessons.ts): `src/content/grammar-lessons.ts`
- [Spaced flashcards](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/karten.tsx): `pages/karten.tsx`
- [Vocabulary content](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/content/knowledge.ts): `src/content/knowledge.ts`
- [Checkpoints](https://github.com/mehedi-hasan-2426/sprichio/blob/main/pages/checkpoint/%5Bn%5D.tsx): `pages/checkpoint/[n].tsx`
- [Writing tasks](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/WritingTask.tsx): `src/components/WritingTask.tsx`
- [Grammar practice](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/components/GrammarPractice.tsx): `src/components/GrammarPractice.tsx`

### Progress and sync

- [Progress context](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/state/ProgressContext.tsx): `src/state/ProgressContext.tsx`
- [Progress model](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/progress.ts): `src/lib/progress.ts`
- [Review schedule](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/leitner.ts): `src/lib/leitner.ts`
- [Sync coordinator](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/progress-sync.ts): `src/lib/progress-sync.ts`
- [Progress transport](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/lib/progress-client.ts): `src/lib/progress-client.ts`

### Server services

- [Progress API](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/progress-api.ts): `src/server/progress-api.ts`
- [Cloud progress store](https://github.com/mehedi-hasan-2426/sprichio/blob/main/src/server/progress-store.ts): `src/server/progress-store.ts`
- **Google identity**
- **Neon Postgres**

### Other components

- **Learner**

## Connections

- Learner → Public introduction: opens
- Public introduction → Placement test: starts placement
- Placement test → Topic lessons: continues into topics
- Learner → Learning dashboard: enters course
- Learning dashboard → Course gate: requires access (evidence: `src/server/protect.ts`)
- Course gate → Google sign-in: checks session (evidence: `src/server/protect.ts`)
- Google sign-in → Access policy: checks eligibility (evidence: `src/server/auth.ts`)
- Google sign-in → Google identity: authenticates with (evidence: `src/server/auth.ts`)
- Course gate → Course loader: loads navigation (evidence: `src/server/protect.ts`)
- Topic lessons → Course gate: guards page (evidence: `pages/woche/[n]/[section].tsx`)
- Topic lessons → Lesson content: renders lesson (evidence: `pages/woche/[n]/[section].tsx`)
- Lesson content → Exercise interaction: renders exercises
- Learner → Grammar lessons: chooses grammar
- Grammar lessons → Grammar catalogue: presents lessons (evidence: `pages/grammatik/[...topic].tsx`)
- Grammar lessons → Grammar practice: renders practice (evidence: `pages/grammatik/[...topic].tsx`)
- Learner → Spaced flashcards: reviews cards
- Spaced flashcards → Vocabulary content: loads vocabulary (evidence: `pages/karten.tsx`)
- Learner → Checkpoints: takes checkpoint
- Checkpoints → Writing tasks: renders writing task (evidence: `pages/checkpoint/[n].tsx`)
- Exercise interaction → Progress model: records answers (evidence: `src/components/ItemView.tsx`)
- Progress context → Progress model: updates progress (evidence: `src/state/ProgressContext.tsx`)
- Progress context → Review schedule: uses review schedule (evidence: `src/state/ProgressContext.tsx`)
- Progress context → Sync coordinator: coordinates sync (evidence: `src/state/ProgressContext.tsx`)
- Sync coordinator → Progress transport: reads and writes (evidence: `src/lib/progress-client.ts`)
- Progress transport → Progress API: requests progress (evidence: `src/lib/progress-client.ts`)
- Progress API → Cloud progress store: loads and saves (evidence: `src/server/progress-api.ts`)
- Cloud progress store → Neon Postgres: persists progress