<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Soham</title>
    <description>The latest articles on DEV Community by Soham (@sohamboratee).</description>
    <link>https://dev.to/sohamboratee</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F802898%2F3397ece6-1fab-4c6b-9b86-71a507dfb6fe.jpg</url>
      <title>DEV Community: Soham</title>
      <link>https://dev.to/sohamboratee</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sohamboratee"/>
    <language>en</language>
    <item>
      <title>I made a web app that creates Spotify playlists for you</title>
      <dc:creator>Soham</dc:creator>
      <pubDate>Wed, 24 Jan 2024 12:07:33 +0000</pubDate>
      <link>https://dev.to/sohamboratee/i-made-a-web-app-that-creates-spotify-playlists-for-you-3joe</link>
      <guid>https://dev.to/sohamboratee/i-made-a-web-app-that-creates-spotify-playlists-for-you-3joe</guid>
      <description>&lt;h2&gt;
  
  
  What did I build?
&lt;/h2&gt;

&lt;p&gt;This is &lt;a href="https://kipify.vercel.app/" rel="noopener noreferrer"&gt;Kipify&lt;/a&gt;, 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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why did I build it?
&lt;/h2&gt;

&lt;p&gt;It originally started as a final project for &lt;a href="https://cs50.harvard.edu/x/" rel="noopener noreferrer"&gt;Harvard CS50&lt;/a&gt; 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: &lt;a href="https://github.com/kipifyapp/webapp" rel="noopener noreferrer"&gt;https://github.com/kipifyapp/webapp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  How did I built it?
&lt;/h2&gt;

&lt;p&gt;No I did not design the logo, Microsoft Bing AI did it for me. Yes I came up with the name.&lt;/p&gt;

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

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;A little command helped me make sure the site looked pretty:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"scripts": {
    "tailwind": "npx tailwindcss -o public/styles/build.css --minify"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Yes I used &lt;code&gt;npm run tailwind&lt;/code&gt; every time I made a change to the styling. Not at all the best way to develop, but fair enough...&lt;/p&gt;

&lt;p&gt;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).&lt;/p&gt;

&lt;h3&gt;
  
  
  The "Algorithm"
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The user is provided with two ways to create a playlist &lt;code&gt;Create from profile&lt;/code&gt; or &lt;code&gt;Create from tracks&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;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 &lt;a href="https://developer.spotify.com/documentation/web-api/reference/get-users-top-artists-and-tracks" rel="noopener noreferrer"&gt;Get User's Top Items API&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In case the user selects the second option, they have to provide URLs for 1-5 Spotify tracks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;After that we get the audio features of all the tracks using &lt;a href="https://developer.spotify.com/documentation/web-api/reference/get-several-audio-features" rel="noopener noreferrer"&gt;Get Several Tracks' Audio Features API&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Then one by one we get the recommendations for each track using &lt;a href="https://developer.spotify.com/documentation/web-api/reference/get-recommendations" rel="noopener noreferrer"&gt;Get Recommendations API&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;All the &lt;strong&gt;recommended&lt;/strong&gt; 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:&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The 50 generated tracks are then put into a playlist using &lt;a href="https://developer.spotify.com/documentation/web-api/reference/add-tracks-to-playlist" rel="noopener noreferrer"&gt;Add Items to Playlist API&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The playlist name is put as &lt;code&gt;Kipify Mix&lt;/code&gt;, the reason is that Spotify creates personalized playlists a lot of times, like &lt;code&gt;Rock Mix&lt;/code&gt;, &lt;code&gt;Pop Mix&lt;/code&gt;, etc. Therefore the playlist name containing &lt;code&gt;Mix&lt;/code&gt; 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 &lt;code&gt;Playlist created by kipify.vercel.app for &amp;lt;username&amp;gt;&lt;/code&gt;. Yet another little trick to get more people to know that Kipify exists.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.....&lt;/p&gt;

&lt;p&gt;Here's the link to the web app incase you missed it above: &lt;a href="https://kipify.vercel.app/" rel="noopener noreferrer"&gt;https://kipify.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Looking forward to the feedback in the comments below :D&lt;/p&gt;

&lt;p&gt;&lt;em&gt;p.s ive been using spotify since 4 years and i still have not paid for premium&lt;/em&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>spotify</category>
      <category>music</category>
    </item>
    <item>
      <title>I created a command line tool to download high quality music</title>
      <dc:creator>Soham</dc:creator>
      <pubDate>Wed, 10 Aug 2022 13:17:46 +0000</pubDate>
      <link>https://dev.to/sohamboratee/i-created-a-command-line-tool-to-download-high-quality-music-3ioi</link>
      <guid>https://dev.to/sohamboratee/i-created-a-command-line-tool-to-download-high-quality-music-3ioi</guid>
      <description>&lt;p&gt;I already created a post regarding this, but I did not get as many views as I expected. This got me wondering, where did I go wrong... And then I realized, the post was literally so dry ._.&lt;/p&gt;

&lt;p&gt;So today I am trying to write a nice blog post, as well as share how I ended up creating what I created. "Killing two birds with one stone"...?&lt;/p&gt;

&lt;h2&gt;
  
  
  What did I create?
&lt;/h2&gt;

&lt;p&gt;What I created is, personally something which I really really love to use. A command line tool to download high quality music:&lt;br&gt;
&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://www.npmjs.com/package/spot-dl" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic-production.npmjs.com%2F338e4905a2684ca96e08c7780fc68412.png" height="420" class="m-0" width="800"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://www.npmjs.com/package/spot-dl" rel="noopener noreferrer" class="c-link"&gt;
          spot-dl - npm
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;p class="truncate-at-3"&gt;
          Downloads music from YouTube and applies Spotify metadata (premium free of cost). Latest version: 3.1.3, last published: 2 years ago. Start using spot-dl in your project by running `npm i spot-dl`. There are no other projects in the npm registry using spot-dl.
        &lt;/p&gt;
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic-production.npmjs.com%2Fb0f1a8318363185cc2ea6a40ac23eeb2.png" width="32" height="32"&gt;
        npmjs.com
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;I love this tool very very much. The music it downloads is of very good quality, and whenever I use it I get that feeling of pride, like "yeah I made this and it works so well".&lt;/p&gt;

&lt;p&gt;Although I create a lot of stuff for my friends to enjoy, this was just step 1, because now I can convert it to a module and then from that a website to download the music, still thinking about it though.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I created it
&lt;/h2&gt;

&lt;p&gt;Back in like November or December 2021, my family and I were going to our hometown for an occasion I don't remember. Now my parents chat all the time in the car, my sister has got mobile data for Amazon Music or Spotify. And I'm left all alone... No music, chit-chats nothing. I kept asking my dad for mobile data but he kept saying no.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I created it
&lt;/h2&gt;

&lt;p&gt;I started googling how to download songs from Spotify for free. And just as you thought, no the search results weren't helpful. Now during this time, I was learning a course on Udemy (still am) about web development. A little bit of frontend, backend, REST all that good stuff.&lt;/p&gt;

&lt;p&gt;So my next search result was a little bit better than the last one, "how to download music using spotify api". Now this is where I started getting search results related to programming. In the course JavaScript was the only language being used. Therefore me being desperate, went for JavaScript straight up.&lt;/p&gt;

&lt;p&gt;I had made a Discord bot to stream music in a voice channel. The bot would use &lt;a href="https://www.npmjs.com/package/youtube-sr" rel="noopener noreferrer"&gt;youtube-sr&lt;/a&gt; to run a search query, and &lt;a href="https://www.npmjs.com/package/ytdl-core" rel="noopener noreferrer"&gt;ytdl-core&lt;/a&gt; would download the audio and stream. Pretty simple right?&lt;/p&gt;

&lt;p&gt;But the problem arose for downloading music with the metadata, as YouTube audio obviously does not have metadata. This is where &lt;a href="https://www.npmjs.com/package/spotify-web-api-node" rel="noopener noreferrer"&gt;spotify-web-api-node&lt;/a&gt; comes in. To simply get the metadata, not the audio just the metadata (audio isn't for free obviously).&lt;/p&gt;

&lt;p&gt;So the logic would go like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Get metadata from Spotify URL&lt;/li&gt;
&lt;li&gt;Run YouTube search query with title retrieved from metadata&lt;/li&gt;
&lt;li&gt;Download audio&lt;/li&gt;
&lt;li&gt;Apply metadata&lt;/li&gt;
&lt;li&gt;Save the file as .mp3&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I started programming, drank coffee, debugged a lot, had fun and listen to music while doing it, and done, &lt;a href="https://www.npmjs.com/package/spot-dl" rel="noopener noreferrer"&gt;spot-dl&lt;/a&gt; existed.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I learned
&lt;/h2&gt;

&lt;p&gt;I am still a newbie in web development. I have 2 years of experience in game development at Roblox (Lua and free-lancing). And although it was nothing very serious, I learnt a lot about programming in general.&lt;/p&gt;

&lt;p&gt;While making this project, I learned a lot about just JavaScript in itself. The code I wrote, wasn't the best quality it could have been better. These 3 topics in particular though:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Promises&lt;/li&gt;
&lt;li&gt;File system&lt;/li&gt;
&lt;li&gt;Command line arguments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And also this blog post, I have literally no experience in writing stuff like this online. I just started typing and it went well I think... Dividing the blog post in separate sections.&lt;/p&gt;

&lt;p&gt;Keeping it casual, I think being too serious makes it look like you're gonna explode any minute, which doesn't mean you shouldn't be serious but just not too damn serious you know. Don't stress it out...&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I am still 15 and have a lot to learn, so I would really appreciate feedback, thanks for reading!!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>todayilearned</category>
      <category>showdev</category>
      <category>node</category>
      <category>beginners</category>
    </item>
    <item>
      <title>spot-dl | npm cli tool to download music</title>
      <dc:creator>Soham</dc:creator>
      <pubDate>Tue, 09 Aug 2022 05:21:15 +0000</pubDate>
      <link>https://dev.to/sohamboratee/spot-dl-npm-cli-tool-to-download-music-3o6k</link>
      <guid>https://dev.to/sohamboratee/spot-dl-npm-cli-tool-to-download-music-3o6k</guid>
      <description>&lt;p&gt;Productive Monday...&lt;/p&gt;

&lt;p&gt;Working on this since like a month, bit by bit. File system was fun to play around with. Spotify API is kinda cool to explore, so much hidden stuff about music.&lt;/p&gt;

&lt;p&gt;Got the inspiration from spotdl on pip.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://www.npmjs.com/package/spot-dl" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic-production.npmjs.com%2F338e4905a2684ca96e08c7780fc68412.png" height="420" class="m-0" width="800"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://www.npmjs.com/package/spot-dl" rel="noopener noreferrer" class="c-link"&gt;
          spot-dl - npm
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;p class="truncate-at-3"&gt;
          Downloads music from YouTube and applies Spotify metadata (premium free of cost). Latest version: 3.1.3, last published: 2 years ago. Start using spot-dl in your project by running `npm i spot-dl`. There are no other projects in the npm registry using spot-dl.
        &lt;/p&gt;
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic-production.npmjs.com%2Fb0f1a8318363185cc2ea6a40ac23eeb2.png" width="32" height="32"&gt;
        npmjs.com
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;&lt;em&gt;P.S I would really appreciate some feedback, I'm still a beginner...&lt;/em&gt;&lt;/p&gt;

</description>
      <category>codenewbie</category>
      <category>beginners</category>
      <category>node</category>
      <category>npm</category>
    </item>
  </channel>
</rss>
