# samogdovin193-dotcom/hearing-screening-app architecture

> Architecture diagram of the GitHub repository samogdovin193-dotcom/hearing-screening-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/samogdovin193-dotcom/hearing-screening-app
- Repository: https://github.com/samogdovin193-dotcom/hearing-screening-app

## Overview

This is a browser-based Slovak/Romani hearing-screening and speech-audiometry app. Users choose language and speaker/headphone listening mode, calibrate as needed, run a randomized picture-card word test, then review thresholds, answers, and calibration comparison. Settings manage per-language volume, selected words, and custom word media. The README documents these capabilities; unsampled page implementations are represented at their listed paths, so uncertain call-level wiring is omitted.

Main entry points: [`src/App.tsx`](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/App.tsx) (Route application), [`src/pages/Settings.tsx`](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Settings.tsx) (Settings), [`src/pages/ActiveTest.tsx`](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/ActiveTest.tsx) (Active test), [`src/lib/testWords.ts`](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/lib/testWords.ts) (Test-word selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Navigation"]
  node_app["Route application<br/>[App.tsx]"]
  node_home["Home<br/>[Home.tsx]"]
  node_test_choice["Test mode choice<br/>[TestSelection.tsx]"]
  node_ear_choice["Ear choice"]
  node_manual["Instructions<br/>[Manual.tsx]"]
end

subgraph group_test["Screening test"]
  node_start["Test setup<br/>[StartGame.tsx]"]
  node_active["Active test<br/>[ActiveTest.tsx]"]
  node_flow["Test-flow state<br/>[useTestFlow.ts]"]
  node_finish["Test finish<br/>[Finish.tsx]"]
  node_results["Results analysis<br/>[Results.tsx]"]
end

subgraph group_calibration["Calibration"]
  node_cal_page["Calibration screen<br/>[Calibration.tsx]"]
  node_cal_hook["Calibration operations<br/>[useCalibration.ts]"]
end

subgraph group_content["Words and settings"]
  node_settings["Settings<br/>[Settings.tsx]"]
  node_word_catalog["Test-word selection<br/>[testWords.ts]"]
  node_rom_audio["Romani media"]
  node_sk_audio["Slovak media"]
end

subgraph group_persistence["Local persistence"]
  node_custom_words[("Custom-word records<br/>[wordsDB.ts]")]
  node_cal_records[("Calibration records<br/>[db.ts]")]
  node_browser_storage[("Browser storage")]
end

node_participant(("Participant"))

node_participant -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_test_choice
node_app -->|"routes"| node_ear_choice
node_app -->|"routes"| node_manual
node_app -->|"routes"| node_cal_page
node_app -->|"routes"| node_start
node_app -->|"routes"| node_active
node_app -->|"routes"| node_finish
node_app -->|"routes"| node_results
node_app -->|"routes"| node_settings
node_participant -->|"chooses language"| node_home
node_participant -->|"selects mode"| node_test_choice
node_participant -->|"selects ear"| node_ear_choice
node_participant -->|"configures"| node_settings
node_participant -->|"calibrates"| node_cal_page
node_participant -->|"answers cards"| node_active
node_start -->|"begins test"| node_active
node_active -->|"uses test state"| node_flow
node_flow -->|"loads selected words"| node_word_catalog
node_word_catalog -->|"loads custom words"| node_custom_words
node_word_catalog -->|"uses Slovak media"| node_sk_audio
node_word_catalog -->|"uses Romani media"| node_rom_audio
node_flow -->|"reads volume settings"| node_browser_storage
node_active -->|"ends rounds"| node_finish
node_finish -->|"continues to results"| node_results
node_results -->|"reads saved result"| node_browser_storage
node_results -->|"reads comparison data"| node_cal_records
node_cal_page -->|"manages calibration"| node_cal_hook
node_cal_hook -->|"reads and writes"| node_cal_records
node_settings -->|"manages custom words"| node_custom_words
node_settings -->|"clears calibration"| node_cal_records
node_settings -->|"stores settings"| node_browser_storage

click node_app "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/App.tsx"
click node_home "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Home.tsx"
click node_test_choice "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/TestSelection.tsx"
click node_ear_choice "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/TestEarSelection.tsx"
click node_manual "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Manual.tsx"
click node_start "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/StartGame.tsx"
click node_active "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/ActiveTest.tsx"
click node_flow "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/hooks/useTestFlow.ts"
click node_finish "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Finish.tsx"
click node_results "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Results.tsx"
click node_cal_page "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Calibration.tsx"
click node_cal_hook "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/hooks/useCalibration.ts"
click node_settings "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Settings.tsx"
click node_word_catalog "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/lib/testWords.ts"
click node_custom_words "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/lib/wordsDB.ts"
click node_cal_records "https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/lib/db.ts"
click node_rom_audio "https://github.com/samogdovin193-dotcom/hearing-screening-app/tree/main/public/assets/rom"
click node_sk_audio "https://github.com/samogdovin193-dotcom/hearing-screening-app/tree/main/public/assets/sk"

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_home,node_test_choice,node_ear_choice,node_manual toneBlue
class node_start,node_active,node_flow,node_finish,node_results toneAmber
class node_cal_page,node_cal_hook toneMint
class node_settings,node_word_catalog,node_rom_audio,node_sk_audio toneRose
class node_custom_words,node_cal_records,node_browser_storage,node_participant toneIndigo
```

## Components

### Navigation

- [Route application](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/App.tsx): `src/App.tsx`
- [Home](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Test mode choice](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/TestSelection.tsx): `src/pages/TestSelection.tsx`
- [Ear choice](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/TestEarSelection.tsx): `src/pages/TestEarSelection.tsx`
- [Instructions](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Manual.tsx): `src/pages/Manual.tsx`

### Screening test

- [Test setup](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/StartGame.tsx): `src/pages/StartGame.tsx`
- [Active test](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/ActiveTest.tsx): `src/pages/ActiveTest.tsx`
- [Test-flow state](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/hooks/useTestFlow.ts): `src/hooks/useTestFlow.ts`
- [Test finish](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Finish.tsx): `src/pages/Finish.tsx`
- [Results analysis](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Results.tsx): `src/pages/Results.tsx`

### Calibration

- [Calibration screen](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Calibration.tsx): `src/pages/Calibration.tsx`
- [Calibration operations](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/hooks/useCalibration.ts): `src/hooks/useCalibration.ts`

### Words and settings

- [Settings](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/pages/Settings.tsx): `src/pages/Settings.tsx`
- [Test-word selection](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/lib/testWords.ts): `src/lib/testWords.ts`
- [Romani media](https://github.com/samogdovin193-dotcom/hearing-screening-app/tree/main/public/assets/rom): `public/assets/rom`
- [Slovak media](https://github.com/samogdovin193-dotcom/hearing-screening-app/tree/main/public/assets/sk): `public/assets/sk`

### Local persistence

- [Custom-word records](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/lib/wordsDB.ts): `src/lib/wordsDB.ts`
- [Calibration records](https://github.com/samogdovin193-dotcom/hearing-screening-app/blob/main/src/lib/db.ts): `src/lib/db.ts`
- **Browser storage**

### Other components

- **Participant**

## Connections

- Participant → Route application: opens
- Route application → Home: routes
- Route application → Test mode choice: routes
- Route application → Ear choice: routes
- Route application → Instructions: routes
- Route application → Calibration screen: routes
- Route application → Test setup: routes
- Route application → Active test: routes
- Route application → Test finish: routes
- Route application → Results analysis: routes
- Route application → Settings: routes
- Participant → Home: chooses language
- Participant → Test mode choice: selects mode
- Participant → Ear choice: selects ear
- Participant → Settings: configures
- Participant → Calibration screen: calibrates
- Participant → Active test: answers cards
- Test setup → Active test: begins test
- Active test → Test-flow state: uses test state
- Test-flow state → Test-word selection: loads selected words
- Test-word selection → Custom-word records: loads custom words
- Test-word selection → Slovak media: uses Slovak media
- Test-word selection → Romani media: uses Romani media
- Test-flow state → Browser storage: reads volume settings
- Active test → Test finish: ends rounds
- Test finish → Results analysis: continues to results
- Results analysis → Browser storage: reads saved result
- Results analysis → Calibration records: reads comparison data
- Calibration screen → Calibration operations: manages calibration
- Calibration operations → Calibration records: reads and writes
- Settings → Custom-word records: manages custom words
- Settings → Calibration records: clears calibration
- Settings → Browser storage: stores settings