# christophemi/eatsound architecture

> Architecture diagram of the GitHub repository christophemi/eatsound, 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/christophemi/eatsound
- Repository: https://github.com/christophemi/eatsound

## Overview

EatSound is a cooking-and-music web app: users enter a dish, recipe steps and durations, choose a mood and meal-time option, then use a recipe checklist alongside mood-matched music. The sampled source shows the playlist page decoding recipe data from the URL and composing the player, track selection and wake-lock behavior. The README is only the default Next.js template and documents no further product capabilities; some page logic is excerpted, so navigation wiring is not inferred.

Main entry points: [`src/app/playlist/PlaylistContent.tsx`](https://github.com/christophemi/eatsound/blob/master/src/app/playlist/PlaylistContent.tsx) (Playlist experience), [`src/app/page.tsx`](https://github.com/christophemi/eatsound/blob/master/src/app/page.tsx) (Recipe form), [`src/components/MusicPlayer.tsx`](https://github.com/christophemi/eatsound/blob/master/src/components/MusicPlayer.tsx) (Music player), [`src/hooks/useWakeLock.ts`](https://github.com/christophemi/eatsound/blob/master/src/hooks/useWakeLock.ts) (Screen wake lock)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_recipe["Recipe setup"]
  node_home["Recipe form<br/>[page.tsx]"]
  node_recipe_types["Recipe types<br/>[types.ts]"]
end

subgraph group_playlist["Playlist experience"]
  node_playlist_route["Playlist route<br/>[page.tsx]"]
  node_playlist_content["Playlist experience"]
  node_player["Music player<br/>[MusicPlayer.tsx]"]
  node_wake_lock["Screen wake lock<br/>[useWakeLock.ts]"]
end

subgraph group_catalog["Mood and track data"]
  node_mood_data["Mood catalog<br/>[data.ts]"]
  node_track_data["Curated tracks<br/>[tracks.ts]"]
end

node_cook(("Cook"))
node_youtube["YouTube player API"]
node_browser["Browser screen API"]
node_layout["App layout<br/>[layout.tsx]"]

node_cook -->|"enters recipe"| node_home
node_home -->|"reads moods"| node_mood_data
node_home -->|"uses recipe types"| node_recipe_types
node_playlist_route -->|"renders"| node_playlist_content
node_playlist_content -->|"looks up mood"| node_mood_data
node_playlist_content -->|"gets mood tracks"| node_track_data
node_playlist_content -->|"renders player"| node_player
node_playlist_content -->|"requests wake lock"| node_wake_lock
node_playlist_content -->|"uses recipe types"| node_recipe_types
node_player -->|"controls playback"| node_youtube
node_wake_lock -->|"requests screen lock"| node_browser
node_layout -->|"serves app shell"| node_cook

click node_home "https://github.com/christophemi/eatsound/blob/master/src/app/page.tsx"
click node_recipe_types "https://github.com/christophemi/eatsound/blob/master/src/lib/types.ts"
click node_playlist_route "https://github.com/christophemi/eatsound/blob/master/src/app/playlist/page.tsx"
click node_playlist_content "https://github.com/christophemi/eatsound/blob/master/src/app/playlist/PlaylistContent.tsx"
click node_player "https://github.com/christophemi/eatsound/blob/master/src/components/MusicPlayer.tsx"
click node_wake_lock "https://github.com/christophemi/eatsound/blob/master/src/hooks/useWakeLock.ts"
click node_mood_data "https://github.com/christophemi/eatsound/blob/master/src/lib/data.ts"
click node_track_data "https://github.com/christophemi/eatsound/blob/master/src/lib/tracks.ts"
click node_layout "https://github.com/christophemi/eatsound/blob/master/src/app/layout.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,node_recipe_types,node_browser toneBlue
class node_playlist_route,node_playlist_content,node_player,node_wake_lock toneAmber
class node_mood_data,node_track_data,node_youtube toneMint
class node_cook toneIndigo
class node_layout toneTeal
```

## Components

### Recipe setup

- [Recipe form](https://github.com/christophemi/eatsound/blob/master/src/app/page.tsx): `src/app/page.tsx`
- [Recipe types](https://github.com/christophemi/eatsound/blob/master/src/lib/types.ts): `src/lib/types.ts`

### Playlist experience

- [Playlist route](https://github.com/christophemi/eatsound/blob/master/src/app/playlist/page.tsx): `src/app/playlist/page.tsx`
- [Playlist experience](https://github.com/christophemi/eatsound/blob/master/src/app/playlist/PlaylistContent.tsx): `src/app/playlist/PlaylistContent.tsx`
- [Music player](https://github.com/christophemi/eatsound/blob/master/src/components/MusicPlayer.tsx): `src/components/MusicPlayer.tsx`
- [Screen wake lock](https://github.com/christophemi/eatsound/blob/master/src/hooks/useWakeLock.ts): `src/hooks/useWakeLock.ts`

### Mood and track data

- [Mood catalog](https://github.com/christophemi/eatsound/blob/master/src/lib/data.ts): `src/lib/data.ts`
- [Curated tracks](https://github.com/christophemi/eatsound/blob/master/src/lib/tracks.ts): `src/lib/tracks.ts`

### Other components

- **Cook**
- **YouTube player API**
- **Browser screen API**
- [App layout](https://github.com/christophemi/eatsound/blob/master/src/app/layout.tsx): `src/app/layout.tsx`

## Connections

- Cook → Recipe form: enters recipe
- Recipe form → Mood catalog: reads moods
- Recipe form → Recipe types: uses recipe types
- Playlist route → Playlist experience: renders
- Playlist experience → Mood catalog: looks up mood
- Playlist experience → Curated tracks: gets mood tracks
- Playlist experience → Music player: renders player
- Playlist experience → Screen wake lock: requests wake lock
- Playlist experience → Recipe types: uses recipe types
- Music player → YouTube player API: controls playback
- Screen wake lock → Browser screen API: requests screen lock
- App layout → Cook: serves app shell