# kevkim11/spotify-wall architecture

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

- Interactive diagram: https://gitdiagram.com/kevkim11/spotify-wall
- Repository: https://github.com/kevkim11/spotify-wall

## Overview

spotify-wall is a React app that obtains an access token, lets the user choose among recently played tracks, top tracks, and top artists, fetches the selected Spotify data, and displays it as a list or visual wall. The supplied source shows the token service and Spotify API calls; README confirms the three capabilities. Wiring for the unsampled public entry markup and deployment is omitted.

Main entry points: [`src/App.js`](https://github.com/kevkim11/spotify-wall/blob/master/src/App.js) (App), [`src/spotify-filter/RecentlyPlayed.js`](https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/RecentlyPlayed.js) (Recently played), [`src/spotify-filter/TopTracks.js`](https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/TopTracks.js) (Top tracks), [`src/spotify-filter/TopArtists.js`](https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/TopArtists.js) (Top artists)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App orchestration"]
  node_entry["React entry<br/>[index.js]"]
  node_appcomponent["App<br/>[App.js]"]
end

subgraph group_spotify["Spotify data"]
  node_token_service["Token service"]
  node_recent["Recently played<br/>[RecentlyPlayed.js]"]
  node_tracks["Top tracks<br/>[TopTracks.js]"]
  node_artists["Top artists<br/>[TopArtists.js]"]
end

subgraph group_view["Wall presentation"]
  node_nav["Filter navigation<br/>[Nav.js]"]
  node_table["Wall layout<br/>[Table.js]"]
  node_list["Track list<br/>[List.js]"]
  node_square["Track tile<br/>[Square.js]"]
  node_circle["Artist tile<br/>[Circle.js]"]
end

node_user(("Viewer"))
node_spotify_api["Spotify API"]

node_user -->|"chooses filter"| node_nav
node_entry -->|"renders"| node_appcomponent
node_appcomponent -->|"requests token"| node_token_service
node_token_service -->|"returns token"| node_appcomponent
node_appcomponent -->|"renders"| node_nav
node_nav -->|"changes filter"| node_appcomponent
node_appcomponent -->|"selects filter"| node_recent
node_appcomponent -->|"selects filter"| node_tracks
node_appcomponent -->|"selects filter"| node_artists
node_recent -->|"requests recent tracks"| node_spotify_api
node_spotify_api -->|"returns tracks"| node_recent
node_tracks -->|"requests top tracks"| node_spotify_api
node_spotify_api -->|"returns tracks"| node_tracks
node_artists -->|"requests top artists"| node_spotify_api
node_spotify_api -->|"returns artists"| node_artists
node_recent -->|"passes tracks"| node_list
node_tracks -->|"passes tracks"| node_table
node_artists -->|"passes artists"| node_table
node_table -->|"renders tracks"| node_square
node_table -->|"renders artists"| node_circle

click node_entry "https://github.com/kevkim11/spotify-wall/blob/master/src/index.js"
click node_appcomponent "https://github.com/kevkim11/spotify-wall/blob/master/src/App.js"
click node_nav "https://github.com/kevkim11/spotify-wall/blob/master/src/components/Nav.js"
click node_recent "https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/RecentlyPlayed.js"
click node_tracks "https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/TopTracks.js"
click node_artists "https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/TopArtists.js"
click node_table "https://github.com/kevkim11/spotify-wall/blob/master/src/components/Table.js"
click node_list "https://github.com/kevkim11/spotify-wall/blob/master/src/components/List.js"
click node_square "https://github.com/kevkim11/spotify-wall/blob/master/src/components/Square.js"
click node_circle "https://github.com/kevkim11/spotify-wall/blob/master/src/components/Circle.js"

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_appcomponent,node_user toneBlue
class node_token_service,node_recent,node_tracks,node_artists toneAmber
class node_nav,node_table,node_list,node_square,node_circle,node_spotify_api toneMint
```

## Components

### App orchestration

- [React entry](https://github.com/kevkim11/spotify-wall/blob/master/src/index.js): `src/index.js`
- [App](https://github.com/kevkim11/spotify-wall/blob/master/src/App.js): `src/App.js`

### Spotify data

- **Token service**
- [Recently played](https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/RecentlyPlayed.js): `src/spotify-filter/RecentlyPlayed.js`
- [Top tracks](https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/TopTracks.js): `src/spotify-filter/TopTracks.js`
- [Top artists](https://github.com/kevkim11/spotify-wall/blob/master/src/spotify-filter/TopArtists.js): `src/spotify-filter/TopArtists.js`

### Wall presentation

- [Filter navigation](https://github.com/kevkim11/spotify-wall/blob/master/src/components/Nav.js): `src/components/Nav.js`
- [Wall layout](https://github.com/kevkim11/spotify-wall/blob/master/src/components/Table.js): `src/components/Table.js`
- [Track list](https://github.com/kevkim11/spotify-wall/blob/master/src/components/List.js): `src/components/List.js`
- [Track tile](https://github.com/kevkim11/spotify-wall/blob/master/src/components/Square.js): `src/components/Square.js`
- [Artist tile](https://github.com/kevkim11/spotify-wall/blob/master/src/components/Circle.js): `src/components/Circle.js`

### Other components

- **Viewer**
- **Spotify API**

## Connections

- Viewer → Filter navigation: chooses filter
- React entry → App: renders
- App → Token service: requests token
- Token service → App: returns token
- App → Filter navigation: renders
- Filter navigation → App: changes filter
- App → Recently played: selects filter
- App → Top tracks: selects filter
- App → Top artists: selects filter
- Recently played → Spotify API: requests recent tracks
- Spotify API → Recently played: returns tracks
- Top tracks → Spotify API: requests top tracks
- Spotify API → Top tracks: returns tracks
- Top artists → Spotify API: requests top artists
- Spotify API → Top artists: returns artists
- Recently played → Track list: passes tracks
- Top tracks → Wall layout: passes tracks
- Top artists → Wall layout: passes artists
- Wall layout → Track tile: renders tracks
- Wall layout → Artist tile: renders artists