- HTML
- CSS/Bootstrap
- Javascript/Jquery
- Markdown
- Node.JS
- See package.json for full list of dependencies.
This webpage allows a user to sign into spotify. Upon signing in they get the option to display their top 20 artists, tracks, and most recent playlists. Users get the option to display a visualizer from the genres generated in their top tracks.
- clone repo to pc
$ npm install --save-dev$ npm audit fix --force- go to Spotify Developer Dashboard and login to spotify
- click create an app and name it Spotify Color
- click edit settings and paste http://localhost:8080/ into Redirect URIs
- create .env file
- write without quotes "CLIENT_ID=" and paste client id from spotify app
$ npm run build$ npm run start
- Not having a profile picture on Spotify account will break part of the website
- Not having listened to music on Spotify beforehand, at least for a day or two, will prevent Top 20 and Profile Background to not function correctly
- not all genres are listed, so visualizer wont always work. so you have to press visualizer multiple times to work sometimes.
- if click playlist before top 20, sometimes top 20 will appear out of place.
- if on gh-pages after login redirects to https://a-shevlin.github.io/ instead of https://a-shevlin.github.io/top-20-color-visualizer/ however the login information is cached and if the page is loaded directly after login the user info will be displayed.
Copyright (c) 2022 Alex Shevlin, Caroline Cerussi, Donovan Weber, Jacob Palaoro, Seung Lee
- Alex Shevlin alexshevlin1@gmail.com
- Caroline Cerussi caroceru@gmail.com
- Donovan Weber donovanweber03@gmail.com
- Jacob Palaoro jpalaoro197@gmail.com
- Seung Lee shl7@uw.edu
tobika for the Spotify PKCE example