# hasim2006/qr-mesh architecture

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

- Interactive diagram: https://gitdiagram.com/hasim2006/qr-mesh
- Repository: https://github.com/hasim2006/qr-mesh

## Overview

QRMesh is a browser-based, air-gapped file-transfer application: a sender prepares an image or audio file, displays its data as cycling QR codes, and a receiver scans and reconstructs it for preview or download. The documented workflow and sampled components support the main calls and data flow shown; the README also documents offline operation, out-of-order chunk collection, adjustable transmission speed, and high QR error correction. Source excerpts are partial, so peripheral behavior is not mapped.

Main entry points: [`src/components/SendMode.tsx`](https://github.com/hasim2006/qr-mesh/blob/main/src/components/SendMode.tsx) (File selection and QR loop), [`src/components/ReceiveMode.tsx`](https://github.com/hasim2006/qr-mesh/blob/main/src/components/ReceiveMode.tsx) (Scanning and chunk collection), [`src/App.tsx`](https://github.com/hasim2006/qr-mesh/blob/main/src/App.tsx) (Mode and theme UI), [`src/utils/dataUtils.ts`](https://github.com/hasim2006/qr-mesh/blob/main/src/utils/dataUtils.ts) (Media preparation and chunking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["App interface"]
  node_app["Mode and theme UI<br/>[App.tsx]"]
end

subgraph group_transmit["Transmit pipeline"]
  node_send["File selection and QR loop<br/>[SendMode.tsx]"]
  node_prepare["Media preparation and chunking<br/>[dataUtils.ts]"]
  node_deflate["DEFLATE compression"]
  node_qrgen["QR generation"]
end

subgraph group_optical["Optical transfer"]
  node_sender_screen["Sender screen"]
  node_light["Optical light link"]
  node_receiver_camera["Receiver camera"]
end

subgraph group_receive["Receive pipeline"]
  node_camera_api["Browser camera API"]
  node_receive["Scanning and chunk collection<br/>[ReceiveMode.tsx]"]
  node_qrscan["QR frame detection"]
  node_rebuild["Reassembly and inflation<br/>[dataUtils.ts]"]
  node_inflate["DEFLATE decompression"]
end

node_user(("User"))

node_user -->|"selects mode"| node_app
node_app -->|"renders transmit"| node_send
node_app -->|"renders scan"| node_receive
node_user -->|"selects file"| node_send
node_send -->|"prepares and chunks"| node_prepare
node_prepare -->|"compresses bytes"| node_deflate
node_deflate -->|"returns compressed data"| node_prepare
node_send -->|"encodes chunk"| node_qrgen
node_qrgen -->|"returns QR image"| node_send
node_send -->|"renders QR frames"| node_sender_screen
node_sender_screen -->|"emits light"| node_light
node_light -->|"carries QR image"| node_receiver_camera
node_receiver_camera -->|"provides video"| node_camera_api
node_camera_api -->|"supplies frames"| node_receive
node_receive -->|"decodes frames"| node_qrscan
node_qrscan -->|"returns QR payload"| node_receive
node_receive -->|"reassembles chunks"| node_rebuild
node_rebuild -->|"inflates bytes"| node_inflate
node_inflate -->|"returns media bytes"| node_rebuild
node_receive -->|"previews or downloads"| node_user

click node_app "https://github.com/hasim2006/qr-mesh/blob/main/src/App.tsx"
click node_send "https://github.com/hasim2006/qr-mesh/blob/main/src/components/SendMode.tsx"
click node_prepare "https://github.com/hasim2006/qr-mesh/blob/main/src/utils/dataUtils.ts"
click node_receive "https://github.com/hasim2006/qr-mesh/blob/main/src/components/ReceiveMode.tsx"
click node_rebuild "https://github.com/hasim2006/qr-mesh/blob/main/src/utils/dataUtils.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_user toneBlue
class node_send,node_prepare,node_deflate,node_qrgen toneAmber
class node_sender_screen,node_light,node_receiver_camera toneMint
class node_camera_api,node_receive,node_qrscan,node_rebuild,node_inflate toneRose
```

## Components

### App interface

- [Mode and theme UI](https://github.com/hasim2006/qr-mesh/blob/main/src/App.tsx): `src/App.tsx`

### Transmit pipeline

- [File selection and QR loop](https://github.com/hasim2006/qr-mesh/blob/main/src/components/SendMode.tsx): `src/components/SendMode.tsx`
- [Media preparation and chunking](https://github.com/hasim2006/qr-mesh/blob/main/src/utils/dataUtils.ts): `src/utils/dataUtils.ts`
- **DEFLATE compression**
- **QR generation**

### Optical transfer

- **Sender screen**
- **Optical light link**
- **Receiver camera**

### Receive pipeline

- **Browser camera API**
- [Scanning and chunk collection](https://github.com/hasim2006/qr-mesh/blob/main/src/components/ReceiveMode.tsx): `src/components/ReceiveMode.tsx`
- **QR frame detection**
- [Reassembly and inflation](https://github.com/hasim2006/qr-mesh/blob/main/src/utils/dataUtils.ts): `src/utils/dataUtils.ts`
- **DEFLATE decompression**

### Other components

- **User**

## Connections

- User → Mode and theme UI: selects mode
- Mode and theme UI → File selection and QR loop: renders transmit
- Mode and theme UI → Scanning and chunk collection: renders scan
- User → File selection and QR loop: selects file
- File selection and QR loop → Media preparation and chunking: prepares and chunks
- Media preparation and chunking → DEFLATE compression: compresses bytes
- DEFLATE compression → Media preparation and chunking: returns compressed data
- File selection and QR loop → QR generation: encodes chunk
- QR generation → File selection and QR loop: returns QR image
- File selection and QR loop → Sender screen: renders QR frames
- Sender screen → Optical light link: emits light
- Optical light link → Receiver camera: carries QR image
- Receiver camera → Browser camera API: provides video
- Browser camera API → Scanning and chunk collection: supplies frames
- Scanning and chunk collection → QR frame detection: decodes frames
- QR frame detection → Scanning and chunk collection: returns QR payload
- Scanning and chunk collection → Reassembly and inflation: reassembles chunks
- Reassembly and inflation → DEFLATE decompression: inflates bytes
- DEFLATE decompression → Reassembly and inflation: returns media bytes
- Scanning and chunk collection → User: previews or downloads