How lenmorld/song-hub works
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: SongsHome.jsx Favorites home · spotify.js Spotify service · server.js HTTP server · index.js UI bootstrap
Components 21
React interface
- UI bootstrap
src/index.js - Spotify login
src/Login.jsx - Header
src/Header.jsx - Favorites home
src/SongsHome.jsx - Playlists
src/Playlists.jsx - Track search
src/Search.jsx - Song list
src/SongList.jsx - Song item
src/Song.jsx - Song editor
src/SongForm.jsx - Modal
src/Modal.jsx - API request helper
src/helpers/fetchRequest.js
Express API
- HTTP server
server.js - Auth routes
routes/auth.js - User profile routes
routes/me.js - Song search route
routes/songs.js - Favorites routes
routes/users.js
External services
- Spotify service
services/spotify.js - Spotify API
Persistence
- Database service
services/db.js - MongoDB Atlas
Other components
- Listener
Connections 28
- Listener → UI bootstrap: uses
README.md - UI bootstrap → Favorites home: renders
src/index.js - UI bootstrap → Spotify login: renders
src/index.js - UI bootstrap → Header: renders
src/index.js - Listener → Spotify login: signs in
README.md - HTTP server → Auth routes: mounts
server.js - HTTP server → User profile routes: mounts
server.js - HTTP server → Song search route: mounts
server.js - HTTP server → Favorites routes: mounts
server.js - Auth routes → Spotify service: authenticates with
routes/auth.js - User profile routes → Spotify service: uses
routes/me.js - Spotify service → Spotify API: requests
services/spotify.js - Favorites home → API request helper: requests favorites
src/SongsHome.jsx - Favorites home → Playlists: shows
src/SongsHome.jsx - Favorites home → Track search: opens
src/SongsHome.jsx - Favorites home → Song list: renders
src/SongsHome.jsx - Favorites home → Song editor: opens
src/SongsHome.jsx - Track search → Song search route: searches tracks
src/Search.jsx - Track search → Song list: renders results
src/Search.jsx - Track search → Modal: uses
src/Search.jsx - Song editor → Modal: uses
src/SongForm.jsx - Song list → Song item: renders
src/SongList.jsx - API request helper → Favorites routes: calls API
src/helpers/fetchRequest.js - Favorites routes → Database service: reads and writes
routes/users.js - Database service → MongoDB Atlas: connects to
services/db.js - Song search route → Spotify service: searches tracks
routes/songs.js - Playlists → Spotify service: loads playlists
- Playlists → Spotify API: plays playlists
README.md