Danceable?!
Welcome to the Danceable?! webapp. This webapp will score the danceability of your spotify playlist!
Spotify API
This app makes use of the spotify api through the use of the "(implicit grant flow)[https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow]". To make use of this flow you will need an api key (client id) from spotify. With the spotify api you can get user data once they have given permission to do so. You can also use the api to look for songs, playlists, artists and a lot more. Another cool feature of the api is that you can analyse song data. The spotify API uses oAuth2.0. The flow of using oAuth is best explained through a diagram they have on their website.
How it works
First all your playlists and it's data will get fetched from the spotify api.
Then all the songs' audio features data of the playlist gets fetched.
Afterwards the score will be generated based on the data fetched from the songs' audio-features data.
Features
Progressive web-app (You can install this web-application on your phone)
Display playlists of your spotify profile
Measure a danceability score from your favorite playlist
You can save a playlist and it's score offline
For saving a playlist offline I used the CacheStorage API together with a serviceworker. Because my data is user data and can be updated quite frequently by the users themselves, I've chosen to make my app Network first and fallback to cache. This way the data when there is an internet connection will be up to date, and if not, the data will remain the same as the last time you tried to save it.
Optimizations
To view the score of my website I lighthouse in Google developer tools. At first I saw that my site didn't score well on performance so I added GulpJS to minify my JavaScript and CSS which decreases the size of my client-side javascript files. A teacher of mine also recommended you add the npm package : compression to the express server. After adding this My website scored high on performance. I also decided to tackle the accessibility issues found by lighthouse. The styleguide of Spotify apparently has accessibility issues where the contrast between the button text color and the button is not high enough. So I picked a darker shade of green for my buttons.
