# basilalfarooqui-cmyk/sih26118-h2s-reader architecture

> Architecture diagram of the GitHub repository basilalfarooqui-cmyk/sih26118-h2s-reader, 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/basilalfarooqui-cmyk/sih26118-h2s-reader
- Repository: https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader

## Overview

SIH26118 captures H2S lead-acetate wristband readings, stores them centrally, and exposes them to a web dashboard. The mobile workflow offers normal and admin modes, photographs and crops the strip, derives a representative hex color, and records it; saved readings can be retried when connectivity returns. The backend accepts app and hardware readings and persists records in Supabase. The dashboard filters and manages records and exports them. Several screen and API implementations were not sampled, so those links reflect documented capabilities and exact paths, not inspected call details; ESP32 firmware is a placeholder.

Main entry points: [`app/app/camera.tsx`](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/camera.tsx) (Camera workflow), [`backend/server.js`](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/server.js) (Express server), [`app/app/index.tsx`](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/index.tsx) (Mode selection), [`app/app/saved-records.tsx`](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/saved-records.tsx) (Saved readings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_mobile["Mobile reader"]
  node_camera["Camera workflow<br/>[camera.tsx]"]
  node_crop["Crop adjustment<br/>[CropAdjuster.tsx]"]
  node_color["Color extraction<br/>[pixelColor.ts]"]
  node_home["Mode selection<br/>[index.tsx]"]
  node_login["Admin login<br/>[login.tsx]"]
  node_record["Reading record<br/>[record.tsx]"]
  node_api["Mobile API<br/>[api.ts]"]
  node_saved["Saved readings<br/>[saved-records.tsx]"]
  node_storage[("Pending storage<br/>[storage.ts]")]
end

subgraph group_backend["Reading service"]
  node_server["Express server<br/>[server.js]"]
  node_routes["Reading routes<br/>[readings.js]"]
  node_supabase["Supabase client<br/>[supabase.js]"]
  node_db[("Readings database<br/>[setup.sql]")]
end

subgraph group_dashboard["Records dashboard"]
  node_dash["Dashboard UI<br/>[app.js]"]
  node_web["Dashboard page<br/>[index.html]"]
end

subgraph group_hardware["Hardware source"]
  node_esp["ESP32 sensor<br/>[README.md]"]
end

node_worker(("Refinery worker"))
node_admin(("Admin user"))

node_worker -->|"selects mode"| node_home
node_home -->|"opens normal mode"| node_camera
node_home -->|"opens admin mode"| node_login
node_login -->|"continues to reading"| node_camera
node_camera -->|"adjusts crop"| node_crop
node_camera -->|"extracts color"| node_color
node_camera -->|"records result"| node_record
node_record -->|"submits reading"| node_api
node_camera -->|"opens saved records"| node_saved
node_saved -->|"loads and removes"| node_storage
node_saved -->|"syncs pending"| node_api
node_api -->|"sends readings"| node_server
node_esp -.->|"sends hardware readings"| node_server
node_server -->|"dispatches requests"| node_routes
node_routes -->|"queries and writes"| node_supabase
node_supabase -->|"accesses records"| node_db
node_admin -->|"views and manages"| node_web
node_web -->|"loads interface"| node_dash
node_dash -->|"fetches and deletes"| node_server

click node_camera "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/camera.tsx"
click node_crop "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/components/CropAdjuster.tsx"
click node_color "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/utils/pixelColor.ts"
click node_home "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/index.tsx"
click node_login "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/login.tsx"
click node_record "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/record.tsx"
click node_api "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/utils/api.ts"
click node_saved "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/saved-records.tsx"
click node_storage "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/utils/storage.ts"
click node_esp "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/esp32/README.md"
click node_server "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/server.js"
click node_routes "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/routes/readings.js"
click node_supabase "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/services/supabase.js"
click node_db "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/db/setup.sql"
click node_dash "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/dashboard/app.js"
click node_web "https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/dashboard/index.html"

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_camera,node_crop,node_color,node_home,node_login,node_record,node_api,node_saved,node_storage,node_admin toneBlue
class node_server,node_routes,node_supabase,node_db toneAmber
class node_dash,node_web toneMint
class node_esp,node_worker toneRose
```

## Components

### Mobile reader

- [Camera workflow](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/camera.tsx): `app/app/camera.tsx`
- [Crop adjustment](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/components/CropAdjuster.tsx): `app/src/components/CropAdjuster.tsx`
- [Color extraction](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/utils/pixelColor.ts): `app/src/utils/pixelColor.ts`
- [Mode selection](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/index.tsx): `app/app/index.tsx`
- [Admin login](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/login.tsx): `app/app/login.tsx`
- [Reading record](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/record.tsx): `app/app/record.tsx`
- [Mobile API](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/utils/api.ts): `app/src/utils/api.ts`
- [Saved readings](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/app/saved-records.tsx): `app/app/saved-records.tsx`
- [Pending storage](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/app/src/utils/storage.ts): `app/src/utils/storage.ts`

### Reading service

- [Express server](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/server.js): `backend/server.js`
- [Reading routes](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/routes/readings.js): `backend/routes/readings.js`
- [Supabase client](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/services/supabase.js): `backend/services/supabase.js`
- [Readings database](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/backend/db/setup.sql): `backend/db/setup.sql`

### Records dashboard

- [Dashboard UI](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/dashboard/app.js): `dashboard/app.js`
- [Dashboard page](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/dashboard/index.html): `dashboard/index.html`

### Hardware source

- [ESP32 sensor](https://github.com/basilalfarooqui-cmyk/sih26118-h2s-reader/blob/main/esp32/README.md): `esp32/README.md`

### Other components

- **Refinery worker**
- **Admin user**

## Connections

- Refinery worker → Mode selection: selects mode
- Mode selection → Camera workflow: opens normal mode
- Mode selection → Admin login: opens admin mode
- Admin login → Camera workflow: continues to reading
- Camera workflow → Crop adjustment: adjusts crop
- Camera workflow → Color extraction: extracts color
- Camera workflow → Reading record: records result
- Reading record → Mobile API: submits reading
- Camera workflow → Saved readings: opens saved records
- Saved readings → Pending storage: loads and removes
- Saved readings → Mobile API: syncs pending
- Mobile API → Express server: sends readings
- ESP32 sensor → Express server: sends hardware readings
- Express server → Reading routes: dispatches requests
- Reading routes → Supabase client: queries and writes
- Supabase client → Readings database: accesses records
- Admin user → Dashboard page: views and manages
- Dashboard page → Dashboard UI: loads interface
- Dashboard UI → Express server: fetches and deletes