Top 20 Color Visualizer

A simple website that shows Spotify user’s playlist, top artists, and top tracks.

By Alex Shevlin, Seung Lee, Caroline Cerussi, Donovan Weber, Jacob Palaoro

Technologies Used

  • 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.

Setup/Installation Requirements

  • 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

Known Bugs

  • 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 instead of 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

Contact Information

Special Thanks

tobika for the Spotify PKCE example


View Github