Listening Party

Source code for the web app showcasing Spotify collaborative playlists from the Party Corgi Discord #listening-party channel.

Built with:

Next.js
Netlify with Next.js build plugin
TailwindCSS
Framer Motion
Workbox via next-pwa
Spotify Web API via spotify-web-api-node
...and more

Lighthouse

📱 Mobile

💻 Desktop

Usage

I made this for my own use, but feel free to fork/clone as a starter and make it your own.

Make an .env.local file in your project root, which will be loaded by Next.js.

# Your Spotify developer app credentials
# See: https://developer.spotify.com/documentation/general/guides/app-settings/
SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=

# Comma separated IDs of the playlists you want to display
PLAYLIST_IDS=

# (Optional) Use local JSON file as data source
# DEV_USE_SAMPLE_DATA=1

# These are added by Netlify in their remote env config
# URL=https://listening-party.netlify.app
# CONTEXT=production

I use Netlify, which automatically adds URL and CONTEXT on their remote environments. I use process.env.URL in some parts of the code; search and modify as needed if you use a different service.

Lastly, make sure your remote environment configuration contains the same values. Refer to these docs if you use Netlify or Vercel:

About the DEV_USE_SAMPLE_DATA config

During development, I use local JSON files as data source instead of fetching from the Spotify API, which is faster and reduces Spotify API hits. To use sample data, enable DEV_USE_SAMPLE_DATA=1 in the environment configuration and (optionally) modify the data here https://github.com/ekafyi/party-playlists-nextjs/tree/docs/update-readme/src/sample-data.

⚠️ Important: Make sure you have obscured the playlist IDs before committing sample data from (eg.) fetch or cURL results.

Have fun and let me know what you build from this! 🤘🏽

Icon by Freepik.com