Building a Spotify API Searcher in React

Enjoying my videos? Sign up for more content here: www.coopercodes.com/
📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com
Join the Cooper Codes Community: / discord (Weekly calls, free resources, tutoring, and more!)
In this React tutorial I show you how to initialize the Spotify API, and then use the Spotify search functionality to show the albums of a certain artist. We also use react-bootstrap in order to create a basic frontend in order to handle incoming album data. We do requests to the Spotify using the JavaScript Fetch API.
Enjoying my content? Feel free to support me on Patreon / coopercodes
Business inquiry? Email [e-mail]

[@sebbel3260]

Thank you for taking the time to explain your code and console.log() as you went. Doing so is a very underrated part of the education process. Thank you!!

[@-Average-]

I have been struggling with understanding spotifys api and this is exactly what I needed, thank you

[@Yotes4Life]

Top tier tutorial, man. I have a degree in education but ultimately decided against being a classroom teacher. So I've recently begun learning programming, and through the exhausting (but exciting) process of trying out resource after resource, I've gotta say -- your style is the best I've come across. You clearly know your stuff, and you walk your viewers through it in an impressive way. Thank you very much and keep the content coming! --A new subscriber

[@F3sty]

Omg, i just started learning react and i love your video. Every details are as simple as they can get. Easy to understand. Thank you!

[@Jazzsterr2468]

This is the most helpful video about understanding how to use the spotify API. My guy literally explains every single step! Amazing work! Thank you!

[@predator8166]

Great tutorial! I was struggling with some problems, your tutorial helped me figure out what was wrong

[@tahmidahmed6524]

As a struggling beginnner, I've been trying to understand how to implement API and React for a while now and honestly you've made this a ton easier, Thanks. (Pinning this video to windows bar right now).

[@linkVSganandorf]

dude seriously the best react/vite spotify api tutorial all the other ones use outdated methods big thanks

[@AC-lt7xf]

This was a great tutorial! Very thorough and informative. Thank you!

[@HypCarlos]

Loved the video and the small explanations for why u used certain things. Also really like ur way of programming where you implement the blue print with console logs and then replace with the actual functions. Thanks!

[@CooperCodes]

Always glad and willing to teach those who are willing to learn, thanks so much for watching!

[@ambermichellemartinez]

Thank you so much for this! Exactly what I needed. :)

[@korneyboy]

Awesome tutorial sir. As many noted, you explain things perfectly. Is there a simple way to search directly for an album or tracks?

[@Thomas-rr8vk]

Just wanted to say thanks, this is exactly what I needed.

[@CooperCodes]

Thanks for watching, glad it was helpful :)

[@dhaloh]

You explain coding so well. Instant sub.

[@nprocacciojr]

Awesome video man thank you!!!

[@vanshikasingh9026]

great explanation. thank you!

[@matiasvargas1729]

Your really rock man!! Great code and very useful

[@grimmauldplace9326]

Proper tutorial man.

[@harshm0di]

Thank you very much helped me a lot.

[@pierrehanna]

this is a great video! really well explained. Thanks

[@CooperCodes]

Thank you Pierre, appreciate the support

[@dominic7129]

This is really helpful as a beginner in react and learning spotify api until now and at the same time I am enjoying it while you are using taylor swift as an example, as I follow the latest fetch i got from taylor is the 1989 deluxe which is also a banger!. Thanks a lot!

[@timneji]

Really helpful l working on a similar project and that was helpful, even thou my code is still broken it did help me lots

[@mahibhuiyan7824]

I really appreciate your help. Keep it up buddy.

[@CooperCodes]

I really appreciate you taking the time to watch the video. thanks for commenting :)

[@senseiKakashi07]

Thanks a lot for this, though i have to get use to the documentation, but thanks for uploading this too 😁

[@pamelabengloff975]

you saved me!!! thank you so much this is a great tutorial

[@CooperCodes]

Glad that it helped you! Thanks for watching :)

[@Lucas_Rinaldi]

Thank you!!! 🙌

[@CitizenCayne]

Great video. Thank you

[@poornashreethirumalai3220]

source code?

[@la_florineta]

thanks a lot for your amazing content!

[@CooperCodes]

You’re welcome! Appreciate the comment 😄

[@rachlys7365]

Thank you, it saved me!!

[@schneelzare]

Simple and direct to the point, no unnecessary infos. But what other methods can I use to avoid hardcoding my client secret into my code? It's pretty much the only thing that's keeping from finishing my project.

[@shahadsidek6550]

really appreciate the effort you put in this video and the way you explain everything makes it easier to understand,, i would like to ask if you can make a video that shows and plays songs

[@CooperCodes]

Thank you for the comment! I’ll do a React video with playing songs from Spotify soon.

[@shahadsidek6550]

@@CooperCodes Really Appreciate Cooper Codes ..thanks

[@shahadsidek6550]

@@CooperCodes Really Appreciate Cooper Codes ..thanks

[@farhatghumra3169]

​@@CooperCodes code for playing song in spotify

[@AshishBamania95]

Thanks a lot for this video!

[@CooperCodes]

Thanks for watching :)

[@mikeoviedo4009]

super super slept on youtube channel here.

[@CooperCodes]

Thanks man I appreciate that :)

[@raymond8590]

awsome viddd

[@maxfriedman3148]

Really helpful!!

[@CooperCodes]

Appreciate it Max, glad to see it helped :) Best of luck with whatever project you're working on

[@ramanmama6736]

Great tutorial.

[@CooperCodes]

Thanks for watching :)

[@devinbits236]

do we need to refresh the access tokens manually after they expire

[@taha61333]

Thanks

[@user-qg3hm2vi6p]

Amazing video, thank you. I have one issue however: the search results are not "optimal" or "smart" as you describe them. When I search for "Taylor Swift", the first result is some random artist called "Taylorxsings". How do I go about debugging that issue?

[@julienperez829]

Hi, thanks for this great video ! I'm having an issue while getting a token, i'm having a 400 error with my API call, is it normal ? :(

[@amauryrodrigo]

Thank you!!!!!!

[@CooperCodes]

You're welcome! Thanks for watching :)

[@issameddinebouhoush115]

Hello, I couldn't access my dashboard from my Spotify as a developer account! error message appears even if I click on login have an idea, please?

[@jaideeplobo6096]

Thank you. Is this api is free or paid one

[@utkarshkumaryadav1431]

Using this method will I be able to to play songs????

[@raymond8590]

what should i change if i wan to search using song name ? or even genre?

[@radenazhar3112]

i got error, i cant access the token. "Failed to load resource : The Server responded with a status of 400"

[@iosbloodz9622]

I keep getting this error while following your tutorial. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. Any idea how to fix this?

[@patrickstar8585]

Am I able to upload this for an android application?

[@raymond8590]

how di i access the songs to play? can i do that?

[@iosbloodz9622]

Hey do you happen to have the source code of this on GitHub?

[@TheAditya64]

yeah you are coding but you should also use latest and greatest of js while coding so that everyone should know and also let them know why it is necessary, it's not just code, its the way you code. Like component shouldn't have data handling as well, why var if you can const or let. just add .catch while chaining promises.

[@CooperCodes]

Thanks for these tips, I’m going to make these a focus in future tutorials. I’m from a background of many programming languages so I can figure stuff out but I can’t admit to being a JS expert. Appreciate the comment

[@TheAditya64]

@@CooperCodes ha ha anytime brother! being a js dev for so so long, I kind of keep telling everyone why you use this and this. keep building! happy coding!!!

[@moseley_dev007]

Great job, but no link to the project on github ?

[@CooperCodes]

Sadly when I recorded these early videos I had like 300 subs and the laptop I wiped the laptop they were on. Sorry! I do GitHub’s for all my new videos now

[@musahussain1693]

whereis the finished code

[@Suraj-vn5tm]

code ?

[@wishinq]

how do i get the spotify api token

[@ishaanbhatia6338]

Did you manage to work it out?

[@wishinq]

@@ishaanbhatia6338 Nope

[@fabianrr]

I need help :c

[@wudao88]

this code does not work, unfortunately.. you will get a CORS error

[@jayanspaliwal5907]

Not if you use the modules adios and cors

[@jayanspaliwal5907]

Axios* , damn you autocorrect 😑

[@Vania-tk9cc]

Thank you bro, so informative.😈❤