# lenmorld/song-hub architecture

> Architecture diagram of the GitHub repository lenmorld/song-hub, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lenmorld/song-hub
- Repository: https://github.com/lenmorld/song-hub

## Overview

Song-hub combines Spotify sign-in, playlist playback and track search with a per-user favorites CRUD app. The user signs in, browses playlists or searches Spotify tracks, then adds selected tracks to favorites and can edit or delete saved entries. The React interface calls Express routes; route handlers use Spotify and MongoDB services. The graph also includes the UI request helper as an internal layer. Some playlist and playback details are documented but not shown in the sampled implementation, so those links are marked unverified.

Main entry points: [`src/SongsHome.jsx`](https://github.com/lenmorld/song-hub/blob/master/src/SongsHome.jsx) (Favorites home), [`services/spotify.js`](https://github.com/lenmorld/song-hub/blob/master/services/spotify.js) (Spotify service), [`server.js`](https://github.com/lenmorld/song-hub/blob/master/server.js) (HTTP server), [`src/index.js`](https://github.com/lenmorld/song-hub/blob/master/src/index.js) (UI bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["React interface"]
  node_app["UI bootstrap<br/>[index.js]"]
  node_login["Spotify login<br/>[Login.jsx]"]
  node_header["Header<br/>[Header.jsx]"]
  node_home["Favorites home<br/>[SongsHome.jsx]"]
  node_playlist["Playlists<br/>[Playlists.jsx]"]
  node_search["Track search<br/>[Search.jsx]"]
  node_songlist["Song list<br/>[SongList.jsx]"]
  node_song["Song item<br/>[Song.jsx]"]
  node_songform["Song editor<br/>[SongForm.jsx]"]
  node_modal["Modal<br/>[Modal.jsx]"]
  node_fetch["API request helper<br/>[fetchRequest.js]"]
end

subgraph group_api["Express API"]
  node_server["HTTP server<br/>[server.js]"]
  node_auth["Auth routes<br/>[auth.js]"]
  node_me["User profile routes<br/>[me.js]"]
  node_songsapi["Song search route<br/>[songs.js]"]
  node_usersapi["Favorites routes<br/>[users.js]"]
end

subgraph group_integrations["External services"]
  node_spotify["Spotify service<br/>[spotify.js]"]
  node_spotifyext["Spotify API"]
end

subgraph group_storage["Persistence"]
  node_dbservice["Database service<br/>[db.js]"]
  node_mongo[("MongoDB Atlas")]
end

node_user(("Listener"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_home
node_app -->|"renders"| node_login
node_app -->|"renders"| node_header
node_user -->|"signs in"| node_login
node_server -->|"mounts"| node_auth
node_server -->|"mounts"| node_me
node_server -->|"mounts"| node_songsapi
node_server -->|"mounts"| node_usersapi
node_auth -->|"authenticates with"| node_spotify
node_me -.->|"uses"| node_spotify
node_spotify -->|"requests"| node_spotifyext
node_home -->|"requests favorites"| node_fetch
node_home -->|"shows"| node_playlist
node_home -->|"opens"| node_search
node_home -->|"renders"| node_songlist
node_home -->|"opens"| node_songform
node_search -->|"searches tracks"| node_songsapi
node_search -->|"renders results"| node_songlist
node_search -->|"uses"| node_modal
node_songform -->|"uses"| node_modal
node_songlist -->|"renders"| node_song
node_fetch -->|"calls API"| node_usersapi
node_usersapi -->|"reads and writes"| node_dbservice
node_dbservice -->|"connects to"| node_mongo
node_songsapi -->|"searches tracks"| node_spotify
node_playlist -.->|"loads playlists"| node_spotify
node_playlist -.->|"plays playlists"| node_spotifyext

click node_app "https://github.com/lenmorld/song-hub/blob/master/src/index.js"
click node_login "https://github.com/lenmorld/song-hub/blob/master/src/Login.jsx"
click node_header "https://github.com/lenmorld/song-hub/blob/master/src/Header.jsx"
click node_home "https://github.com/lenmorld/song-hub/blob/master/src/SongsHome.jsx"
click node_playlist "https://github.com/lenmorld/song-hub/blob/master/src/Playlists.jsx"
click node_search "https://github.com/lenmorld/song-hub/blob/master/src/Search.jsx"
click node_songlist "https://github.com/lenmorld/song-hub/blob/master/src/SongList.jsx"
click node_song "https://github.com/lenmorld/song-hub/blob/master/src/Song.jsx"
click node_songform "https://github.com/lenmorld/song-hub/blob/master/src/SongForm.jsx"
click node_modal "https://github.com/lenmorld/song-hub/blob/master/src/Modal.jsx"
click node_fetch "https://github.com/lenmorld/song-hub/blob/master/src/helpers/fetchRequest.js"
click node_server "https://github.com/lenmorld/song-hub/blob/master/server.js"
click node_auth "https://github.com/lenmorld/song-hub/blob/master/routes/auth.js"
click node_me "https://github.com/lenmorld/song-hub/blob/master/routes/me.js"
click node_songsapi "https://github.com/lenmorld/song-hub/blob/master/routes/songs.js"
click node_usersapi "https://github.com/lenmorld/song-hub/blob/master/routes/users.js"
click node_spotify "https://github.com/lenmorld/song-hub/blob/master/services/spotify.js"
click node_dbservice "https://github.com/lenmorld/song-hub/blob/master/services/db.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_app,node_login,node_header,node_home,node_playlist,node_search,node_songlist,node_song,node_songform,node_modal,node_fetch toneBlue
class node_server,node_auth,node_me,node_songsapi,node_usersapi toneAmber
class node_spotify,node_spotifyext toneMint
class node_dbservice,node_mongo toneRose
class node_user toneIndigo
```

## Components

### React interface

- [UI bootstrap](https://github.com/lenmorld/song-hub/blob/master/src/index.js): `src/index.js`
- [Spotify login](https://github.com/lenmorld/song-hub/blob/master/src/Login.jsx): `src/Login.jsx`
- [Header](https://github.com/lenmorld/song-hub/blob/master/src/Header.jsx): `src/Header.jsx`
- [Favorites home](https://github.com/lenmorld/song-hub/blob/master/src/SongsHome.jsx): `src/SongsHome.jsx`
- [Playlists](https://github.com/lenmorld/song-hub/blob/master/src/Playlists.jsx): `src/Playlists.jsx`
- [Track search](https://github.com/lenmorld/song-hub/blob/master/src/Search.jsx): `src/Search.jsx`
- [Song list](https://github.com/lenmorld/song-hub/blob/master/src/SongList.jsx): `src/SongList.jsx`
- [Song item](https://github.com/lenmorld/song-hub/blob/master/src/Song.jsx): `src/Song.jsx`
- [Song editor](https://github.com/lenmorld/song-hub/blob/master/src/SongForm.jsx): `src/SongForm.jsx`
- [Modal](https://github.com/lenmorld/song-hub/blob/master/src/Modal.jsx): `src/Modal.jsx`
- [API request helper](https://github.com/lenmorld/song-hub/blob/master/src/helpers/fetchRequest.js): `src/helpers/fetchRequest.js`

### Express API

- [HTTP server](https://github.com/lenmorld/song-hub/blob/master/server.js): `server.js`
- [Auth routes](https://github.com/lenmorld/song-hub/blob/master/routes/auth.js): `routes/auth.js`
- [User profile routes](https://github.com/lenmorld/song-hub/blob/master/routes/me.js): `routes/me.js`
- [Song search route](https://github.com/lenmorld/song-hub/blob/master/routes/songs.js): `routes/songs.js`
- [Favorites routes](https://github.com/lenmorld/song-hub/blob/master/routes/users.js): `routes/users.js`

### External services

- [Spotify service](https://github.com/lenmorld/song-hub/blob/master/services/spotify.js): `services/spotify.js`
- **Spotify API**

### Persistence

- [Database service](https://github.com/lenmorld/song-hub/blob/master/services/db.js): `services/db.js`
- **MongoDB Atlas**

### Other components

- **Listener**

## Connections

- Listener → UI bootstrap: uses (evidence: `README.md`)
- UI bootstrap → Favorites home: renders (evidence: `src/index.js`)
- UI bootstrap → Spotify login: renders (evidence: `src/index.js`)
- UI bootstrap → Header: renders (evidence: `src/index.js`)
- Listener → Spotify login: signs in (evidence: `README.md`)
- HTTP server → Auth routes: mounts (evidence: `server.js`)
- HTTP server → User profile routes: mounts (evidence: `server.js`)
- HTTP server → Song search route: mounts (evidence: `server.js`)
- HTTP server → Favorites routes: mounts (evidence: `server.js`)
- Auth routes → Spotify service: authenticates with (evidence: `routes/auth.js`)
- User profile routes → Spotify service: uses (evidence: `routes/me.js`)
- Spotify service → Spotify API: requests (evidence: `services/spotify.js`)
- Favorites home → API request helper: requests favorites (evidence: `src/SongsHome.jsx`)
- Favorites home → Playlists: shows (evidence: `src/SongsHome.jsx`)
- Favorites home → Track search: opens (evidence: `src/SongsHome.jsx`)
- Favorites home → Song list: renders (evidence: `src/SongsHome.jsx`)
- Favorites home → Song editor: opens (evidence: `src/SongsHome.jsx`)
- Track search → Song search route: searches tracks (evidence: `src/Search.jsx`)
- Track search → Song list: renders results (evidence: `src/Search.jsx`)
- Track search → Modal: uses (evidence: `src/Search.jsx`)
- Song editor → Modal: uses (evidence: `src/SongForm.jsx`)
- Song list → Song item: renders (evidence: `src/SongList.jsx`)
- API request helper → Favorites routes: calls API (evidence: `src/helpers/fetchRequest.js`)
- Favorites routes → Database service: reads and writes (evidence: `routes/users.js`)
- Database service → MongoDB Atlas: connects to (evidence: `services/db.js`)
- Song search route → Spotify service: searches tracks (evidence: `routes/songs.js`)
- Playlists → Spotify service: loads playlists
- Playlists → Spotify API: plays playlists (evidence: `README.md`)