How kevkim11/spotify-wall works
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: App.js App · RecentlyPlayed.js Recently played · TopTracks.js Top tracks · TopArtists.js Top artists
Components 13
App orchestration
- React entry
src/index.js - App
src/App.js
Spotify data
- Token service
- Recently played
src/spotify-filter/RecentlyPlayed.js - Top tracks
src/spotify-filter/TopTracks.js - Top artists
src/spotify-filter/TopArtists.js
Wall presentation
- Filter navigation
src/components/Nav.js - Wall layout
src/components/Table.js - Track list
src/components/List.js - Track tile
src/components/Square.js - Artist tile
src/components/Circle.js
Other components
- Viewer
- Spotify API
Connections 20
- 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