How To Use Spotify's API With React

We're back at it again! I read your comments on my previous JavaScript video, How to Use Spotify's API with JavaScript. You asked for me to do this in React. You got. I'll show you How To Use Spotify's API with React. My goal was to make this tutorial for beginners using React. I'm going to take you step by step.
0:00 (Intro)
5:42 (UseState)
8:13 (API Cal Review)
10:13 (UseEffect)
12:05 (App Breakdown Explanation)
18:52 (App Styling)
GitHub Project: github.com/awicks44/Spotify-R...
#react #spotifysapi #softwaredevelopment

[@averywicks6892]

Spotify and React! Nice combination. Let me know what you guys think!

[@parthsawant9904]

can we also play these songs after adding a play button or so? If yes, how? please answer!

[@himanshuraj4766]

Please make a video on how to use spotify api with vue js. There is no any video on youtube for this.plzzzz

[@StuffToDaMax]

Love the way you direct the focus away from copying your code and into understanding the core concepts.

[@averywicks6892]

Sorry for the late response. Appreciate the feedback! Doing my best!

[@danielmdenton]

Appreciate this video. I'm doing a programming bootcamp project and I was a little apprehensive about using the spotify API but you make it look pretty simple.

[@dudududududududududududududu]

You're really great, you've just shown me everything i needed in the moment. I thought i wouldn't be able to understand but you explain in a very comprehensive way. Thanks a lot, from Brazil! hehe

[@twest7002]

Man! I really appreciate all the work you put in. It shows that good informative content is important to you. thanks

[@averywicks6892]

Thank you!

[@ryanfallon4538]

This was great. A lot of tutorials can be very dry, but this was super engaging.

[@averywicks6892]

So dope! Appreciate the feedback man! Tx for watching

[@ericvaughn843]

Love your videos...especially with the code explanations. Would love to be able to see more of the finished app at the end of the videos though.

[@kenbee85]

Bro I really learn a lot from this. I hope you continue doing this

[@billybob7177]

Love this tutorial, it helped me understand how to use APIs in general within my Next website a lot more, thanks :D

[@Cheesieshorts]

Great video!! Thanks so much for helping me out haha studying at university and trying to get some side projects done wanted to do something with spotify api and react for so long! This is a great start thanks so much

[@averywicks6892]

Awesome! Thx for saying that! Helps me to know the videos help!

[@matiaspina8471]

Amazing tutorials man! Really useful, thanks for the work!

[@averywicks6892]

Absolutely! Thx for watching.

[@kareemdabbour4680]

Man, you deserve so much more attention! Great video and an amazing way of explaining things! Wish you the best!

[@averywicks6892]

So appreciate that comment man! Nice to know that the videos help :) Tx for watching.

[@BigDub24]

the share button can help with that

[@carrie4839]

I love your style! Keep creating!!!

[@averywicks6892]

Thank you! Appreciate the feedback!

[@shalabhnegi]

Great video Avery..... loved it. Lots of learning for beginners like me.

[@averywicks6892]

tx buddy! That's who I want to help

[@_maizon]

just what i needed

[@radon592]

Man you are amazing!

[@kamelaoulaiche2966]

Trop fort!!!! depuis le temps que je cherchais ce tuto!!!! thx

[@averywicks6892]

Thank you for watching!

[@folalekan]

Just started learning react was told to build a music blog using reactjs. But this was cool watching and learning. kindly zoom in more, hoping to catch up soon.

[@averywicks6892]

zoom in more.. Got it! Tx for watching.

[@russooneateseven]

It was a great follow along. I like how you stop and talk about what you're going to do before you do it. This gives more context to your actions. The one thing I wish you explained, was the authorization flow you decided to go with. You talked about it very well. But trying to following with Spotify docs, they give four types: Refreshable user authorization: Authorization Code Flow Refreshable user authorization: Authorization Code Flow With Proof Key for Code Exchange (PKCE) Temporary user authorization: Implicit Grant Refreshable app authorization: Client Credentials Flow And it's not clear which one you went with. I saw tid bits of a couple hints between several of them. I think it's very important to understand how to find these things for myself while learning with you. If you could comment here on which one you chose, I'd much appreciate it. Otherwise, great video!

[@velikiy2463]

I chose to use the Spotify API for my university project this semester and I have to say, despite me using Angular, the two tutorials you did about this topic have been absolutely life saving man. Thank you, keep grinding and good luck! Subscribed!

[@averywicks6892]

Great feeling know that this video was helpful to you!! Tx for subscribing and commenting!

[@beatlesbob74120]

Hi I'm sorry to ask but I've some trouble to use with Angular can u explain how you do your httprequest for authorization

[@velikiy2463]

@@beatlesbob74120 Hey! It's no problem, it took me a while to get it right too haha:) Here is the code for my HttpOptions variable, which I put as the last input variable in my post request: const getTokenHttpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret) }), }. Let me know if this helps! Good luck!:)

[@beatlesbob74120]

@@velikiy2463 Ty very much but about data you put it like this : data ={ "grant_type": "client_credentials" } getToken(){ return this.http.post(this.token_url,this.data,{headers:this.header}) }

[@velikiy2463]

@@beatlesbob74120 For my data I put it like this: return this.http.post(this.tokenUrl, 'grant_type=client_credentials', getTokenHttpOptions); My way worked, I can't say if yours will.

[@ghgoodreau-old]

Love the tutorial. Do you know where I can set scopes? For instance, for reading the authenticated user's top tracks.

[@lavizpandey9957]

Good one!!

[@juanmartin3404]

bro you are amaizing

[@kaylasmart]

You're my new favorite on YT. Periot.

[@averywicks6892]

Ha! Really appreciate it. Thx for watching the videos. More coming soon!

[@charlibiris]

Hey great vid! Subscribed!

[@averywicks6892]

Tx buddy! Appreciate the feedback and subscription!

[@ronnynestares3831]

I mean that to get the toke and then use it in the endpoints I have to do it in node or could I create a service, as in angular and there do all that stuff?

[@Roxdayz]

i'm so great i found this!!! i have one question: how did you know how to get the token? i've read the docs and it says to create a server with node to get an access token.

[@BobbyBundlez]

Yeah this tutorial really doesn't explain shit tbh

[@camilaparadavalderrama6166]

Hi Avery! Quick question, I did the first token post request with fetch but with the same information and it returned a 400 error due to cors I believe. I did the same thing but with axios and it worked. Do you happen to know why? Thank you and great video!

[@purradin]

Yes... Great content. Just the kind of teacher I have been looking for. Only real note I have is zoom in a bit more on your code. Otherwise good job.

[@averywicks6892]

Noted! Zoom in more :) Thx for the feedback!

[@notsure180]

It is good to teach the functional components anyways, for the class components - although supported now - will not be supported in the future (from what I read in 2022). I am struggling with the Spotify API a bit right now lol, but I got other APIs to work properly. Even with a similar approach to what I did to my other functioning API calls. I think it is because of the redirect uris involved in these APIs, but it may be a server issue that I mistakingly overlooked. Good video!

[@notsure180]

I could get raw HTML from an express server, but rendering a full HTML page (with html that is not in a body tag) has proved to be somewhat of a challenge to me. I am a React newbie though.

[@rdubb77]

Thank you! This totally made me get functional components and hooks. One bit of advice, speak a little bit slower and enunciate a bit more. You said so many important things that became comments in my code, but I had to listen a number of times in places so I could transcribe clearly what you said.

[@averywicks6892]

Will do thx for watching.

[@StefanoBallad]

Min 18:37 -> "Breakfast At Tiffany's", one of my fav songs! 😀

[@user-fj8uy8io8s]

This might be what I have been looking for. Let me see if it works. I will come back and give a proper review. PS: I am using typescript

[@taofiqcodes4303]

Hi Avery thank you for thos great video really appreciate. Dont know if you have any tutorial on API calling and outputting and where to get free API resource

[@coreyjordan2341]

Man, I hope you see this. I'm working on a capstone for my bootcamp and I want to make something similar to this, but using a specific podcast and seeing categories of their episodes. is that possibe?

[@joseluissanchezortiz3599]

excelent friend. I get a question: what softw do you use to show the explication with animation? thank you

[@averywicks6892]

Thx for watching! Feel free to share the channel!. I use Adobe After Effects and Adobe Premiere for all my animations. Hope that answers your question. The animations are custom.

[@GSTA24]

Great video, really appreciate the time you took to make it, along with all the animated graphics! Question; after you lifted all your state up into app.js it started to get more complex, and imagine if your application grows with a search box or track scrubbing for playing music etc... I assume the logical next step would be to make components to contain pieces of the state and functionality, app.js then only needs to hold *shared state* between different containing components? (Hope that made sense.) Code review; you destructure an array into an array: const tracks = [...someTracksToPlay] This would be the same as const tracks = someTracksToPlay If you want to make a copy of the original array, there is the Array.copyWithin method as well, food for thought. Also you use promises with .then in your useEffects - maybe you should explain why you're not using async/await because react doesn't let you 😊

[@averywicks6892]

This is the best feedback! Thx ! Yes, I could have the child components contain individual state. Before that, I would probably attempt to refactor the app component. For example, I could've created a custom hook to handle my http api calls. That would simplify my app component as well. Regarding, "destructuring an array into an array", that's a great catch LOL. At the time, "destructuring" was probably running through my head that I didn't consider using a simpler method LOL. Also, regarding "explaining use of .then", I'll make sure to mention that next time. Tx for watching and providing detailed feedback!

[@GSTA24]

@@averywicks6892 yeah that's exactly what I mean - I'm at a stage right now where refactoring app.js is more difficult than it should be because I told myself not to lift up all the state and now it's all over the place 😅 Anyway subscribed 👍

[@averywicks6892]

@@GSTA24 Life of programmer right. Tx for the subscription LOL

[@cartman78manolo]

nice one mate! Do you went trough Spotify documentation or you got the inspiration from other source? Thanks.

[@averywicks6892]

I actually did end up going through Spotify's documentation! Thx for watching! Really appreciate it!

[@Dawmazing]

U the goat bro

[@averywicks6892]

LOL. Appreciate it bro! Tx for watching the video. Feel free to share!

[@parthsawant9904]

can we also play these songs after adding a play button or so? please answer!

[@TheIDMovement1]

Dope content

[@averywicks6892]

Thx buddy!

[@moreCowBell1001]

Nice write up and video! I wanted to test the code on github. I noticed there is no 'package.json' file, only a 'package-lock.json'. I am unable to use the command 'npm start'. Any help would be great. Thanks.

[@averywicks6892]

Just added a package.json file for you! Tx for watching the video!!

[@madisonevans1777]

I seem to be getting a 400 error 'ERR_BAD_REQUEST' that I can't seem to solve. Any suggestions?

[@ddhan288]

how to add voice command features?

[@yanathelama1]

I may have missed this, but are you hard-coding your own clientID information for this to work? How would you instead generate the login screen for any user to get this information?

[@averywicks6892]

Yes. I'm hard coding my client Id in my credentials.js file. Not ideal, but I took that approach with this tutorial. I believe you'd have to use a different authorization method in order to generate the login screen. I'd check out Spotify's other authorization flows. developer.spotify.com/documentation/general/guides/authorization-guide/ hope this helps!

[@JC-fd8ho]

how did u know how to use the spotify Api i went to the Docs and i got lost there i don't know what to do Exactly

[@_rizkypm]

Its nice, but you should zoom on your vscode, beacuse its too small to see

[@christophergonzalez553]

I'm confused on how exactly you changed the app styling you weren't very specific at all on how you used the mockflow design in the react app (other than copy and pasting old code) Edit: it seems that the styling is bootstrap stuff, which I understand is a whole other tutorial, I also followed the javascript tutorial and All in all this was a really good tutorial, thank you very so much!

[@benjaminikwuagwu6469]

Great tutorial! Can I use the same code with few changes for react native?

[@averywicks6892]

Appreciate the feedback. Honestly, I haven't dived into React Native, so I'm not sure LOL.

[@benjaminikwuagwu6469]

@@averywicks6892Ok, thanks. I really need a tutorial on Spotify and React Native integration

[@benjaminikwuagwu6469]

@@averywicks6892Ok, thanks. I really need a tutorial on Spotify and React Native integration

[@pranitabhagat5496]

Do I need to have Spotify premium account to build this clone?

[@BobbyBundlez]

how come in the last tutorial it is body:'grant_type=client_credentials' and in this its data:'grant_type=client_credentials' also WHERE in the docs is this stated? i am trying to move beyond watching tutorials and i honestly have no idea how you would figure this out lol

[@JordanAF808]

Great video, can you do KZbin API? Thanks!

[@averywicks6892]

Appreciate the feedback! I'll see what I can cook up :)

[@danieldavison531]

I'm struggling to get my top artists, it looks like i have to authenticate a different way but i can't seem to figure it out...

[@Peterru5]

You have to choose another authorization flow. Authorization Code or Authorization Code with PKCE . developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-flows

[@Aks-47]

Wait so you can play songs on this app now???!!!

[@BobbyBundlez]

while this is a really great tutorial i am trying to get past beginner web dev ... ive been coding almost a year and a half now :( and still feel like im stuck in video tutorial hell when it comes to accessing API that are a literally more sophisticated like this. i read over the documentation and i STILL don't see how you would be able to figure out any of this axios request by just reading the docs. can anyone help me? i really have no idea how to learn this stuff anymore byeond just following youtube videos. i want to be able to read documentation and set up the headers, params, etc on my own.

[@zayan0013]

At the 8:00 min mark... I was so disappointed. Good one.

[@rajatgarg5058]

What if i want to play the song

[@parthsawant9904]

did you get the answer? how to actually play the song??

[@mati124]

much appreciated but it is incomplete. No security

[@BobbyBundlez]

how tf can u guys read his code?

[@BobbyBundlez]

we all just gonna pretend no one got the CORS error? k

[@frogga2935]

nerd