A React web application that users can log into their Spotify account with, view their favorite artists and tracks on, and receive a customized recommended playlist to save to their account. Try it out.
(Note: If the website fails to load, give Grooves some time to wake up and refresh the page)
Grooves was implemented using the React JavaScript framework, Spotify's Developer APIs, Chakra UI, and FramerMotion.
The Spotify Authorization flow in developing Grooves is the Implicit Grant Flow, where the authentication is carried out in the client-side.
-
Harjit Authorized Spotify user and displayed their top artists and tracks on the Stats page.
-
Edward Created the Playlist page and allowed users to upload their customized playlist to their Spotify account by utilizing endpoints in Spotify's Developer API.
-
Daljit Created custom artwork for the background, favicon, and logo.
-
Brendan Coded the Discover page to allow users to select which artists to base their customized playlist on. Used endpoints in Spotify's Developer API to generate a recommended playlist.
Developing Grooves was a great learning experience in becoming better React developers. We learned a lot about OAuth and using third-party APIs to create something of our own, as well as using Context to store important global states to help smoothly transition data from page to page.