# cclank/cell-architecture-studio architecture

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

- Interactive diagram: https://gitdiagram.com/cclank/cell-architecture-studio
- Repository: https://github.com/cclank/cell-architecture-studio

## Overview

Cell Architecture Studio is a browser-based educational cell gallery. Learners choose a specimen, inspect its 3D model and organelles, and can branch into comparison and study tools; saved preferences and learning progress persist locally. The graph emphasizes the documented product capabilities and the sampled App orchestration, data, rendering, and progression code. Several component internals were not sampled, so their specific call relationships are left out.

Main entry points: [`src/App.tsx`](https://github.com/cclank/cell-architecture-studio/blob/main/src/App.tsx) (App orchestration), [`src/components/Stage.tsx`](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/Stage.tsx) (Specimen stage), [`src/components/CellScene.tsx`](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/CellScene.tsx) (3D cell scene), [`src/hooks/useProgression.ts`](https://github.com/cclank/cell-architecture-studio/blob/main/src/hooks/useProgression.ts) (Progression state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_studio["Studio experience"]
  node_app["App orchestration<br/>[App.tsx]"]
  node_header["Studio controls<br/>[Header.tsx]"]
  node_stage["Specimen stage<br/>[Stage.tsx]"]
  node_details["Organelle details<br/>[RightPanel.tsx]"]
  node_entry["Browser app entry<br/>[main.tsx]"]
end

subgraph group_render["3D specimen rendering"]
  node_cellscene["3D cell scene<br/>[CellScene.tsx]"]
  node_cells["Specimen catalog<br/>[cells.ts]"]
  node_materials["Model materials<br/>[cellMaterials.ts]"]
end

subgraph group_learning["Study and discovery"]
  node_gallery["Searchable gallery"]
  node_comparison["Specimen comparison"]
  node_quiz["Specimen quiz<br/>[SpecimenQuiz.tsx]"]
  node_flashcards["Flashcards"]
  node_notebooks["Study notebooks<br/>[NotebooksModal.tsx]"]
  node_tutor["AI tutor panel<br/>[RightPanel.tsx]"]
  node_daily["Daily challenge<br/>[DailyChallenge.tsx]"]
  node_export["Specimen export<br/>[download.ts]"]
end

subgraph group_state["Progress and persistence"]
  node_progresshook["Progression state<br/>[useProgression.ts]"]
  node_progress["XP and achievements<br/>[progression.ts]"]
  node_storage["Local persistence<br/>[storage.ts]"]
  node_dailylogic["Daily challenge logic<br/>[daily.ts]"]
end

node_learner(("Learner"))
node_browserstore[("Browser storage")]

node_learner -->|"uses studio"| node_app
node_entry -->|"mounts"| node_app
node_app -->|"renders controls"| node_header
node_app -->|"selects specimen"| node_stage
node_stage -->|"renders scene"| node_cellscene
node_app -->|"shows details"| node_details
node_app -->|"reads catalog"| node_cells
node_app -->|"loads and saves"| node_storage
node_storage -->|"reads and writes"| node_browserstore
node_cellscene -->|"builds materials"| node_materials
node_app -->|"opens gallery"| node_gallery
node_app -->|"opens comparison"| node_comparison
node_app -->|"opens quiz"| node_quiz
node_app -->|"opens flashcards"| node_flashcards
node_app -->|"opens notebooks"| node_notebooks
node_app -->|"stages prompts"| node_tutor
node_app -->|"shows challenge"| node_daily
node_app -->|"checks and claims"| node_dailylogic
node_app -->|"exports specimen"| node_export
node_app -->|"records learning"| node_progresshook
node_progresshook -->|"awards progression"| node_progress
node_progress -->|"persists progress"| node_browserstore

click node_app "https://github.com/cclank/cell-architecture-studio/blob/main/src/App.tsx"
click node_header "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/Header.tsx"
click node_stage "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/Stage.tsx"
click node_details "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/RightPanel.tsx"
click node_cellscene "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/CellScene.tsx"
click node_cells "https://github.com/cclank/cell-architecture-studio/blob/main/src/data/cells.ts"
click node_materials "https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/cellMaterials.ts"
click node_gallery "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/SpecimenGridModal.tsx"
click node_comparison "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/ComparisonModal.tsx"
click node_quiz "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/SpecimenQuiz.tsx"
click node_flashcards "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/FlashcardsModal.tsx"
click node_notebooks "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/NotebooksModal.tsx"
click node_tutor "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/RightPanel.tsx"
click node_daily "https://github.com/cclank/cell-architecture-studio/blob/main/src/components/DailyChallenge.tsx"
click node_export "https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/download.ts"
click node_progresshook "https://github.com/cclank/cell-architecture-studio/blob/main/src/hooks/useProgression.ts"
click node_progress "https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/progression.ts"
click node_storage "https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/storage.ts"
click node_dailylogic "https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/daily.ts"
click node_entry "https://github.com/cclank/cell-architecture-studio/blob/main/src/main.tsx"

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_header,node_stage,node_details,node_entry toneBlue
class node_cellscene,node_cells,node_materials,node_browserstore toneAmber
class node_gallery,node_comparison,node_quiz,node_flashcards,node_notebooks,node_tutor,node_daily,node_export toneMint
class node_progresshook,node_progress,node_storage,node_dailylogic toneRose
class node_learner toneIndigo
```

## Components

### Studio experience

- [App orchestration](https://github.com/cclank/cell-architecture-studio/blob/main/src/App.tsx): `src/App.tsx`
- [Studio controls](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Specimen stage](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/Stage.tsx): `src/components/Stage.tsx`
- [Organelle details](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/RightPanel.tsx): `src/components/RightPanel.tsx`
- [Browser app entry](https://github.com/cclank/cell-architecture-studio/blob/main/src/main.tsx): `src/main.tsx`

### 3D specimen rendering

- [3D cell scene](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/CellScene.tsx): `src/components/CellScene.tsx`
- [Specimen catalog](https://github.com/cclank/cell-architecture-studio/blob/main/src/data/cells.ts): `src/data/cells.ts`
- [Model materials](https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/cellMaterials.ts): `src/lib/cellMaterials.ts`

### Study and discovery

- [Searchable gallery](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/SpecimenGridModal.tsx): `src/components/SpecimenGridModal.tsx`
- [Specimen comparison](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/ComparisonModal.tsx): `src/components/ComparisonModal.tsx`
- [Specimen quiz](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/SpecimenQuiz.tsx): `src/components/SpecimenQuiz.tsx`
- [Flashcards](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/FlashcardsModal.tsx): `src/components/FlashcardsModal.tsx`
- [Study notebooks](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/NotebooksModal.tsx): `src/components/NotebooksModal.tsx`
- [AI tutor panel](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/RightPanel.tsx): `src/components/RightPanel.tsx`
- [Daily challenge](https://github.com/cclank/cell-architecture-studio/blob/main/src/components/DailyChallenge.tsx): `src/components/DailyChallenge.tsx`
- [Specimen export](https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/download.ts): `src/lib/download.ts`

### Progress and persistence

- [Progression state](https://github.com/cclank/cell-architecture-studio/blob/main/src/hooks/useProgression.ts): `src/hooks/useProgression.ts`
- [XP and achievements](https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/progression.ts): `src/lib/progression.ts`
- [Local persistence](https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/storage.ts): `src/lib/storage.ts`
- [Daily challenge logic](https://github.com/cclank/cell-architecture-studio/blob/main/src/lib/daily.ts): `src/lib/daily.ts`

### Other components

- **Learner**
- **Browser storage**

## Connections

- Learner → App orchestration: uses studio
- Browser app entry → App orchestration: mounts
- App orchestration → Studio controls: renders controls
- App orchestration → Specimen stage: selects specimen
- Specimen stage → 3D cell scene: renders scene
- App orchestration → Organelle details: shows details
- App orchestration → Specimen catalog: reads catalog
- App orchestration → Local persistence: loads and saves
- Local persistence → Browser storage: reads and writes
- 3D cell scene → Model materials: builds materials
- App orchestration → Searchable gallery: opens gallery
- App orchestration → Specimen comparison: opens comparison
- App orchestration → Specimen quiz: opens quiz
- App orchestration → Flashcards: opens flashcards
- App orchestration → Study notebooks: opens notebooks
- App orchestration → AI tutor panel: stages prompts
- App orchestration → Daily challenge: shows challenge
- App orchestration → Daily challenge logic: checks and claims
- App orchestration → Specimen export: exports specimen
- App orchestration → Progression state: records learning
- Progression state → XP and achievements: awards progression
- XP and achievements → Browser storage: persists progress