# rahhhbert/spotify-playlist-editor architecture

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

- Interactive diagram: https://gitdiagram.com/rahhhbert/spotify-playlist-editor
- Repository: https://github.com/rahhhbert/spotify-playlist-editor

## Overview

Spotify Playlist Editor is a browser-based tool for choosing tracks in one of the user’s playlists and adding selected tracks to another. The documented workflow is login, choose a source, select tracks, choose a target, and confirm. The shown frontend calls FastAPI endpoints, which use Spotipy for playlist access and modification; OAuth is configured in the same backend. The tree includes an alternate track-selection script whose endpoint is not implemented in the shown backend, so that branch is shown without an asserted connection.

Main entry points: [`main.py`](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py) (App and routes), [`templates/index.html`](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/templates/index.html) (Playlist editor page), [`static/getPlaylists.js`](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/getPlaylists.js) (Source playlists), [`static/listTargetPlaylists.js`](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/listTargetPlaylists.js) (Target playlists)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser interface"]
  node_page["Playlist editor page<br/>[index.html]"]
  node_playlist_picker["Source playlists<br/>[getPlaylists.js]"]
  node_target_picker["Target playlists"]
  node_source_tracks["Track selection"]
  node_target_selection["Target selection"]
  node_transfer["Transfer confirmation<br/>[transferSongs.js]"]
  node_alternate_tracks["Alternate track view"]
end

subgraph group_backend["FastAPI backend"]
  node_web_app["App and routes<br/>[main.py]"]
  node_playlist_listing["Playlist listing<br/>[main.py]"]
  node_source_listing["Source track listing<br/>[main.py]"]
  node_track_transfer["Add selected tracks<br/>[main.py]"]
end

subgraph group_spotify["Spotify integration"]
  node_oauth["Spotify OAuth<br/>[main.py]"]
end

node_user(("User"))
node_spotify_service["Spotify API"]

node_user -->|"uses"| node_page
node_web_app -->|"renders"| node_page
node_user -->|"logs in"| node_web_app
node_web_app -->|"configures"| node_oauth
node_oauth -->|"authorizes"| node_spotify_service
node_playlist_picker -->|"requests playlists"| node_playlist_listing
node_target_picker -->|"requests playlists"| node_playlist_listing
node_playlist_listing -->|"lists playlists"| node_spotify_service
node_source_tracks -->|"requests tracks"| node_source_listing
node_source_listing -->|"reads tracks"| node_spotify_service
node_transfer -->|"submits selections"| node_track_transfer
node_track_transfer -->|"adds tracks"| node_spotify_service
node_alternate_tracks -.->|"requests tracks"| node_source_listing

click node_page "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/templates/index.html"
click node_playlist_picker "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/getPlaylists.js"
click node_target_picker "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/listTargetPlaylists.js"
click node_source_tracks "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/getSourcePlaylist.js"
click node_target_selection "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/getTargetPlaylist.js"
click node_transfer "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/transferSongs.js"
click node_alternate_tracks "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/sourcePlaylistTracks.js"
click node_web_app "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py"
click node_oauth "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py"
click node_playlist_listing "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py"
click node_source_listing "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py"
click node_track_transfer "https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py"

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_page,node_playlist_picker,node_target_picker,node_source_tracks,node_target_selection,node_transfer,node_alternate_tracks,node_user toneBlue
class node_web_app,node_playlist_listing,node_source_listing,node_track_transfer toneAmber
class node_oauth,node_spotify_service toneMint
```

## Components

### Browser interface

- [Playlist editor page](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/templates/index.html): `templates/index.html`
- [Source playlists](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/getPlaylists.js): `static/getPlaylists.js`
- [Target playlists](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/listTargetPlaylists.js): `static/listTargetPlaylists.js`
- [Track selection](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/getSourcePlaylist.js): `static/getSourcePlaylist.js`
- [Target selection](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/getTargetPlaylist.js): `static/getTargetPlaylist.js`
- [Transfer confirmation](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/transferSongs.js): `static/transferSongs.js`
- [Alternate track view](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/static/sourcePlaylistTracks.js): `static/sourcePlaylistTracks.js`

### FastAPI backend

- [App and routes](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py): `main.py`
- [Playlist listing](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py): `main.py`
- [Source track listing](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py): `main.py`
- [Add selected tracks](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py): `main.py`

### Spotify integration

- [Spotify OAuth](https://github.com/rahhhbert/spotify-playlist-editor/blob/main/main.py): `main.py`

### Other components

- **User**
- **Spotify API**

## Connections

- User → Playlist editor page: uses (evidence: `README.md`)
- App and routes → Playlist editor page: renders (evidence: `main.py`)
- User → App and routes: logs in (evidence: `README.md`)
- App and routes → Spotify OAuth: configures (evidence: `main.py`)
- Spotify OAuth → Spotify API: authorizes (evidence: `main.py`)
- Source playlists → Playlist listing: requests playlists (evidence: `static/getPlaylists.js`)
- Target playlists → Playlist listing: requests playlists (evidence: `static/listTargetPlaylists.js`)
- Playlist listing → Spotify API: lists playlists (evidence: `main.py`)
- Track selection → Source track listing: requests tracks (evidence: `static/getSourcePlaylist.js`)
- Source track listing → Spotify API: reads tracks (evidence: `main.py`)
- Transfer confirmation → Add selected tracks: submits selections (evidence: `static/transferSongs.js`)
- Add selected tracks → Spotify API: adds tracks (evidence: `main.py`)
- Alternate track view → Source track listing: requests tracks