Mixo is a service and webapp for creating, managing and seamlessly listening to music playlists with content from both Spotify and Youtube.
Add songs to your playlists via multi-platform search (YouTube & Spotify).
Seamless playback between songs from different platforms.
Manage playback by adding to queue and rearranging.
Unfortunately this project is not suitable for production, as it's possibly not in line with Spotify's current production developer guidelines:
Do not create any product or service which is integrated with streams or content from another service.
Due to this, this project will remain in dev-mode for the time being, meaning that only pre-selected Spotify users can use the dev deployment of this site: mixo.vercel.app. If you would like access, please contact me gmulhearn@proton.me. Alternatively you can follow the guide below to run your own service + webapp.
This app is a standard NextJS project, using TRPC for client-server interactions, Spotify API for auth and song data, and MongoDB for storing playlist data. Given the dependency on Spotify API + MongoDB, some setup is required here before the service can be ran.
Firstly, setup the .env from the template: cp .env.template .env
Head over to https://cloud.mongodb.com and follow the guide to deploy a cluster, then follow the instructions to get a MongoDB URI. It should look something like mongodb+srv://[..]. Paste this URI as MONGODB_URI in your .env.
(Requires spotify premium).
- Head to https://developer.spotify.com and create a developer account
- Create a new app for this service
- Copy the client ID and client secret from your app's information into the
.env(SPOTIFY_CLIENT_ID&SPOTIFY_CLIENT_SECRET) - Edit the "Redirect URIs" of your app to point to where your webapp will be running (e.g.
http://localhost:3000/api/spotify/callbackfor local development).
npm run dev