TuneTrove is a Next.js project bootstrapped with create-next-app but using a dedicated Node.js server and Express.js to handle routing and requests. It's created to match and mimic the Spotify UI using Styled Components (thanks to the folks at newline.co) and shows you your Spotify "profile" but with some twists!

You can see your Top Artists and Top Tracks from the last month, 6 months, all time - and ✨ create playlists ✨ around this data. You can also see your public playlists and sort them based on some of Spotify's track properties (danceability, tempo, energy). More features to come soon!

TuneTrove is deployed using Heroku at hussainabdi.com. You can click the "Log in with default profile" button to see it in action without logging into your own Spotify account. Currently, due to Spotify API limitations only those with early access can use it with their own account. I'm working on getting it approved for public use but in the meanwhile you can also request early access here.

Getting Started locally

You will need a Spotify Client ID and Client Secret which you can get by creating your own Spotify app following the instructions here. While following these instructions, set your Redirect URI to http://localhost:8888/callback.

Create a .env.local. file at the root directory of this project and add your Client ID and Client Secret to it following .env.local.example. All that's left is to run the app!

First, run the node server:

npm run start-server-dev
# or
yarn start-server-dev

Next, run next (no pun intended):

npm run start-dev
# or
yarn start-dev

Open http://localhost:8888 with your browser to see the result! You can now ✨ v i s u a l i z e ✨ your music listening and listen to the songs you enjoy by creating playlists. If you want to allow your friends to check it out, you will need to add the email they use to log into Spotify under your Spotify app's dashboard (User Management). Happy creating!