DEV Community

Cover image for I made a web app that creates Spotify playlists for you
Soham
Soham

Posted on • Edited on

I made a web app that creates Spotify playlists for you

What did I build?

This is Kipify, a web app that helps you find new music on Spotify. Kipify analyses your Spotify data from the past to determine what you enjoy and what you don't, and then accurately (it tries its best) generate recommendations.

What makes it different from Spotify recommendations is that you can also get tracks, similar to specific tracks. To use the app all you have to do is login with your Spotify account, and hit create on one of the two methods provided. Kipify will then automatically make a playlist of 50 tracks.

Why did I build it?

It originally started as a final project for Harvard CS50 Final Project, but then I decided to take it much further considering I myself need something like this. Kipify isn't a paid service, it's actually open sourced. Here's the GitHub repository with all the source code: https://github.com/kipifyapp/webapp

Although the project was completed in October 2023 itself, I'm only posting about it now because I had school and couldn't really find the time and I forgot.

How did I built it?

No I did not design the logo, Microsoft Bing AI did it for me. Yes I came up with the name.

Now here is the technological part you have been waiting for...
Kipify was built using Node.js, Tailwind CSS, Express.js, and the Spotify Web Api. It is hosted with the help of Vercel.

I was initially going to use Next.js, but then it turned out to be a little too complicated for me given how much time I had. So I chose to use plain HTML with Tailwind css.

A little command helped me make sure the site looked pretty:

"scripts": {
    "tailwind": "npx tailwindcss -o public/styles/build.css --minify"
}
Enter fullscreen mode Exit fullscreen mode

Yes I used npm run tailwind every time I made a change to the styling. Not at all the best way to develop, but fair enough...

Although I had to little extra bits to add to the backend, I still chose Vercel because it has much better features, it's free while still being performant (serverless functions).

The "Algorithm"

  • The user is provided with two ways to create a playlist Create from profile or Create from tracks.

  • In case the user selects the first option, the top 5 tracks they have listened to the most in the past month are selected. We get this data from Get User's Top Items API.

  • In case the user selects the second option, they have to provide URLs for 1-5 Spotify tracks.

  • After that we get the audio features of all the tracks using Get Several Tracks' Audio Features API.

  • Then one by one we get the recommendations for each track using Get Recommendations API.

  • All the recommended tracks are ranked according to how many recommendations they appear in. And then the top 50 tracks are chosen from that. Let me give you an example:

Track 1 Suggestions: A, B, C, G
Track 2 Suggestions: B, D, F, H
Track 3 Suggestions: A, B, E, I

Suggested tracks list:
- 3 (appeared 3 times): B
- 2 (appeared 2 times): A
- 1 (appeared once): C, E, F, G, H, I

If only top 5 tracks are to be selected,
the final generated tracks list would be:
B, A, and 3 more random tracks from `1`
Enter fullscreen mode Exit fullscreen mode
  • The 50 generated tracks are then put into a playlist using Add Items to Playlist API.

  • The playlist name is put as Kipify Mix, the reason is that Spotify creates personalized playlists a lot of times, like Rock Mix, Pop Mix, etc. Therefore the playlist name containing Mix gives the impression that it is a playlist created by Spotify itself, which would attract anyone stalking our user's profile. The playlist description is put as Playlist created by kipify.vercel.app for <username>. Yet another little trick to get more people to know that Kipify exists.


A lot of people I have told about this app have had good experience so far. The generated playlist is fairly accurate and definitely helps in finding new music.

I do aspire to build this app bigger and better in the near future (probably not in the next 2 years), going beyond recommendations. Maybe a way to automate the whole process of migrating all your playlists to YouTube Music.....

Here's the link to the web app incase you missed it above: https://kipify.vercel.app/

Looking forward to the feedback in the comments below :D

p.s ive been using spotify since 4 years and i still have not paid for premium

Top comments (23)

Collapse
 
schmoris profile image
Boris

Cool app! Here are some things you could consider:

  • When creating a playlist from 5 tracks, it will ask you to log in. After logging in, you have to enter the 5 tracks again.
  • When creating a playlist from 5 tracks, it would be cool to search for songs.
  • Probably a bit more difficult, but suggestions from other streaming platforms (if there are any) could maybe diversify the results even more and set you apart from the Spotify suggestions, specially when it comes to niche music :-)
Collapse
 
sohamboratee profile image
Soham
  • By default when clicking on the create button on the home page, it checks for login, but not on the create button in the nav bar, I see what needs to be improved.

  • Definitely a very good idea to make the whole experience simpler.

  • That sounds interesting, however there's also a slight chance that one track on a platform is not available on another platform.

Collapse
 
schmoris profile image
Boris

Oh and if you you reverted your algorithm, you could use it as a "discovery" playlist instead of "similar songs", i.e. the songs that got recommended by the API the least will be selected :-)

Collapse
 
sohamboratee profile image
Soham

Hmm... I didn't think about this.

Collapse
 
devencourt profile image
Brian Bethencourt

It is scary how well this worked. All songs I never heard before but were relevant to my tastes. Great job!

Collapse
 
sohamboratee profile image
Soham

Thanks, glad you enjoyed.

Collapse
 
artydev profile image
artydev

Awesome, thank you very much

Collapse
 
sohamboratee profile image
Soham

Your welcome!

Collapse
 
ashishk1331 profile image
Ashish Khare😎

I enjoyed reading this post, especially the algorithm part. Good job!

Collapse
 
sohamboratee profile image
Soham

Thank you!

Collapse
 
darthvader profile image
Darth Vader

How do you plan to make it better?

Collapse
 
sohamboratee profile image
Soham

That's a question I can't exactly answer right now. But a rough idea would be improving the algorithm and the overall user experience, making the app available on IOS and Android.

Collapse
 
peterrauscher profile image
Peter Rauscher

Pretty sweet. Always open to new music. Thanks! Best of luck building the app out.

Collapse
 
sohamboratee profile image
Soham • Edited

Have fun listening to songs

Collapse
 
garyjiang profile image
G. Jiang

Great work here, something I personally need. Will give it a spin and share feedback! It’s cool that it’s open sourced too

Collapse
 
sohamboratee profile image
Soham

Glad I could help out

Collapse
 
joshw92 profile image
Joshua

Nice work on Kipify. Interesting use of technology and it seems like a useful app. Good luck with your future projects

Collapse
 
sohamboratee profile image
Soham

Thank you

Collapse
 
kevinbism profile image
Kevin Ramirez

Great app and great post! I didn't know what you can do with Spotify for Devs.

Collapse
 
sohamboratee profile image
Soham

Thanks

Collapse
 
ted_bundy profile image
Ted Bundy

Great app I think u should consider adding some Spotify Premium Apk features too But the work was great thanks

Some comments may only be visible to logged-in visitors. Sign in to view all comments.