DEV Community: Diti Arora

How to work with Spotify API

Diti Arora — Mon, 24 Oct 2022 09:34:53 +0000

For some reason, Spotify's API makes performing even simple tasks complex. It took me a week to understand how things work with this api🥲 And that is why , in this blog, I'll be explaining how to exactly work with the same.

The very first step is to go to Spotify Dashboard and create a new project there. You cannot miss this step because the data you'll be provided with will further help you in the authentication process, we'll get to it later 👀.

After creating a new project, go to the project's overview(click on the card it forms) and then edit the settings.

In the settings, change the 'redirect uri' and give the URL of your localhost, at least for the time you're working locally. Basically, this is the URL to which the user will be redirected after all the authentication is done. You'll need to change it once the app is deployed.

After you're done setting up your project in your dashboard, head back to your project. Spotify provides something called 'Client ID' and 'Client secret' for every project you have in your dashboard. Store these 2 values in your code, without these ids, the Spotify will not know if you are authorized to fetch data.

const CLIENT_ID = '64929b37c6484a45899de5f0960d6931'
const CLIENT_SECRET = '...'

Make sure you don't disclose your client secret.

Claiming your access token

Now in order to fetch the data, you need to first be authorized, in other words have the access token. Without the access token, spotify API will throw an error that you are unauthorized.

getting the token requires you to make a POST request to the spotify api. Spotify for some reason wants their post, get and other requests to be in very certain manner. So below is the code you need to use 👇🏻

since i coded this whole app in ReactJs, I used useEffect to make the call.

const CLIENT_ID = '64929b37c6484a45899de5f0960d6931'
const CLIENT_SECRET = '...'

useEffect(() => {

  var authParams  = {
    method: 'POST',
    headers:  {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `grant_type=client_credentials&client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}`
  }

  fetch(`https://accounts.spotify.com/api/token`, authParams)
    .then(res => res.json())
    .then(data => console.log(data.access_token))

}, [])

Make sure that the value of Content-Type is should be the same as i wrote above. Also, know you know why i told you to store the client id and client secret in your code before, because without them, this POST request won't work. This code should give the access token in your console. Since you'll be needing it futhur, it's better to store it in a useState.

const [token, setToken] = useState('')
const CLIENT_ID = '64929b37c6484a45899de5f0960d6931'
const CLIENT_SECRET = '...'


useEffect(() => {

  var authParams  = {
    method: 'POST',
    headers:  {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `grant_type=client_credentials&client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}`
  }

  fetch(`https://accounts.spotify.com/api/token`, authParams)
    .then(res => res.json())
    .then(data => setToken(data.access_token))

}, [])

Fetching data

At this point, our code might vary, because it depends on what data you want to fetch. It could be anything from creating a fully functioning search bar to tinkering with playlists and everything in between, A LOT COULD BE DONE. And for that, the parameters required while fetching the data will depend.

Spotify even provides its own console to play around with different stuff by providing some sample data. The link which needs to be fetched will be mentioned in the end points in the console itself. Do have a look at it, might make things easier to understand ;)

But for now, what i wanted to do was pretty straight forward. I wanted to simply identify the track through the id of the song which was being played at the moment.

So I went through the console and found the End point i had to hit
developer.spotify.com/console/get-track/

Pretty straight forward, this is how the code needs to be written 👇🏻

  var trackParams = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token 
    }
  }

  await fetch(`https://api.spotify.com/v1/tracks/${id}?market=ES` , trackParams)
  .then(resp => resp.json())
  .then(res => console.log(res)) 
}

As i mentioned, spotify api wants their requests to be very certain. Frankly, I'm not sure if the Content-Type remains the same in all the cases, but its always provided in the console on the right side. In my case, it was application/json.

Even in the Authorization parameter, you need to have the it like the way i wrote above.

After writing all this code, you should have the data in your console. And that is how you play with SpotifyAPI :)

Hope i was clear while explaining things! ✨

My first experience in Tailwind CSS 👩🏻‍💻

Diti Arora — Mon, 13 Sep 2021 11:29:53 +0000

Recently I start learning Tailwind CSS, a CSS framework that helps you write CSS way faster.

Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. Basically, it lets you write CSS in the form of classes within HTML.

Prerequisites for learning Tailwind CSS

After testing out Tailwind, below are the things you should have knowledge about before starting with Tailwind CSS -

Basic HTML (especially Classes and Ids)
Basic CSS
Mobile and Desktop responsiveness
NodeJS should be pre-installed
Little knowledge about npm packages

How I started

Tailwind is very easy to use and to get your grasp on if you have good knowledge about CSS. Since it is that same CSS we are writing but in short, there wasn't anything extra that was needed to learn before I could start learning Tailwind.

To start with Tailwind, I followed the playlist of Tailwind Lab's on YouTube: Tailwind CSS: from Zero to Production . This playlist really explains everything in a clear-cut and short way. I learnt how to set up a Tailwind project, that is to download all the important files( like package.json, tailwind.config file ) and other handy plugins. After been done learning about how Tailwind pretty much works, I started exploring Tailwind's documentation, which is one of the best docs I came across up till now. While fiddling with documentation and trying to implement things on my own, I learnt how to develop normal web pages with proper styling and responsiveness through Tailwind CSS. Afterwards, I jumped on to some advanced stuff like creating my own classes, how to make and use custom colours and properties!< br/>

Difficulties I faced

To me, the process of setting up your Tailwind project was a little difficult at first, though as time passed everything was clear to be.
Another problem I faced was since we were styling our code inside our HTML file (classes to be precised), the code started looking very confusing especially when you have to heavily style your elements.

Ease of learning

It is not at all difficult to learn Tailwind CSS since as I mentioned it above that there is nothing extra you've got to learn as we are writing that same old CSS.
Tailwind's documentation has got one of the best explanations for the same, that is its core concepts, how it works, and its usage.
The classes used in tailwind are very easy and straightforward, you wouldn't need to glance back at its docs to see class names!

Bootstrap vs Tailwind CSS

Bootstrap and Tailwind, both are one of the most used CSS frameworks.

Bootstrap lets you quickly design and customize responsive mobile-first sites. It's the world’s most popular front-end open-source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

1.Customizability

Tailwind according to me is very flexible(customizable). You can decide all the properties and values by yourself, and there is never any need of writing extra CSS. When talking about custom properties, you can easily build your custom colour, use external fonts, etc by making a custom property in your Tailwind config file

Unlike Tailwind CSS, Bootstrap is not very customizable because it have pre-styled elements, and there can be times when you might consider making a CSS file for changing the default styling provided by Bootstrap and adding a bit of your own touch.

2.Usage with CSS Preprocessors

Since Tailwind is a PostCSS plugin, it can easily be used with other preprocessors like Sass, Less, Stylus and others, just like you can with other PostCSS plugins like Autoprefixer.

Bootstrap comes with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. It by default comes with Sass variables and mixins.

3.Removal of unused classes

Both Tailwind CSS and Bootstrap uses PurgeCSS to remove all the untouched css classes which are only helping in increasing the file size.

4.Looks

Tailwind:

A simple card design with Tailwind 👆

Tailwind code

Tailwind:

A simple card design with Bootstrap👆

Bootstrap code

Well, both look good in their own way but then again bootstrap is less customizable and I would have to write extra CSS in order to change its appearance according to my website's theme.

Final Thoughts

Below are some reasons why I believe that Tailwind is worth using-

It's very beginner-friendly. While building web pages, you won't even need to leave your HTML file!
Unlike Bootstrap, It is highly customizable
You don't have to worry about unnecessary code, PurgeCSS will take care of it.
It has memorable class name. So you won't need to repeatedly go back to the documentation
You can even make your own classes, so you won't have to repeat the same code again and again.

Thanks for reading😃. Bye!