# emilytsague/studybridge architecture

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

- Interactive diagram: https://gitdiagram.com/emilytsague/studybridge
- Repository: https://github.com/emilytsague/studybridge

## Overview

StudyBridge is a multilingual learning platform combining WIM lessons and study tools with private accounts, imported course documents, assessments, an optional AI assistant, and a local animation studio. Learners use the browser interface to study or sign in and manage courses; signed-in progress and documents can be synchronized through the Node.js server. The graph preserves the documented feature branches, but the server excerpts omit most route handlers, so several internal links are shown only where the README or sampled calls support them.

Main entry points: [`public/portable.js`](https://github.com/emilytsague/studybridge/blob/main/public/portable.js) (AI assistant), [`speech.mjs`](https://github.com/emilytsague/studybridge/blob/main/speech.mjs) (Narration service), [`server.mjs`](https://github.com/emilytsague/studybridge/blob/main/server.mjs) (Account service), [`public/sync.js`](https://github.com/emilytsague/studybridge/blob/main/public/sync.js) (Progress sync)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Learning experience"]
  node_learning_ui["Learning interface<br/>[app.js]"]
  node_wim_content["WIM course content<br/>[content.js]"]
  node_progress_sync["Progress sync<br/>[sync.js]"]
end

subgraph group_accounts["Accounts and courses"]
  node_account_ui["Sign-in UI<br/>[login.js]"]
  node_course_library["Course library<br/>[extensions.js]"]
  node_document_import["Document import<br/>[extensions.js]"]
end

subgraph group_study_tools["Study tools and AI"]
  node_timed_exam["Timed WIM exam<br/>[extensions.js]"]
  node_course_exam["Imported-course exam<br/>[extensions.js]"]
  node_ai_assistant["AI assistant<br/>[portable.js]"]
end

subgraph group_animation["Animation studio"]
  node_storyboard["AI storyboard<br/>[portable.js]"]
  node_studio_editor["Animation studio<br/>[anime-studio.js]"]
  node_animation_audio["Local narration audio<br/>[anime-audio.js]"]
end

subgraph group_server["Server and persistence"]
  node_document_storage[("Private document storage<br/>[server.mjs]")]
  node_account_service["Account service<br/>[server.mjs]"]
  node_progress_storage[("Account progress storage<br/>[server.mjs]")]
  node_narration_api["Narration service<br/>[speech.mjs]"]
  node_voice_synth["Voice synthesis<br/>[narrate.py]"]
end

node_learner(("Learner"))
node_ai_provider{{"AI model provider"}}

node_learner -->|"studies with"| node_learning_ui
node_learning_ui -->|"uses lessons"| node_wim_content
node_learner -->|"signs in"| node_account_ui
node_account_ui -->|"authenticates with"| node_account_service
node_learner -->|"imports courses"| node_document_import
node_document_import -->|"manages documents"| node_course_library
node_course_library -->|"reads and writes"| node_document_storage
node_progress_sync -->|"checks session"| node_account_service
node_progress_sync -->|"syncs progress"| node_progress_storage
node_learner -->|"takes exam"| node_timed_exam
node_learner -->|"self-assesses"| node_course_exam
node_learner -->|"asks questions"| node_ai_assistant
node_ai_assistant -.->|"requests answers"| node_ai_provider
node_ai_assistant -->|"generates storyboard"| node_storyboard
node_learner -->|"edits and exports"| node_studio_editor
node_studio_editor -->|"adds narration"| node_animation_audio
node_animation_audio -->|"requests clips"| node_narration_api
node_narration_api -->|"spawns synthesis"| node_voice_synth
node_narration_api -.->|"requires sign-in"| node_account_service

click node_learning_ui "https://github.com/emilytsague/studybridge/blob/main/public/app.js"
click node_wim_content "https://github.com/emilytsague/studybridge/blob/main/public/content.js"
click node_progress_sync "https://github.com/emilytsague/studybridge/blob/main/public/sync.js"
click node_account_ui "https://github.com/emilytsague/studybridge/blob/main/public/login.js"
click node_course_library "https://github.com/emilytsague/studybridge/blob/main/public/extensions.js"
click node_document_import "https://github.com/emilytsague/studybridge/blob/main/public/extensions.js"
click node_document_storage "https://github.com/emilytsague/studybridge/blob/main/server.mjs"
click node_account_service "https://github.com/emilytsague/studybridge/blob/main/server.mjs"
click node_progress_storage "https://github.com/emilytsague/studybridge/blob/main/server.mjs"
click node_timed_exam "https://github.com/emilytsague/studybridge/blob/main/public/extensions.js"
click node_course_exam "https://github.com/emilytsague/studybridge/blob/main/public/extensions.js"
click node_ai_assistant "https://github.com/emilytsague/studybridge/blob/main/public/portable.js"
click node_storyboard "https://github.com/emilytsague/studybridge/blob/main/public/portable.js"
click node_studio_editor "https://github.com/emilytsague/studybridge/blob/main/public/anime-studio.js"
click node_animation_audio "https://github.com/emilytsague/studybridge/blob/main/public/anime-audio.js"
click node_narration_api "https://github.com/emilytsague/studybridge/blob/main/speech.mjs"
click node_voice_synth "https://github.com/emilytsague/studybridge/blob/main/scripts/narrate.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_learning_ui,node_wim_content,node_progress_sync toneBlue
class node_account_ui,node_course_library,node_document_import toneAmber
class node_timed_exam,node_course_exam,node_ai_assistant toneMint
class node_storyboard,node_studio_editor,node_animation_audio toneRose
class node_document_storage,node_account_service,node_progress_storage,node_narration_api,node_voice_synth,node_learner,node_ai_provider toneIndigo
```

## Components

### Learning experience

- [Learning interface](https://github.com/emilytsague/studybridge/blob/main/public/app.js): `public/app.js`
- [WIM course content](https://github.com/emilytsague/studybridge/blob/main/public/content.js): `public/content.js`
- [Progress sync](https://github.com/emilytsague/studybridge/blob/main/public/sync.js): `public/sync.js`

### Accounts and courses

- [Sign-in UI](https://github.com/emilytsague/studybridge/blob/main/public/login.js): `public/login.js`
- [Course library](https://github.com/emilytsague/studybridge/blob/main/public/extensions.js): `public/extensions.js`
- [Document import](https://github.com/emilytsague/studybridge/blob/main/public/extensions.js): `public/extensions.js`

### Study tools and AI

- [Timed WIM exam](https://github.com/emilytsague/studybridge/blob/main/public/extensions.js): `public/extensions.js`
- [Imported-course exam](https://github.com/emilytsague/studybridge/blob/main/public/extensions.js): `public/extensions.js`
- [AI assistant](https://github.com/emilytsague/studybridge/blob/main/public/portable.js): `public/portable.js`

### Animation studio

- [AI storyboard](https://github.com/emilytsague/studybridge/blob/main/public/portable.js): `public/portable.js`
- [Animation studio](https://github.com/emilytsague/studybridge/blob/main/public/anime-studio.js): `public/anime-studio.js`
- [Local narration audio](https://github.com/emilytsague/studybridge/blob/main/public/anime-audio.js): `public/anime-audio.js`

### Server and persistence

- [Private document storage](https://github.com/emilytsague/studybridge/blob/main/server.mjs): `server.mjs`
- [Account service](https://github.com/emilytsague/studybridge/blob/main/server.mjs): `server.mjs`
- [Account progress storage](https://github.com/emilytsague/studybridge/blob/main/server.mjs): `server.mjs`
- [Narration service](https://github.com/emilytsague/studybridge/blob/main/speech.mjs): `speech.mjs`
- [Voice synthesis](https://github.com/emilytsague/studybridge/blob/main/scripts/narrate.py): `scripts/narrate.py`

### Other components

- **Learner**
- **AI model provider**

## Connections

- Learner → Learning interface: studies with (evidence: `README.md`)
- Learning interface → WIM course content: uses lessons (evidence: `README.md`)
- Learner → Sign-in UI: signs in (evidence: `README.md`)
- Sign-in UI → Account service: authenticates with (evidence: `README.md`)
- Learner → Document import: imports courses (evidence: `README.md`)
- Document import → Course library: manages documents (evidence: `README.md`)
- Course library → Private document storage: reads and writes (evidence: `README.md`)
- Progress sync → Account service: checks session (evidence: `README.md`)
- Progress sync → Account progress storage: syncs progress (evidence: `README.md`)
- Learner → Timed WIM exam: takes exam (evidence: `README.md`)
- Learner → Imported-course exam: self-assesses (evidence: `README.md`)
- Learner → AI assistant: asks questions (evidence: `README.md`)
- AI assistant → AI model provider: requests answers (evidence: `README.md`)
- AI assistant → AI storyboard: generates storyboard (evidence: `README.md`)
- Learner → Animation studio: edits and exports (evidence: `README.md`)
- Animation studio → Local narration audio: adds narration (evidence: `public/anime-studio.js`)
- Local narration audio → Narration service: requests clips (evidence: `public/anime-audio.js`)
- Narration service → Voice synthesis: spawns synthesis (evidence: `speech.mjs`)
- Narration service → Account service: requires sign-in (evidence: `server.mjs`)