# szidzse/transcribe-poc-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/szidzse/transcribe-poc-frontend
- Repository: https://github.com/szidzse/transcribe-poc-frontend

## Overview

This is a browser-based voice recorder: the user opens the recorder, captures microphone audio, previews and plays it, then downloads a named WebM file or discards it. The dialog coordinates UI actions and the recorder hook owns browser media capture, audio analysis, playback, and cleanup; the waveform visualizes analyzer data. README mentions a future AWS conversion/upload workflow, but it is explicitly TODO and not implemented, so it is not modeled as a runtime capability. Edges reflect shown imports and calls; no persistent backend or file store is present.

Main entry points: [`src/components/voice-recorder-dialog.tsx`](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/voice-recorder-dialog.tsx) (Recorder dialog), [`src/hooks/useVoiceRecorder.ts`](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/hooks/useVoiceRecorder.ts) (Recorder controller), [`src/components/waveform-visualizer.tsx`](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/waveform-visualizer.tsx) (Waveform visualizer), [`src/lib/types/voice-recorder-types.ts`](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/lib/types/voice-recorder-types.ts) (Recorder state types)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Recorder interface"]
  node_app["Application shell<br/>[App.tsx]"]
  node_dialog["Recorder dialog"]
  node_actions["Recorder actions"]
  node_waveform["Waveform visualizer"]
  node_audio["Audio preview element"]
end

subgraph group_capture["Audio capture and playback"]
  node_hook["Recorder controller"]
end

subgraph group_shared["Shared UI and types"]
  node_types["Recorder state types"]
  node_button["Button primitive<br/>[button.tsx]"]
  node_dialogui["Dialog primitives<br/>[dialog.tsx]"]
  node_slider["Slider primitive<br/>[slider.tsx]"]
  node_utils["Class utilities<br/>[utils.ts]"]
end

node_user(("User"))
node_browser["Browser audio APIs"]
node_download["Local file download"]

node_user -->|"uses"| node_app
node_app -->|"renders"| node_dialog
node_dialog -->|"invokes"| node_hook
node_dialog -->|"renders"| node_waveform
node_dialog -->|"renders"| node_actions
node_actions -->|"dispatches actions"| node_dialog
node_dialog -->|"downloads audio"| node_download
node_hook -->|"captures and plays"| node_browser
node_dialog -->|"binds audio URL"| node_audio
node_hook -->|"controls playback"| node_audio
node_hook -->|"provides analyser"| node_waveform
node_waveform -->|"reads frequency data"| node_browser
node_dialog -->|"uses state contract"| node_types
node_actions -->|"uses state contract"| node_types
node_hook -->|"implements contract"| node_types
node_waveform -->|"uses state type"| node_types
node_dialogui -->|"uses"| node_button
node_dialogui -->|"merges classes"| node_utils
node_button -->|"merges classes"| node_utils
node_slider -->|"merges classes"| node_utils

click node_app "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/App.tsx"
click node_dialog "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/voice-recorder-dialog.tsx"
click node_actions "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/recorder-actions.tsx"
click node_hook "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/hooks/useVoiceRecorder.ts"
click node_waveform "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/waveform-visualizer.tsx"
click node_audio "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/voice-recorder-dialog.tsx"
click node_types "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/lib/types/voice-recorder-types.ts"
click node_button "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/ui/button.tsx"
click node_dialogui "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/ui/dialog.tsx"
click node_slider "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/ui/slider.tsx"
click node_utils "https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/lib/utils.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_app,node_dialog,node_actions,node_waveform,node_audio,node_user,node_browser toneBlue
class node_hook toneAmber
class node_types,node_button,node_dialogui,node_slider,node_utils toneMint
class node_download toneIndigo
```

## Components

### Recorder interface

- [Application shell](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/App.tsx): `src/App.tsx`
- [Recorder dialog](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/voice-recorder-dialog.tsx): `src/components/voice-recorder-dialog.tsx`
- [Recorder actions](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/recorder-actions.tsx): `src/components/recorder-actions.tsx`
- [Waveform visualizer](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/waveform-visualizer.tsx): `src/components/waveform-visualizer.tsx`
- [Audio preview element](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/voice-recorder-dialog.tsx): `src/components/voice-recorder-dialog.tsx`

### Audio capture and playback

- [Recorder controller](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/hooks/useVoiceRecorder.ts): `src/hooks/useVoiceRecorder.ts`

### Shared UI and types

- [Recorder state types](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/lib/types/voice-recorder-types.ts): `src/lib/types/voice-recorder-types.ts`
- [Button primitive](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Dialog primitives](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/ui/dialog.tsx): `src/components/ui/dialog.tsx`
- [Slider primitive](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/components/ui/slider.tsx): `src/components/ui/slider.tsx`
- [Class utilities](https://github.com/szidzse/transcribe-poc-frontend/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Other components

- **User**
- **Browser audio APIs**
- **Local file download**

## Connections

- User → Application shell: uses
- Application shell → Recorder dialog: renders (evidence: `src/App.tsx`)
- Recorder dialog → Recorder controller: invokes (evidence: `src/components/voice-recorder-dialog.tsx`)
- Recorder dialog → Waveform visualizer: renders (evidence: `src/components/voice-recorder-dialog.tsx`)
- Recorder dialog → Recorder actions: renders (evidence: `src/components/voice-recorder-dialog.tsx`)
- Recorder actions → Recorder dialog: dispatches actions (evidence: `src/components/recorder-actions.tsx`)
- Recorder dialog → Local file download: downloads audio (evidence: `src/components/voice-recorder-dialog.tsx`)
- Recorder controller → Browser audio APIs: captures and plays (evidence: `src/hooks/useVoiceRecorder.ts`)
- Recorder dialog → Audio preview element: binds audio URL (evidence: `src/components/voice-recorder-dialog.tsx`)
- Recorder controller → Audio preview element: controls playback (evidence: `src/hooks/useVoiceRecorder.ts`)
- Recorder controller → Waveform visualizer: provides analyser (evidence: `src/components/voice-recorder-dialog.tsx`)
- Waveform visualizer → Browser audio APIs: reads frequency data (evidence: `src/components/waveform-visualizer.tsx`)
- Recorder dialog → Recorder state types: uses state contract (evidence: `src/components/voice-recorder-dialog.tsx`)
- Recorder actions → Recorder state types: uses state contract (evidence: `src/components/recorder-actions.tsx`)
- Recorder controller → Recorder state types: implements contract (evidence: `src/hooks/useVoiceRecorder.ts`)
- Waveform visualizer → Recorder state types: uses state type (evidence: `src/components/waveform-visualizer.tsx`)
- Dialog primitives → Button primitive: uses (evidence: `src/components/ui/dialog.tsx`)
- Dialog primitives → Class utilities: merges classes (evidence: `src/components/ui/dialog.tsx`)
- Button primitive → Class utilities: merges classes (evidence: `src/components/ui/button.tsx`)
- Slider primitive → Class utilities: merges classes (evidence: `src/components/ui/slider.tsx`)