# koraycihan/trtminikmaceralar architecture

> Architecture diagram of the GitHub repository koraycihan/trtminikmaceralar, 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/koraycihan/trtminikmaceralar
- Repository: https://github.com/koraycihan/trtminikmaceralar

## Overview

TRT Etkileşimli Hikâye is a mobile app where children choose a story, read or hear branching scenes, and reach different endings. The documented journey also includes checking story details, viewing results, replaying stories, and reviewing saved progress. Sampled source confirms the home screen starts stories through shared context, which persists progress and favorites locally; the player renders registered story nodes and submits choices through that context. Other route connections and validation details are not fully evidenced in the excerpts, so uncertain wiring is omitted.

Main entry points: [`src/components/StoryPlayer.tsx`](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/components/StoryPlayer.tsx) (Story player), [`src/context/StoryContext.tsx`](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/context/StoryContext.tsx) (Story context), [`src/stories/index.ts`](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/stories/index.ts) (Story registry), [`src/app/index.tsx`](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/index.tsx) (Story home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_journey["App journey"]
  node_home["Story home<br/>[index.tsx]"]
  node_check["Story check<br/>[story-check.tsx]"]
  node_result["Story result<br/>[result.tsx]"]
  node_my_story["My stories<br/>[my-story.tsx]"]
  node_story_route["Story route<br/>[story.tsx]"]
end

subgraph group_runtime["Story runtime"]
  node_player["Story player<br/>[StoryPlayer.tsx]"]
  node_story_engine["Story path engine<br/>[storyPaths.ts]"]
  node_story_validation["Story validation<br/>[validateStory.ts]"]
  node_choice_ui["Choice controls<br/>[ChoiceButton.tsx]"]
end

subgraph group_catalog["Story content"]
  node_catalog_index["Story registry<br/>[index.ts]"]
  node_story_data["Branching story data"]
  node_story_types["Story model<br/>[story.ts]"]
  node_scene_visuals["Scene images"]
end

subgraph group_support["State and media"]
  node_story_state["Story context<br/>[StoryContext.tsx]"]
  node_progress_store[("Device progress<br/>[StoryContext.tsx]")]
  node_reader_hook["Narration reader<br/>[useStoryReader.ts]"]
  node_narration_hook["Scene narration<br/>[useNarration.ts]"]
end

node_child(("Child reader"))
node_audio_service["Audio and speech"]

node_child -->|"opens"| node_home
node_home -->|"starts story"| node_story_state
node_home -->|"lists stories"| node_catalog_index
node_story_state -->|"loads and saves"| node_progress_store
node_story_state -->|"checks story IDs"| node_catalog_index
node_story_route -->|"renders"| node_player
node_player -->|"reads progress"| node_story_state
node_player -->|"submits choice"| node_story_state
node_player -->|"finds active story"| node_catalog_index
node_catalog_index -->|"registers"| node_story_data
node_player -->|"renders choices"| node_choice_ui
node_player -->|"loads scene images"| node_scene_visuals
node_story_state -->|"stops speech"| node_audio_service
node_reader_hook -->|"plays narration"| node_audio_service
node_narration_hook -->|"speaks or plays"| node_audio_service
node_story_engine -->|"resolves paths"| node_story_data
node_story_validation -->|"validates structure"| node_story_data

click node_home "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/index.tsx"
click node_check "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/story-check.tsx"
click node_player "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/components/StoryPlayer.tsx"
click node_result "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/result.tsx"
click node_my_story "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/my-story.tsx"
click node_story_route "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/story.tsx"
click node_story_state "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/context/StoryContext.tsx"
click node_progress_store "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/context/StoryContext.tsx"
click node_catalog_index "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/stories/index.ts"
click node_story_data "https://github.com/koraycihan/trtminikmaceralar/tree/main/src/stories"
click node_story_types "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/types/story.ts"
click node_story_engine "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/engine/storyPaths.ts"
click node_story_validation "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/engine/validateStory.ts"
click node_choice_ui "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/components/ChoiceButton.tsx"
click node_scene_visuals "https://github.com/koraycihan/trtminikmaceralar/tree/main/src/stories"
click node_reader_hook "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/hooks/useStoryReader.ts"
click node_narration_hook "https://github.com/koraycihan/trtminikmaceralar/blob/main/src/hooks/useNarration.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_home,node_check,node_result,node_my_story,node_story_route toneBlue
class node_player,node_story_engine,node_story_validation,node_choice_ui toneAmber
class node_catalog_index,node_story_data,node_story_types,node_scene_visuals toneMint
class node_story_state,node_progress_store,node_reader_hook,node_narration_hook toneRose
class node_child,node_audio_service toneIndigo
```

## Components

### App journey

- [Story home](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/index.tsx): `src/app/index.tsx`
- [Story check](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/story-check.tsx): `src/app/story-check.tsx`
- [Story result](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/result.tsx): `src/app/result.tsx`
- [My stories](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/my-story.tsx): `src/app/my-story.tsx`
- [Story route](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/app/story.tsx): `src/app/story.tsx`

### Story runtime

- [Story player](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/components/StoryPlayer.tsx): `src/components/StoryPlayer.tsx`
- [Story path engine](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/engine/storyPaths.ts): `src/engine/storyPaths.ts`
- [Story validation](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/engine/validateStory.ts): `src/engine/validateStory.ts`
- [Choice controls](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/components/ChoiceButton.tsx): `src/components/ChoiceButton.tsx`

### Story content

- [Story registry](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/stories/index.ts): `src/stories/index.ts`
- [Branching story data](https://github.com/koraycihan/trtminikmaceralar/tree/main/src/stories): `src/stories`
- [Story model](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/types/story.ts): `src/types/story.ts`
- [Scene images](https://github.com/koraycihan/trtminikmaceralar/tree/main/src/stories): `src/stories`

### State and media

- [Story context](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/context/StoryContext.tsx): `src/context/StoryContext.tsx`
- [Device progress](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/context/StoryContext.tsx): `src/context/StoryContext.tsx`
- [Narration reader](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/hooks/useStoryReader.ts): `src/hooks/useStoryReader.ts`
- [Scene narration](https://github.com/koraycihan/trtminikmaceralar/blob/main/src/hooks/useNarration.ts): `src/hooks/useNarration.ts`

### Other components

- **Child reader**
- **Audio and speech**

## Connections

- Child reader → Story home: opens
- Story home → Story context: starts story
- Story home → Story registry: lists stories
- Story context → Device progress: loads and saves
- Story context → Story registry: checks story IDs
- Story route → Story player: renders
- Story player → Story context: reads progress
- Story player → Story context: submits choice
- Story player → Story registry: finds active story
- Story registry → Branching story data: registers
- Story player → Choice controls: renders choices
- Story player → Scene images: loads scene images
- Story context → Audio and speech: stops speech
- Narration reader → Audio and speech: plays narration
- Scene narration → Audio and speech: speaks or plays
- Story path engine → Branching story data: resolves paths
- Story validation → Branching story data: validates structure