# winac2/signmachine_web architecture

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

- Interactive diagram: https://gitdiagram.com/winac2/signmachine_web
- Repository: https://github.com/winac2/signmachine_web

## Overview

Sign Machine Community is a browser-based hand-landmark contribution platform. A contributor chooses a gesture and optional name, proceeds to webcam capture, consents, and collects MediaPipe landmarks; the browser opens a contribution session, uploads landmark batches, then marks the session complete. The FastAPI service validates and persists contributor, session, gesture, and sample records in MongoDB. The sampled files show this end-to-end path; other substantial routes and any downstream dataset review/export workflow are not evidenced here.

Main entry points: [`backend/app/main.py`](https://github.com/winac2/signmachine_web/blob/main/backend/app/main.py) (FastAPI routes), [`frontend/src/components/WebcamCapture.tsx`](https://github.com/winac2/signmachine_web/blob/main/frontend/src/components/WebcamCapture.tsx) (Webcam capture), [`frontend/src/lib/api.ts`](https://github.com/winac2/signmachine_web/blob/main/frontend/src/lib/api.ts) (API client), [`frontend/src/app/contribute/page.tsx`](https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/contribute/page.tsx) (Contribution details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Community website"]
  node_home["Community home<br/>[page.tsx]"]
  node_layout["Site shell<br/>[layout.tsx]"]
  node_details["Contribution details<br/>[page.tsx]"]
  node_capturepage["Capture page<br/>[page.tsx]"]
end

subgraph group_capture["Landmark capture"]
  node_camera["Webcam capture<br/>[WebcamCapture.tsx]"]
  node_mediapipe["Hand landmark detection<br/>[WebcamCapture.tsx]"]
  node_browsercamera["Browser camera"]
  node_api_client["API client<br/>[api.ts]"]
end

subgraph group_service["Contribution API"]
  node_api["FastAPI routes<br/>[main.py]"]
  node_request_schema["Request validation<br/>[schemas.py]"]
end

subgraph group_data["MongoDB storage"]
  node_db_init["Database initialization<br/>[database.py]"]
  node_mongo[("MongoDB collections")]
end

node_contributor(("Contributor"))

node_contributor -->|"visits"| node_home
node_home -->|"links to"| node_details
node_details -->|"loads gestures"| node_api_client
node_api_client -->|"requests gestures"| node_api
node_api -->|"queries"| node_db_init
node_db_init -->|"initializes"| node_mongo
node_details -->|"stores details; navigates"| node_capturepage
node_capturepage -->|"renders"| node_camera
node_camera -->|"detects landmarks"| node_mediapipe
node_camera -->|"opens stream"| node_browsercamera
node_camera -->|"submits session and samples"| node_api_client
node_api_client -->|"posts contributions"| node_api
node_api -->|"validates payloads"| node_request_schema
node_api -->|"reads and writes records"| node_mongo
node_db_init -->|"creates indexes and gestures"| node_mongo

click node_home "https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/page.tsx"
click node_layout "https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/layout.tsx"
click node_details "https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/contribute/page.tsx"
click node_capturepage "https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/contribute/capture/page.tsx"
click node_camera "https://github.com/winac2/signmachine_web/blob/main/frontend/src/components/WebcamCapture.tsx"
click node_mediapipe "https://github.com/winac2/signmachine_web/blob/main/frontend/src/components/WebcamCapture.tsx"
click node_api_client "https://github.com/winac2/signmachine_web/blob/main/frontend/src/lib/api.ts"
click node_api "https://github.com/winac2/signmachine_web/blob/main/backend/app/main.py"
click node_request_schema "https://github.com/winac2/signmachine_web/blob/main/backend/app/schemas.py"
click node_db_init "https://github.com/winac2/signmachine_web/blob/main/backend/app/database.py"

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_layout,node_details,node_capturepage toneBlue
class node_camera,node_mediapipe,node_browsercamera,node_api_client toneAmber
class node_api,node_request_schema toneMint
class node_db_init,node_mongo toneRose
class node_contributor toneIndigo
```

## Components

### Community website

- [Community home](https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/page.tsx): `frontend/src/app/page.tsx`
- [Site shell](https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/layout.tsx): `frontend/src/app/layout.tsx`
- [Contribution details](https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/contribute/page.tsx): `frontend/src/app/contribute/page.tsx`
- [Capture page](https://github.com/winac2/signmachine_web/blob/main/frontend/src/app/contribute/capture/page.tsx): `frontend/src/app/contribute/capture/page.tsx`

### Landmark capture

- [Webcam capture](https://github.com/winac2/signmachine_web/blob/main/frontend/src/components/WebcamCapture.tsx): `frontend/src/components/WebcamCapture.tsx`
- [Hand landmark detection](https://github.com/winac2/signmachine_web/blob/main/frontend/src/components/WebcamCapture.tsx): `frontend/src/components/WebcamCapture.tsx`
- **Browser camera**
- [API client](https://github.com/winac2/signmachine_web/blob/main/frontend/src/lib/api.ts): `frontend/src/lib/api.ts`

### Contribution API

- [FastAPI routes](https://github.com/winac2/signmachine_web/blob/main/backend/app/main.py): `backend/app/main.py`
- [Request validation](https://github.com/winac2/signmachine_web/blob/main/backend/app/schemas.py): `backend/app/schemas.py`

### MongoDB storage

- [Database initialization](https://github.com/winac2/signmachine_web/blob/main/backend/app/database.py): `backend/app/database.py`
- **MongoDB collections**

### Other components

- **Contributor**

## Connections

- Contributor → Community home: visits (evidence: `frontend/src/app/page.tsx`)
- Community home → Contribution details: links to (evidence: `frontend/src/app/page.tsx`)
- Contribution details → API client: loads gestures (evidence: `frontend/src/app/contribute/page.tsx`)
- API client → FastAPI routes: requests gestures (evidence: `frontend/src/lib/api.ts`)
- FastAPI routes → Database initialization: queries (evidence: `backend/app/main.py`)
- Database initialization → MongoDB collections: initializes (evidence: `backend/app/database.py`)
- Contribution details → Capture page: stores details; navigates (evidence: `frontend/src/app/contribute/page.tsx`)
- Capture page → Webcam capture: renders (evidence: `frontend/src/app/contribute/capture/page.tsx`)
- Webcam capture → Hand landmark detection: detects landmarks (evidence: `frontend/src/components/WebcamCapture.tsx`)
- Webcam capture → Browser camera: opens stream (evidence: `frontend/src/components/WebcamCapture.tsx`)
- Webcam capture → API client: submits session and samples (evidence: `frontend/src/components/WebcamCapture.tsx`)
- API client → FastAPI routes: posts contributions (evidence: `frontend/src/lib/api.ts`)
- FastAPI routes → Request validation: validates payloads (evidence: `backend/app/main.py`)
- FastAPI routes → MongoDB collections: reads and writes records (evidence: `backend/app/main.py`)
- Database initialization → MongoDB collections: creates indexes and gestures (evidence: `backend/app/database.py`)