A mock version of Spotify made with their public API
Site is live and working at https://spofity.netlify.app/ but your Spotify account would need to be whitelisted to access so hit me up if you need access our you could spin up your own.
This aplication uses Spotify Web API and Netlify Functions. It retreives the current playing track on your Spotify account and allows the user to store it in locally persisted playlists.
You can create multiple playlists and add/remove tracks from it as well as deleting existing playlists. Apart from that I added some basic controls to Play/Pause songs and move to the Previous/Next song as well.
I used TailwindCSS for styles since it offers great utility classes to keep consistency accross the UI.
I used spotify-web-api-node on the serverless functions ("backend" code) to ease up the connection with Spotify OAuth endpoints. We could have achieve the same with node-fetch or axios to avoid to use native modules.
Other than that this project relies only on React library
Prerequisite: You'll need to have the Netlify CLI installed on your machine. In case you don't, run this command from your terminal:
npm install netlify-cli -gSetup you environment variables on a .env file on the root folder of this project.
Note: Go to Spotify for developers to get you CLIENT_ID and CLIENT_SECRET.
# .env.example
# Serverless environment variables
REDIRECT_URI="http://localhost:8888/"
CLIENT_ID="YOU_SPOTIFY_API_CLIENT_ID"
CLIENT_SECRET="YOU_SPOTIFY_API_CLIENT_SECRET"
# Client environment variables (thes would be exposed to our clients)
VITE_CLIENT_ID="YOU_SPOTIFY_API_CLIENT_ID"
VITE_REDIRECT_URI="http://localhost:8888/"
VITE_API_URL="http://localhost:8888/.netlify/functions"
Then run this command in the root folder of this project
netlify devThis would spin up both the react website and the serverless functions we are going to use authenticate the user. You should see the site running at http://localhost:8888
