# vinayvermavlogs/vinaytypeimage architecture

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

- Interactive diagram: https://gitdiagram.com/vinayvermavlogs/vinaytypeimage
- Repository: https://github.com/vinayvermavlogs/vinaytypeimage

## Overview

AirInk is a browser-based air-writing app: a user draws in front of a camera, sees gesture-controlled ink, and can save snapshots or request handwriting recognition and speech output. The main page handles camera setup, tracking, gesture interpretation, stroke state, and the drawing interface; a separate server route proxies recognition requests to Lovable’s AI gateway. Routing and server error handling provide the application shell. The index page excerpt is partial, so its unshown recognition-request wiring is not asserted.

Main entry points: [`src/routes/index.tsx`](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/index.tsx) (Air-writing app), [`src/routeTree.gen.ts`](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routeTree.gen.ts) (Route registry), [`src/components/ui/sidebar.tsx`](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/components/ui/sidebar.tsx) (Responsive sidebar), [`src/routes/api/recognize.ts`](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/api/recognize.ts) (Recognition endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Air-writing experience"]
  node_airink["Air-writing app<br/>[index.tsx]"]
  node_mediapipe{{"MediaPipe tracking"}}
  node_camera{{"Browser camera"}}
end

subgraph group_recognition["Recognition service"]
  node_recognize_api["Recognition endpoint<br/>[recognize.ts]"]
  node_ai_gateway{{"Lovable AI gateway"}}
end

subgraph group_runtime["Routing and runtime"]
  node_router["Router setup<br/>[router.tsx]"]
  node_route_tree["Route registry<br/>[routeTree.gen.ts]"]
  node_root_route["Root application shell<br/>[__root.tsx]"]
  node_server["HTTP server entry<br/>[server.ts]"]
  node_error_capture["Error capture<br/>[error-capture.ts]"]
  node_error_page["Server error page<br/>[error-page.ts]"]
  node_reporting["Client error reporting"]
end

subgraph group_ui["Reusable UI"]
  node_ui_core["UI primitives"]
  node_sidebar["Responsive sidebar<br/>[sidebar.tsx]"]
  node_mobile_hook["Mobile breakpoint hook<br/>[use-mobile.tsx]"]
  node_ui_utils["Class utilities<br/>[utils.ts]"]
end

node_user(("Camera user"))

node_user -->|"uses"| node_airink
node_airink -->|"starts capture"| node_camera
node_airink -->|"loads tracking"| node_mediapipe
node_airink -.->|"requests recognition"| node_recognize_api
node_recognize_api -->|"sends image"| node_ai_gateway
node_router -->|"uses routes"| node_route_tree
node_route_tree -->|"registers root"| node_root_route
node_route_tree -->|"registers page"| node_airink
node_route_tree -->|"registers endpoint"| node_recognize_api
node_root_route -->|"reports errors"| node_reporting
node_server -->|"consumes errors"| node_error_capture
node_server -->|"renders fallback"| node_error_page
node_sidebar -->|"checks viewport"| node_mobile_hook
node_sidebar -->|"uses primitives"| node_ui_core
node_sidebar -->|"merges classes"| node_ui_utils
node_ui_core -.->|"merges classes"| node_ui_utils

click node_airink "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/index.tsx"
click node_recognize_api "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/api/recognize.ts"
click node_router "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/router.tsx"
click node_route_tree "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routeTree.gen.ts"
click node_root_route "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/__root.tsx"
click node_server "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/server.ts"
click node_error_capture "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/lib/error-capture.ts"
click node_error_page "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/lib/error-page.ts"
click node_reporting "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/lib/lovable-error-reporting.ts"
click node_ui_core "https://github.com/vinayvermavlogs/vinaytypeimage/tree/main/src/components/ui"
click node_sidebar "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/components/ui/sidebar.tsx"
click node_mobile_hook "https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/hooks/use-mobile.tsx"
click node_ui_utils "https://github.com/vinayvermavlogs/vinaytypeimage/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_airink,node_mediapipe,node_camera,node_user toneBlue
class node_recognize_api,node_ai_gateway toneAmber
class node_router,node_route_tree,node_root_route,node_server,node_error_capture,node_error_page,node_reporting toneMint
class node_ui_core,node_sidebar,node_mobile_hook,node_ui_utils toneRose
```

## Components

### Air-writing experience

- [Air-writing app](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- **MediaPipe tracking**
- **Browser camera**

### Recognition service

- [Recognition endpoint](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/api/recognize.ts): `src/routes/api/recognize.ts`
- **Lovable AI gateway**

### Routing and runtime

- [Router setup](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/router.tsx): `src/router.tsx`
- [Route registry](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routeTree.gen.ts): `src/routeTree.gen.ts`
- [Root application shell](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`
- [HTTP server entry](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/server.ts): `src/server.ts`
- [Error capture](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/lib/error-capture.ts): `src/lib/error-capture.ts`
- [Server error page](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/lib/error-page.ts): `src/lib/error-page.ts`
- [Client error reporting](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/lib/lovable-error-reporting.ts): `src/lib/lovable-error-reporting.ts`

### Reusable UI

- [UI primitives](https://github.com/vinayvermavlogs/vinaytypeimage/tree/main/src/components/ui): `src/components/ui`
- [Responsive sidebar](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/components/ui/sidebar.tsx): `src/components/ui/sidebar.tsx`
- [Mobile breakpoint hook](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/hooks/use-mobile.tsx): `src/hooks/use-mobile.tsx`
- [Class utilities](https://github.com/vinayvermavlogs/vinaytypeimage/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Other components

- **Camera user**

## Connections

- Camera user → Air-writing app: uses (evidence: `src/routes/index.tsx`)
- Air-writing app → Browser camera: starts capture (evidence: `src/routes/index.tsx`)
- Air-writing app → MediaPipe tracking: loads tracking (evidence: `src/routes/index.tsx`)
- Air-writing app → Recognition endpoint: requests recognition
- Recognition endpoint → Lovable AI gateway: sends image (evidence: `src/routes/api/recognize.ts`)
- Router setup → Route registry: uses routes (evidence: `src/router.tsx`)
- Route registry → Root application shell: registers root (evidence: `src/routeTree.gen.ts`)
- Route registry → Air-writing app: registers page (evidence: `src/routeTree.gen.ts`)
- Route registry → Recognition endpoint: registers endpoint (evidence: `src/routeTree.gen.ts`)
- Root application shell → Client error reporting: reports errors (evidence: `src/routes/__root.tsx`)
- HTTP server entry → Error capture: consumes errors (evidence: `src/server.ts`)
- HTTP server entry → Server error page: renders fallback (evidence: `src/server.ts`)
- Responsive sidebar → Mobile breakpoint hook: checks viewport (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → UI primitives: uses primitives (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → Class utilities: merges classes (evidence: `src/components/ui/sidebar.tsx`)
- UI primitives → Class utilities: merges classes (evidence: `src/components/ui/context-menu.tsx`)