# bhuvanalakshmi27/nutri-catch-hands architecture

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

- Interactive diagram: https://gitdiagram.com/bhuvanalakshmi27/nutri-catch-hands
- Repository: https://github.com/bhuvanalakshmi27/nutri-catch-hands

## Overview

NutriCatch is a browser-based, hand-gesture-controlled healthy-food catching game. The main path is the home route into the game, where camera tracking or keyboard fallback controls the basket while the game loop handles falling items, collisions, scoring, and difficulty; the interface presents status and results. README capabilities include camera preview, fist-to-freeze control, audio, and locally saved high scores. Tracking and game-loop details are supported by sampled source; other mechanics are represented at the game component boundary where implementation excerpts were incomplete.

Main entry points: [`src/components/nutricatch/NutriCatchGame.tsx`](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/NutriCatchGame.tsx) (Game experience), [`src/lib/nutricatch/handTracking.ts`](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/handTracking.ts) (Hand tracking), [`src/routes/index.tsx`](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/routes/index.tsx) (Home route), [`src/components/nutricatch/CameraPreview.tsx`](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/CameraPreview.tsx) (Camera preview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Game entry"]
  node_home["Home route<br/>[index.tsx]"]
end

subgraph group_input["Controls and tracking"]
  node_tracking["Hand tracking<br/>[handTracking.ts]"]
  node_preview["Camera preview<br/>[CameraPreview.tsx]"]
end

subgraph group_play["Gameplay"]
  node_game["Game experience<br/>[NutriCatchGame.tsx]"]
  node_items["Food item definitions<br/>[items.ts]"]
  node_difficulty["Difficulty modes<br/>[items.ts]"]
  node_sprites["Sprite renderer<br/>[sprites.ts]"]
end

subgraph group_presentation["Feedback and persistence"]
  node_audio["Sound effects<br/>[audio.ts]"]
  node_hud["Score and status HUD<br/>[NutriCatchGame.tsx]"]
  node_scores["High score storage<br/>[NutriCatchGame.tsx]"]
end

node_player(("Player"))
node_camera(("Camera device"))
node_vision["MediaPipe vision"]
node_keyboard(("Keyboard controls"))
node_localstorage[("Browser localStorage")]

node_player -->|"opens"| node_home
node_home -->|"renders"| node_game
node_game -->|"enables tracking"| node_tracking
node_tracking -->|"requests video"| node_camera
node_tracking -->|"loads model"| node_vision
node_tracking -->|"provides hand frame"| node_game
node_player -->|"presses keys"| node_keyboard
node_keyboard -->|"moves basket"| node_game
node_game -->|"passes video and frame refs"| node_preview
node_game -->|"reads definitions"| node_items
node_game -->|"reads settings"| node_difficulty
node_game -->|"draws items"| node_sprites
node_game -->|"plays sounds"| node_audio
node_game -->|"updates display"| node_hud
node_game -->|"loads and saves"| node_scores
node_scores -->|"reads and writes"| node_localstorage

click node_home "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/routes/index.tsx"
click node_game "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/NutriCatchGame.tsx"
click node_tracking "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/handTracking.ts"
click node_preview "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/CameraPreview.tsx"
click node_items "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/items.ts"
click node_difficulty "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/items.ts"
click node_sprites "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/sprites.ts"
click node_audio "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/audio.ts"
click node_hud "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/NutriCatchGame.tsx"
click node_scores "https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/NutriCatchGame.tsx"

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 toneBlue
class node_tracking,node_preview,node_localstorage toneAmber
class node_game,node_items,node_difficulty,node_sprites,node_vision toneMint
class node_audio,node_hud,node_scores toneRose
class node_player,node_camera,node_keyboard toneIndigo
```

## Components

### Game entry

- [Home route](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/routes/index.tsx): `src/routes/index.tsx`

### Controls and tracking

- [Hand tracking](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/handTracking.ts): `src/lib/nutricatch/handTracking.ts`
- [Camera preview](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/CameraPreview.tsx): `src/components/nutricatch/CameraPreview.tsx`

### Gameplay

- [Game experience](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/NutriCatchGame.tsx): `src/components/nutricatch/NutriCatchGame.tsx`
- [Food item definitions](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/items.ts): `src/lib/nutricatch/items.ts`
- [Difficulty modes](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/items.ts): `src/lib/nutricatch/items.ts`
- [Sprite renderer](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/sprites.ts): `src/lib/nutricatch/sprites.ts`

### Feedback and persistence

- [Sound effects](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/lib/nutricatch/audio.ts): `src/lib/nutricatch/audio.ts`
- [Score and status HUD](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/NutriCatchGame.tsx): `src/components/nutricatch/NutriCatchGame.tsx`
- [High score storage](https://github.com/bhuvanalakshmi27/nutri-catch-hands/blob/main/src/components/nutricatch/NutriCatchGame.tsx): `src/components/nutricatch/NutriCatchGame.tsx`

### Other components

- **Player**
- **Camera device**
- **MediaPipe vision**
- **Keyboard controls**
- **Browser localStorage**

## Connections

- Player → Home route: opens
- Home route → Game experience: renders
- Game experience → Hand tracking: enables tracking
- Hand tracking → Camera device: requests video
- Hand tracking → MediaPipe vision: loads model
- Hand tracking → Game experience: provides hand frame
- Player → Keyboard controls: presses keys
- Keyboard controls → Game experience: moves basket
- Game experience → Camera preview: passes video and frame refs
- Game experience → Food item definitions: reads definitions
- Game experience → Difficulty modes: reads settings
- Game experience → Sprite renderer: draws items
- Game experience → Sound effects: plays sounds
- Game experience → Score and status HUD: updates display
- Game experience → High score storage: loads and saves
- High score storage → Browser localStorage: reads and writes