# muhammad-ahsan678/silencee architecture

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

- Interactive diagram: https://gitdiagram.com/muhammad-ahsan678/silencee
- Repository: https://github.com/muhammad-ahsan678/silencee

## Overview

The product is a browser-based reading experience for The Silence: the home page lists story acts, a selected act is loaded from the root story text, and a client-side reader presents its slides with text-size and in-act navigation controls. The story-data module parses the text into acts and slides for both pages. The graph focuses on these runtime responsibilities; the browser-to-page entry is shown as unverified because the excerpts do not show framework request dispatch.

Main entry points: [`app/page.tsx`](https://github.com/muhammad-ahsan678/silencee/blob/main/app/page.tsx) (Act listing), [`app/act/[slug]/page.tsx`](https://github.com/muhammad-ahsan678/silencee/blob/main/app/act/%5Bslug%5D/page.tsx) (Act route), [`lib/story-data.ts`](https://github.com/muhammad-ahsan678/silencee/blob/main/lib/story-data.ts) (Story parser), [`components/story-reader.tsx`](https://github.com/muhammad-ahsan678/silencee/blob/main/components/story-reader.tsx) (Slide reader)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Page routes"]
  node_home["Act listing<br/>[page.tsx]"]
  node_act_route["Act route<br/>[page.tsx]"]
end

subgraph group_story["Story reading"]
  node_story_reader["Slide reader<br/>[story-reader.tsx]"]
  node_story_data["Story parser<br/>[story-data.ts]"]
  node_story_file["Story text<br/>[STORY.txt]"]
end

node_browser(("Reader"))

node_browser -.->|"opens"| node_home
node_home -->|"loads acts"| node_story_data
node_home -->|"links to act"| node_act_route
node_act_route -->|"loads acts"| node_story_data
node_act_route -->|"renders reader"| node_story_reader
node_story_data -->|"reads text"| node_story_file

click node_home "https://github.com/muhammad-ahsan678/silencee/blob/main/app/page.tsx"
click node_act_route "https://github.com/muhammad-ahsan678/silencee/blob/main/app/act/%5Bslug%5D/page.tsx"
click node_story_reader "https://github.com/muhammad-ahsan678/silencee/blob/main/components/story-reader.tsx"
click node_story_data "https://github.com/muhammad-ahsan678/silencee/blob/main/lib/story-data.ts"
click node_story_file "https://github.com/muhammad-ahsan678/silencee/blob/main/STORY.txt"

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_act_route toneBlue
class node_story_reader,node_story_data,node_story_file toneAmber
class node_browser toneIndigo
```

## Components

### Page routes

- [Act listing](https://github.com/muhammad-ahsan678/silencee/blob/main/app/page.tsx): `app/page.tsx`
- [Act route](https://github.com/muhammad-ahsan678/silencee/blob/main/app/act/%5Bslug%5D/page.tsx): `app/act/[slug]/page.tsx`

### Story reading

- [Slide reader](https://github.com/muhammad-ahsan678/silencee/blob/main/components/story-reader.tsx): `components/story-reader.tsx`
- [Story parser](https://github.com/muhammad-ahsan678/silencee/blob/main/lib/story-data.ts): `lib/story-data.ts`
- [Story text](https://github.com/muhammad-ahsan678/silencee/blob/main/STORY.txt): `STORY.txt`

### Other components

- **Reader**

## Connections

- Reader → Act listing: opens
- Act listing → Story parser: loads acts (evidence: `app/page.tsx`)
- Act listing → Act route: links to act (evidence: `app/page.tsx`)
- Act route → Story parser: loads acts (evidence: `app/act/[slug]/page.tsx`)
- Act route → Slide reader: renders reader (evidence: `app/act/[slug]/page.tsx`)
- Story parser → Story text: reads text (evidence: `lib/story-data.ts`)