# keysarenull/family-feud-- architecture

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

- Interactive diagram: https://gitdiagram.com/keysarenull/family-feud--
- Repository: https://github.com/keysarenull/family-feud--

## Overview

This is a browser-based Family Feud game: a host configures a question, teams, and ranked answers, then runs a round by revealing answers and recording team scores and strikes. Saved presets can be loaded, saved, or deleted using browser storage, with optional shared Supabase storage when configured. The main component owns setup and game state, while gameLogic.js supplies answer sorting and winner calculation. Sampled excerpts omit some handlers and storage code, so the graph shows only their documented or visible relationships.

Main entry points: [`src/family-feud.jsx`](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx) (Family Feud), [`src/App.jsx`](https://github.com/keysarenull/family-feud--/blob/main/src/App.jsx) (App wrapper), [`src/supabase.js`](https://github.com/keysarenull/family-feud--/blob/main/src/supabase.js) (Supabase client), [`src/main.jsx`](https://github.com/keysarenull/family-feud--/blob/main/src/main.jsx) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_bootstrap["React bootstrap<br/>[main.jsx]"]
  node_app["App wrapper<br/>[App.jsx]"]
end

subgraph group_presets["Preset storage"]
  node_presets_ui["Preset controls<br/>[family-feud.jsx]"]
  node_local["Browser presets<br/>[family-feud.jsx]"]
  node_supabase_client["Supabase client<br/>[supabase.js]"]
end

subgraph group_round["Round play"]
  node_game["Family Feud<br/>[family-feud.jsx]"]
  node_setup["Game setup<br/>[family-feud.jsx]"]
  node_board["Answer board<br/>[family-feud.jsx]"]
  node_teams["Team panels<br/>[family-feud.jsx]"]
end

subgraph group_support["Game support"]
  node_matching["Answer matching<br/>[family-feud.jsx]"]
  node_scoring["Score calculations<br/>[gameLogic.js]"]
  node_sound["Sound playback<br/>[family-feud.jsx]"]
  node_sound_files["Sound assets"]
end

node_host(("Host"))
node_hosted_presets[("Hosted presets")]

node_bootstrap -->|"renders"| node_app
node_app -->|"renders"| node_game
node_host -->|"configures and plays"| node_game
node_game -->|"renders"| node_setup
node_game -->|"renders"| node_presets_ui
node_presets_ui -->|"updates game state"| node_game
node_game -->|"reads and writes"| node_local
node_game -.->|"preset CRUD"| node_supabase_client
node_supabase_client -.->|"queries"| node_hosted_presets
node_game -->|"renders and updates"| node_board
node_game -->|"renders and updates"| node_teams
node_game -->|"checks answers"| node_matching
node_game -->|"sorts and selects winner"| node_scoring
node_game -->|"plays effects"| node_sound
node_sound -->|"loads"| node_sound_files

click node_bootstrap "https://github.com/keysarenull/family-feud--/blob/main/src/main.jsx"
click node_app "https://github.com/keysarenull/family-feud--/blob/main/src/App.jsx"
click node_game "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_setup "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_presets_ui "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_local "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_supabase_client "https://github.com/keysarenull/family-feud--/blob/main/src/supabase.js"
click node_board "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_teams "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_matching "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_scoring "https://github.com/keysarenull/family-feud--/blob/main/src/gameLogic.js"
click node_sound "https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx"
click node_sound_files "https://github.com/keysarenull/family-feud--/tree/main/public/sounds"

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_bootstrap,node_app toneBlue
class node_presets_ui,node_local,node_supabase_client,node_hosted_presets toneAmber
class node_game,node_setup,node_board,node_teams toneMint
class node_matching,node_scoring,node_sound,node_sound_files toneRose
class node_host toneIndigo
```

## Components

### App entry

- [React bootstrap](https://github.com/keysarenull/family-feud--/blob/main/src/main.jsx): `src/main.jsx`
- [App wrapper](https://github.com/keysarenull/family-feud--/blob/main/src/App.jsx): `src/App.jsx`

### Preset storage

- [Preset controls](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`
- [Browser presets](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`
- [Supabase client](https://github.com/keysarenull/family-feud--/blob/main/src/supabase.js): `src/supabase.js`

### Round play

- [Family Feud](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`
- [Game setup](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`
- [Answer board](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`
- [Team panels](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`

### Game support

- [Answer matching](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`
- [Score calculations](https://github.com/keysarenull/family-feud--/blob/main/src/gameLogic.js): `src/gameLogic.js`
- [Sound playback](https://github.com/keysarenull/family-feud--/blob/main/src/family-feud.jsx): `src/family-feud.jsx`
- [Sound assets](https://github.com/keysarenull/family-feud--/tree/main/public/sounds): `public/sounds`

### Other components

- **Host**
- **Hosted presets**

## Connections

- React bootstrap → App wrapper: renders
- App wrapper → Family Feud: renders
- Host → Family Feud: configures and plays
- Family Feud → Game setup: renders
- Family Feud → Preset controls: renders
- Preset controls → Family Feud: updates game state
- Family Feud → Browser presets: reads and writes
- Family Feud → Supabase client: preset CRUD
- Supabase client → Hosted presets: queries
- Family Feud → Answer board: renders and updates
- Family Feud → Team panels: renders and updates
- Family Feud → Answer matching: checks answers
- Family Feud → Score calculations: sorts and selects winner
- Family Feud → Sound playback: plays effects
- Sound playback → Sound assets: loads