# evengene/lp-setlist-comparison architecture

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

- Interactive diagram: https://gitdiagram.com/evengene/lp-setlist-comparison
- Repository: https://github.com/evengene/lp-setlist-comparison

## Overview

This is a fan-facing interactive retrospective for Linkin Park’s From Zero World Tour. Fans browse tour and song views, inspect setlist patterns and statistics, compare shows, or find a show recap. The primary data path combines bundled per-leg setlists with tour metadata, then derives song statistics and heatmap data for the interface. The README describes all major product views; only some page internals were sampled, so their deeper data wiring is left unspecified. The documented app uses bundled data; the separate Setlist.fm API code is shown as an optional integration.

Main entry points: [`src/App.tsx`](https://github.com/evengene/lp-setlist-comparison/blob/main/src/App.tsx) (App Router), [`src/pages/LPSongs.tsx`](https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/LPSongs.tsx) (Songbook), [`src/components/HomeHeatmap.tsx`](https://github.com/evengene/lp-setlist-comparison/blob/main/src/components/HomeHeatmap.tsx) (Song Leg Heatmap), [`src/services/tourDataService.ts`](https://github.com/evengene/lp-setlist-comparison/blob/main/src/services/tourDataService.ts) (Tour Data Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and Navigation"]
  node_entry["Browser Entry<br/>[main.tsx]"]
  node_app_root["App Router<br/>[App.tsx]"]
  node_home["Tour Overview<br/>[HomePage.tsx]"]
  node_find_show["Find Your Show<br/>[FindYourShow.tsx]"]
  node_comparison["Show Comparison<br/>[ComparisonPage.tsx]"]
  node_stats_page["Tour Statistics<br/>[StatsPage.tsx]"]
  node_about["About<br/>[AboutPage.tsx]"]
end

subgraph group_tour["Tour Data and Analysis"]
  node_tour_data["Tour Data Service<br/>[tourDataService.ts]"]
  node_tour_files["Leg Setlists"]
  node_tour_metadata["Tour Metadata<br/>[tourMetadata.json]"]
  node_heatmap["Song Leg Heatmap<br/>[HomeHeatmap.tsx]"]
  node_heatmap_calc["Heatmap Builder<br/>[heatmap.ts]"]
  node_stats_calc["Setlist Statistics<br/>[setlistStats.ts]"]
end

subgraph group_songs["Songbook"]
  node_song_page["Songbook<br/>[LPSongs.tsx]"]
  node_song_hook["Song Catalog Hook<br/>[useLPSongData.ts]"]
  node_song_db["Song Database"]
  node_song_detail["Song Deep Dive<br/>[SongDetail.tsx]"]
end

subgraph group_integrations["External Integrations"]
  node_setlist_service["Setlist.fm Service<br/>[setlistService.ts]"]
  node_api_proxy["Setlist.fm Proxy<br/>[setlistfm.ts]"]
end

node_fan(("Fan"))
node_setlistfm(("Setlist.fm"))

node_fan -->|"opens app"| node_entry
node_entry -->|"renders"| node_app_root
node_app_root -->|"routes"| node_home
node_app_root -->|"routes"| node_find_show
node_app_root -->|"routes"| node_comparison
node_app_root -->|"routes"| node_stats_page
node_app_root -->|"routes"| node_song_page
node_app_root -->|"routes"| node_about
node_tour_data -->|"loads and combines"| node_tour_files
node_tour_data -->|"reads"| node_tour_metadata
node_heatmap -->|"loads tour data"| node_tour_data
node_heatmap -->|"builds heatmap"| node_heatmap_calc
node_heatmap -->|"calculates song stats"| node_stats_calc
node_heatmap -->|"opens song details"| node_song_detail
node_song_page -->|"loads catalog"| node_song_hook
node_song_hook -->|"reads"| node_song_db
node_song_page -->|"loads tour data"| node_tour_data
node_song_page -->|"calculates song stats"| node_stats_calc
node_song_page -->|"opens song details"| node_song_detail
node_stats_calc -->|"looks up album data"| node_song_db
node_setlist_service -.->|"fetches setlists"| node_setlistfm
node_api_proxy -.->|"proxies requests"| node_setlistfm

click node_entry "https://github.com/evengene/lp-setlist-comparison/blob/main/src/main.tsx"
click node_app_root "https://github.com/evengene/lp-setlist-comparison/blob/main/src/App.tsx"
click node_home "https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/HomePage.tsx"
click node_find_show "https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/FindYourShow.tsx"
click node_comparison "https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/ComparisonPage.tsx"
click node_stats_page "https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/StatsPage.tsx"
click node_about "https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/AboutPage.tsx"
click node_tour_data "https://github.com/evengene/lp-setlist-comparison/blob/main/src/services/tourDataService.ts"
click node_tour_files "https://github.com/evengene/lp-setlist-comparison/tree/main/src/data/tours"
click node_tour_metadata "https://github.com/evengene/lp-setlist-comparison/blob/main/src/data/tourMetadata.json"
click node_heatmap "https://github.com/evengene/lp-setlist-comparison/blob/main/src/components/HomeHeatmap.tsx"
click node_heatmap_calc "https://github.com/evengene/lp-setlist-comparison/blob/main/src/utils/heatmap.ts"
click node_stats_calc "https://github.com/evengene/lp-setlist-comparison/blob/main/src/utils/setlistStats.ts"
click node_song_page "https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/LPSongs.tsx"
click node_song_hook "https://github.com/evengene/lp-setlist-comparison/blob/main/src/hooks/useLPSongData.ts"
click node_song_db "https://github.com/evengene/lp-setlist-comparison/blob/main/src/data/lpSongDatabase.json"
click node_song_detail "https://github.com/evengene/lp-setlist-comparison/blob/main/src/components/SongDetail.tsx"
click node_setlist_service "https://github.com/evengene/lp-setlist-comparison/blob/main/src/services/setlistService.ts"
click node_api_proxy "https://github.com/evengene/lp-setlist-comparison/blob/main/api/setlistfm.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_entry,node_app_root,node_home,node_find_show,node_comparison,node_stats_page,node_about toneBlue
class node_tour_data,node_tour_files,node_tour_metadata,node_heatmap,node_heatmap_calc,node_stats_calc toneAmber
class node_song_page,node_song_hook,node_song_db,node_song_detail toneMint
class node_setlist_service,node_api_proxy toneRose
class node_fan,node_setlistfm toneIndigo
```

## Components

### App and Navigation

- [Browser Entry](https://github.com/evengene/lp-setlist-comparison/blob/main/src/main.tsx): `src/main.tsx`
- [App Router](https://github.com/evengene/lp-setlist-comparison/blob/main/src/App.tsx): `src/App.tsx`
- [Tour Overview](https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/HomePage.tsx): `src/pages/HomePage.tsx`
- [Find Your Show](https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/FindYourShow.tsx): `src/pages/FindYourShow.tsx`
- [Show Comparison](https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/ComparisonPage.tsx): `src/pages/ComparisonPage.tsx`
- [Tour Statistics](https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/StatsPage.tsx): `src/pages/StatsPage.tsx`
- [About](https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/AboutPage.tsx): `src/pages/AboutPage.tsx`

### Tour Data and Analysis

- [Tour Data Service](https://github.com/evengene/lp-setlist-comparison/blob/main/src/services/tourDataService.ts): `src/services/tourDataService.ts`
- [Leg Setlists](https://github.com/evengene/lp-setlist-comparison/tree/main/src/data/tours): `src/data/tours`
- [Tour Metadata](https://github.com/evengene/lp-setlist-comparison/blob/main/src/data/tourMetadata.json): `src/data/tourMetadata.json`
- [Song Leg Heatmap](https://github.com/evengene/lp-setlist-comparison/blob/main/src/components/HomeHeatmap.tsx): `src/components/HomeHeatmap.tsx`
- [Heatmap Builder](https://github.com/evengene/lp-setlist-comparison/blob/main/src/utils/heatmap.ts): `src/utils/heatmap.ts`
- [Setlist Statistics](https://github.com/evengene/lp-setlist-comparison/blob/main/src/utils/setlistStats.ts): `src/utils/setlistStats.ts`

### Songbook

- [Songbook](https://github.com/evengene/lp-setlist-comparison/blob/main/src/pages/LPSongs.tsx): `src/pages/LPSongs.tsx`
- [Song Catalog Hook](https://github.com/evengene/lp-setlist-comparison/blob/main/src/hooks/useLPSongData.ts): `src/hooks/useLPSongData.ts`
- [Song Database](https://github.com/evengene/lp-setlist-comparison/blob/main/src/data/lpSongDatabase.json): `src/data/lpSongDatabase.json`
- [Song Deep Dive](https://github.com/evengene/lp-setlist-comparison/blob/main/src/components/SongDetail.tsx): `src/components/SongDetail.tsx`

### External Integrations

- [Setlist.fm Service](https://github.com/evengene/lp-setlist-comparison/blob/main/src/services/setlistService.ts): `src/services/setlistService.ts`
- [Setlist.fm Proxy](https://github.com/evengene/lp-setlist-comparison/blob/main/api/setlistfm.ts): `api/setlistfm.ts`

### Other components

- **Fan**
- **Setlist.fm**

## Connections

- Fan → Browser Entry: opens app
- Browser Entry → App Router: renders
- App Router → Tour Overview: routes
- App Router → Find Your Show: routes
- App Router → Show Comparison: routes
- App Router → Tour Statistics: routes
- App Router → Songbook: routes
- App Router → About: routes
- Tour Data Service → Leg Setlists: loads and combines
- Tour Data Service → Tour Metadata: reads
- Song Leg Heatmap → Tour Data Service: loads tour data
- Song Leg Heatmap → Heatmap Builder: builds heatmap
- Song Leg Heatmap → Setlist Statistics: calculates song stats
- Song Leg Heatmap → Song Deep Dive: opens song details
- Songbook → Song Catalog Hook: loads catalog
- Song Catalog Hook → Song Database: reads
- Songbook → Tour Data Service: loads tour data
- Songbook → Setlist Statistics: calculates song stats
- Songbook → Song Deep Dive: opens song details
- Setlist Statistics → Song Database: looks up album data
- Setlist.fm Service → Setlist.fm: fetches setlists
- Setlist.fm Proxy → Setlist.fm: proxies requests