cumulio-spotify repo walk through version for Data Talks 2020
cuMusicalio is an app that integrates a Cumul.io dashboard that displays playlist and song analytics of various playlists and/or a users own playlist of choice if they login to their Spotify account via the app. You can also use the dashboards to add songs to your own Spotify playlists.
This repo contains the boiled down version of the app which is presented as a live coding session at Data Talks 2020. The full version is at cumulio-spotify. All changes here are made to the src/app.js
file. Starting with an initial 'skeleton' commit that contains code required for the Spotify API calls, logins and the overall structure of the app, each following commit represents steps to achieve the following:
- Integrate a dashboard:
- Add
cumul.io Spotify Playlist
dashboard to application
- Add
- Listen to custom events
- On
add_to_playlist
:- Call
ui.addToPlaylistSelector(name, id)
. This will open a Modal that opens the playlists of the person who has logged in. When a playlist is selected, we make a call to the Spotify API to add selected song ID to be added to the selected playlist ID:POST: https://api.spotify.com/v1/playlists/${playlistId}/tracks?uris=spotify%3Atrack%3A${songId}
- (Extra: Add the event to the table chart and see what you get from the event)
- Call
- On
song_info
(for drill-throughSong Info
dashboard)- Get new authorization token with metadata to filter on
- Integrate
Song Info
dashboard in Song Info Modal
npm install
- Create a
.env
file in the root directory and add the following from your Cumul.io and Spotify Developer accounts:
From Cumul.io:
CUMULIO_API_KEY=xxx
CUMULIO_API_TOKEN=xxx
From Spotify:
SPOTIFY_CLIENT_ID=xxx
SPOTIFY_CLIENT_SECRET=xxx
ACCESS_TOKEN=xxx
REFRESH_TOKEN=xxx
npm run start
- On your browser, go to
http://localhost:3000/
and Login to your Spotify account 🥳
Note: You do not have to rebuild every time you make a change to this once it's running. Just refresh your browser!