How cclank/cell-architecture-studio works
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: App.tsx App orchestration · Stage.tsx Specimen stage · CellScene.tsx 3D cell scene · useProgression.ts Progression state
Components 22
Studio experience
- App orchestration
src/App.tsx - Studio controls
src/components/Header.tsx - Specimen stage
src/components/Stage.tsx - Organelle details
src/components/RightPanel.tsx - Browser app entry
src/main.tsx
3D specimen rendering
- 3D cell scene
src/components/CellScene.tsx - Specimen catalog
src/data/cells.ts - Model materials
src/lib/cellMaterials.ts
Study and discovery
- Searchable gallery
src/components/SpecimenGridModal.tsx - Specimen comparison
src/components/ComparisonModal.tsx - Specimen quiz
src/components/SpecimenQuiz.tsx - Flashcards
src/components/FlashcardsModal.tsx - Study notebooks
src/components/NotebooksModal.tsx - AI tutor panel
src/components/RightPanel.tsx - Daily challenge
src/components/DailyChallenge.tsx - Specimen export
src/lib/download.ts
Progress and persistence
- Progression state
src/hooks/useProgression.ts - XP and achievements
src/lib/progression.ts - Local persistence
src/lib/storage.ts - Daily challenge logic
src/lib/daily.ts
Other components
- Learner
- Browser storage
Connections 22
- 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