Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ekafyi/party-playlists-nextjs
Showcase your Spotify collaborative playlists securely with Next.js + serverless
https://github.com/ekafyi/party-playlists-nextjs
nextjs spotify-api
Last synced: 29 days ago
JSON representation
Showcase your Spotify collaborative playlists securely with Next.js + serverless
- Host: GitHub
- URL: https://github.com/ekafyi/party-playlists-nextjs
- Owner: ekafyi
- License: mit
- Created: 2021-05-03T17:43:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-31T13:27:05.000Z (almost 3 years ago)
- Last Synced: 2023-03-02T22:37:25.786Z (almost 2 years ago)
- Topics: nextjs, spotify-api
- Language: HTML
- Homepage: https://listening-party.netlify.app/
- Size: 1.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Listening Party
Source code for the web app showcasing Spotify collaborative playlists from the [Party Corgi Discord](https://www.partycorgi.com/) `#listening-party` channel.
Built with:
- [Next.js](https://nextjs.org/)
- [Netlify](https://www.netlify.com/) with [Next.js build plugin](https://github.com/netlify/netlify-plugin-nextjs)
- [TailwindCSS](https://tailwindcss.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [Workbox](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) via [next-pwa](https://github.com/shadowwalker/next-pwa)
- [Spotify Web API](https://developer.spotify.com/documentation/web-api/) via [spotify-web-api-node](https://github.com/thelinmichael/spotify-web-api-node)
- ...and more
## Lighthouse
📱 Mobile
[](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/mobile) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/mobile) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/mobile) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/mobile) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/mobile)
💻 Desktop
[](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/desktop) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/desktop) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/desktop) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/desktop) [](https://github.com/ekafyi/party-playlists-nextjs/tree/main/lighthouse_results/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 ](https://nextjs.org/docs/basic-features/environment-variables) by Next.js.
```bash
# 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:
- https://docs.netlify.com/configure-builds/environment-variables/
- https://vercel.com/docs/environment-variables
#### 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](https://www.freepik.com)