# abhijit2244/let-the-wheel-decide architecture

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

- Interactive diagram: https://gitdiagram.com/abhijit2244/let-the-wheel-decide
- Repository: https://github.com/abhijit2244/let-the-wheel-decide

## Overview

Let the Wheel Decide is a browser-based decision wheel. A user edits choices or selects a saved wheel, then spins the animated wheel or manually selects a segment; the app displays the result and can record it in per-wheel history. Saved wheels, active-wheel selection, and optional history persist in browser LocalStorage. The README also documents wheel search, pagination, demo/default choices, confetti, and optional sound. Those capabilities are represented at their documented app or manager components; unsampled implementation details and some prop wiring are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/App.tsx) (Decision app), [`src/hooks/useSavedWheels.ts`](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/hooks/useSavedWheels.ts) (Saved-wheel state), [`src/components/saved-wheels/WheelManager.tsx`](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/saved-wheels/WheelManager.tsx) (Wheel manager), [`src/hooks/useSpinHistory.ts`](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/hooks/useSpinHistory.ts) (History state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_decision["Decision experience"]
  node_app["Decision app<br/>[App.tsx]"]
  node_wheel["Interactive wheel<br/>[Wheel.tsx]"]
  node_segment["Wheel segment<br/>[WheelSegment.tsx]"]
  node_confetti["Confetti effect"]
end

subgraph group_saved["Saved wheels"]
  node_manager["Wheel manager<br/>[WheelManager.tsx]"]
  node_saved_hook["Saved-wheel state<br/>[useSavedWheels.ts]"]
end

subgraph group_history["Spin history"]
  node_history_view["History view<br/>[SpinHistory.tsx]"]
  node_history_hook["History state<br/>[useSpinHistory.ts]"]
end

subgraph group_persistence["Local persistence"]
  node_storage[("Browser LocalStorage")]
end

subgraph group_domain["Domain types"]
  node_wheel_types["Wheel data types<br/>[wheel.ts]"]
  node_history_types["History data types<br/>[history.ts]"]
end

node_user(("Decision maker"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_wheel
node_wheel -->|"renders"| node_segment
node_app -->|"renders"| node_manager
node_app -->|"uses"| node_saved_hook
node_manager -.->|"manages"| node_saved_hook
node_app -->|"renders"| node_history_view
node_app -->|"uses"| node_history_hook
node_app -->|"triggers"| node_confetti
node_saved_hook -->|"reads/writes"| node_storage
node_history_hook -->|"reads/writes"| node_storage
node_saved_hook -->|"uses"| node_wheel_types
node_manager -->|"uses"| node_wheel_types
node_history_hook -->|"uses"| node_history_types
node_history_view -->|"uses"| node_history_types

click node_app "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/App.tsx"
click node_wheel "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/wheel/Wheel.tsx"
click node_segment "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/wheel/WheelSegment.tsx"
click node_manager "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/saved-wheels/WheelManager.tsx"
click node_saved_hook "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/hooks/useSavedWheels.ts"
click node_history_view "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/history/SpinHistory.tsx"
click node_history_hook "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/hooks/useSpinHistory.ts"
click node_wheel_types "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/types/wheel.ts"
click node_history_types "https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/types/history.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_wheel,node_segment,node_confetti toneBlue
class node_manager,node_saved_hook toneAmber
class node_history_view,node_history_hook toneMint
class node_storage toneRose
class node_wheel_types,node_history_types,node_user toneIndigo
```

## Components

### Decision experience

- [Decision app](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/App.tsx): `src/App.tsx`
- [Interactive wheel](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/wheel/Wheel.tsx): `src/components/wheel/Wheel.tsx`
- [Wheel segment](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/wheel/WheelSegment.tsx): `src/components/wheel/WheelSegment.tsx`
- **Confetti effect**

### Saved wheels

- [Wheel manager](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/saved-wheels/WheelManager.tsx): `src/components/saved-wheels/WheelManager.tsx`
- [Saved-wheel state](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/hooks/useSavedWheels.ts): `src/hooks/useSavedWheels.ts`

### Spin history

- [History view](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/history/SpinHistory.tsx): `src/components/history/SpinHistory.tsx`
- [History state](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/hooks/useSpinHistory.ts): `src/hooks/useSpinHistory.ts`

### Local persistence

- **Browser LocalStorage**

### Domain types

- [Wheel data types](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/types/wheel.ts): `src/components/types/wheel.ts`
- [History data types](https://github.com/abhijit2244/let-the-wheel-decide/blob/main/src/components/types/history.ts): `src/components/types/history.ts`

### Other components

- **Decision maker**

## Connections

- Decision maker → Decision app: uses (evidence: `README.md`)
- Decision app → Interactive wheel: renders (evidence: `src/App.tsx`)
- Interactive wheel → Wheel segment: renders (evidence: `src/components/wheel/Wheel.tsx`)
- Decision app → Wheel manager: renders (evidence: `src/App.tsx`)
- Decision app → Saved-wheel state: uses (evidence: `src/App.tsx`)
- Wheel manager → Saved-wheel state: manages
- Decision app → History view: renders (evidence: `src/App.tsx`)
- Decision app → History state: uses (evidence: `src/App.tsx`)
- Decision app → Confetti effect: triggers (evidence: `src/App.tsx`)
- Saved-wheel state → Browser LocalStorage: reads/writes (evidence: `src/hooks/useSavedWheels.ts`)
- History state → Browser LocalStorage: reads/writes (evidence: `src/hooks/useSpinHistory.ts`)
- Saved-wheel state → Wheel data types: uses (evidence: `src/hooks/useSavedWheels.ts`)
- Wheel manager → Wheel data types: uses (evidence: `src/components/saved-wheels/WheelManager.tsx`)
- History state → History data types: uses (evidence: `src/hooks/useSpinHistory.ts`)
- History view → History data types: uses (evidence: `src/components/history/SpinHistory.tsx`)