How To Build A Better Spotify With React

🚨 IMPORTANT:
Tabnine: www.tabnine.com/now?...
Spotify is pretty cool, but what if you could make a better version? In this video I show you how to create a Spotify clone that not only has many of Spotify's features but also includes lyric lookup for any song you want.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/s...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:25 - Demo/Setup
03:52 - Authorization Setup
10:26 - Server Login Route
15:28 - useAuth Hook
23:39 - Refresh Token Automatically
33:07 - Search
46:58 - Song Player
52:18 - Lyrics
#SpotifyClone #WDS #ReactJs

[@beinyourguard]

Me: How do I center this div Kyle: OK check this out Imma create Spotify

[@xVecna]

lool

[@icetarrantula]

lmao

[@radudobos1649]

It's an interface for Spotify's API :D

[@developerGRohit]

epicc lmao

[@razzidaroc]

i usually center a div with margin-left:250px

[@mykalimba]

9:25 "...I accidentally put 'bootstrap' in here one too many times..." Actually, it was the Tabnine plugin that did that. 🤔

[@hiranmoyghosh6959]

Dude has hair line, jaw line, guitar and also his own spotify

[@CodingNuggets]

Awesome video Kyle. Always love when I see excellent content. You have really grown something special with your channel. Much love and respect my friend!

[@Aivin]

2:15 "give your name an app" 😂😂😂

[@casseroletray]

I really like these clone-project videos since it encourages me to do so much research on my own for certain details you left out explanation for, since they are more intended to present an overall idea of how a web app can be developed rather than teaching every detail. Thanks Kyle!

[@linkVSganandorf]

for those who are struggling with this project I wanna say this video does work however you need to slightly modify the code using the new spotify docs other than that this tutorial does still work (though i switched from using axios to node fetch instead cuz axios gave me errs following this vid) you just need to kinda update it yourself i guess is what im tryna get at

[@ladysyn89]

Thank you so much for this video! This is exactly what I needed. I love your channel!

[@harikajayanthi6357]

Thank you very much for uploading the complete code of a fully functional music player! It was of really great help in our college project.

[@ygvanz]

Excellent video! Would love to see more tutorials that use authentication in the near future

[@DShazin]

Kyle, I can't express how much I appreciate your channel. Your content is everything I would ask for

[@oni_ricat]

For anyone doing this tutorial in April 2022: I kept failing to authorize because when I clicked ´Log in to Spotify´ the component was being rendered twice, sending the request in the useAuth hook twice, one of them failing. This was easily solved by downgrading to React 17 instead of React 18 which was the one used by default when using create-react-app.

[@Taslimism]

Its actually due to Strictmode. Strictmode runs twice in dev environment to check for errors. Removing strict mode would have made it work in React18 too.

[@bryanbenjumea1203]

@@Taslimism This helped me a lot! I was not sure how to solve this issue without downgrading. Thank you!

[@oni_ricat]

@@Taslimism awesome thanks!

[@victoraunon6417]

@@Taslimism Thanks!!

[@gopinathkrm58]

I also faced the same issue, after removing the strict mode, it is working fine. Thanks

[@sofiaarr_]

This video is incredible! Just what I was needing for my app

[@vinayKumar-ot3ic]

I didn't see the video but I know how great and depth your videos are.Thanks a lot

[@NguyenHuy-pj4qj]

What a treasure on youtube! I appreciate your instructions. send lots of love from Vietnam. Keep it up Sir!

[@fejr89]

Great video as always. I have some 2 ideas for your next ones. 1 QR/Barcode scanner using chrome api 2 App using electron or similar technology

[@oscar_dl]

Dude, thank you so much for this! I actually made a spotify clone and lyrics + search was exactly what I wanted lol, time to finish!

[@aykutsarac]

I feel lucky to discover your channel, your videos are amazing

[@OleksandrDanylchenko2k]

Thanks for such a great lesson. Got some interesting insights about auth handling and canceling of requests

[@jairodavemejia4057]

This is just pure passion of craft. Wish I was just as fast at learning/solving issues like on your videos :)

[@epilpstd1]

He prepares the content of these videos beforehand man. It sounds like he is just creating this on the fly but Im sure he puts in hours of work in preperation and in editing afterwards. Im sure he gets stuck on things just like us.

[@JyotinderSingh]

KZbin videos are not an accurate representation of how real developer workflows go. Kyle himself made a video about it (iirc it was called "Online tutorials are lying to you" or something like that). He explains how you need to prepare all the content beforehand with all the kinks ironed out to create a great and watchable video. That said, Kyle definitely is an inspiration for all of us :)

[@shivamguglani231]

@@JyotinderSingh noone gonna watch all that long videos

[@andrejvujic]

2:15 give your name an app 🤣

[@barclayiversen376]

I was wondering if anyone else caught that!

[@kapilpisal2892]

I was literally just about to write that in the comments

[@deansprivatearchive]

You beat me

[@avneet12284]

This is so good. The number of things in this vido are just phenomenal.

[@faysal1991]

I was waiting for the env part, thought you forgot it . Thanks :D

[@higorbt2]

56:40

[@MaxTheFireCat]

Thank you so much Kyle! your channel has helped me a lot

[@akhilnegi100]

Just finished with the clone. Thanks Kyle!

[@kasturimeh]

is it working good? is this tutorial good to follow?

[@MrGabrielcaba]

working perfect!!!!! thk so much, u dont know how u help me , now with this tutorial

[@kidbrave_7673]

Hey Web Dev thank you for sending me a newsletter in my emails about this video. I seriously want to work on this project, but I have to be honest with myself and know I'm not quite ready for this project. I just peep out your navbar Slider project and absolutely loved it. I had to replay it at least 5 times to finally see in the css that you turned your css off in your media queries and create a new class with the class that was turned off. Lol I know super simple specially since I been working with css for a few years now, but couldnt see it. Anyway thank you for your amazing content please continue to keep pushing out your content!. I did want to find out if in beginner at javascript should I take your upcoming javascript course?.

[@WebDevSimplified]

I am so glad you have been enjoying my videos. This is a pretty advanced project but eventually you will be ready for it. As for my JS course, I would say you are perfect for it. It is built in a way that an absolute beginner to programming could take the course and learn everything they need to know about JS.

[@kidbrave_7673]

@@WebDevSimplified Thank you Web Dev for getting back with me and letting me know your course is setup for an absolute beginner I'll take a look at it and buy it hoping it's not a ton of money!. Because I can a starving developer looking for his next job right now. 😅 PS: I gotta asked since I'm talking to you is it bad having me rebuild your projects if I saw a project and I rebuilt it multiply times to understand the logic and concept to be able to rebuild that project so I can carry that feature/knowledge with me towards another project when it comes to js?.

[@WebDevSimplified]

There is nothing wrong with that. It sounds like a great way to learn.

[@kidbrave_7673]

@@WebDevSimplified Ok awesome thank you web dev I really appreciate and value your opinion. 😅🙏🏻🙌🏽

[@nurillosuyunboyev2337]

Thank you so much , I cloned this full in same to your code bro ,:)

[@vladventura1928]

I think that, just as a learning process, I'll make this with Lambda and React Native. Thanks a lot!

[@Carathil]

Hey Kyle, I have a tutorial idea. I see teachers randomly installing a bunch of things mid-tutorial, like express, nodemon, etc and as a beginner it's hard to see why. It's understandable that you don't explain these in depth right then and there (interrupts the flow of tutorial), but maybe at the very end of the video you could go back to these installed things and explain them with the full code, why did we use this extension, why did we use that other thing we installed. Great video! Keep up the good work and teach us master :)

[@alasdairmacintyre9383]

If you're a beginner and don't know why they are installing the extensions, you're probably just not ready for the video. You need to take a step back and learn the basics of the tools before jumping into a big project that implements the tools

[@TygerTyger911]

@@alasdairmacintyre9383 You'd make a horrible instructor. Heaven forbid this tutorial for beginners actually accommodates beginners.

[@alasdairmacintyre9383]

@@TygerTyger911 lmao there are thousands of other beginner friendly videos on youtube. If you're a beginner, building a spotify clone is probably not the most productive thing. Better to learn the small things first and work on more fundamental projects than to overwhelm yourself with a project full of things you don't understand. That's like getting mad at an advanced math video for not being beginner friendly. If you can't do long division it ain't for you chief

[@TygerTyger911]

@@alasdairmacintyre9383 Oh wow, not a cringe worthy and wholly disingenuous "lmao." Come now; surely you know better than that in 2021? Regardless of whether or not you're aware of your lack of social graces, gatekeeping is even more gauche than faux humor, "chief." Run along now.

[@alasdairmacintyre9383]

@@TygerTyger911 I mean I'm not sure if advocating against getting in over your head is gatekeeping but sure bud. Lay off the salt

[@feign.8468]

Really nice tutorial!

[@TheEpicMineCrafter13]

2:14 "Give your name an app" - Web Dev Simplified 2021 Love the video though

[@sardorbekomonkulov6379]

Nice catch

[@jmdatul]

Very well designed my friend.

[@valaris31796]

Great work, thanks ! But you should have said at the beginning of the video that we need a premium spotify account for it to work.

[@CottidaeSEA]

Isn't pretty much the entire API locked behind Premium?

[@umangkhandelwal4203]

Expected to learn more about handling states and profile management, settings etc! This was more like a tutorial on how to use spotify APIs

[@amarsinghcheema2911]

Great tutorial! I am new to full stack dev but does this actually follow the authorization code flow? should the access token be passed to the front end via the useEffect axios calls? Is it safe or does this not matter? Would appreciate any feedback. Anyway thanks for the tutorial and keep up the good work!

[@diroshow]

hi, great video! I still have a very important question. If we host our application which uses the Spotify API on a Vercel for example, we won't have any legal problems?

[@_randomyoutubeuser]

Thanks, Kyle!

[@danieljayne8623]

Great video!

[@digigoliath]

Awesome!!! TQVM!!

[@res3064]

Kyle: Build amazing spotify clone on react CP: Write that down write that down!!!!

[@shubhamh7451]

lol, and still only make a basic layout. I believe he did not make it functional right?

[@Asli_]

can you please elaborate on the use of setInterval instead of setTimeout for refresh token ?

[@h.screation2817]

Superb work sir thank you sir🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@augustineri93]

You can debounce the onChange event of the input that updates the state (x)ms e.g 500ms after the user has stopped typing. That way you wont send requests to the node server on every keystroke, only one request 500ms after the user stops typing. If you couple debouncing on the client-side and cancelling requests on the server-side, that would make it 2x more efficient

[@moulyaramesh6069]

Hey Ricardo, Can you show the code snippet please,

[@codewithyug1129]

Hey Kyle, awesome build. I have a question though. Why was I 🚫 banned from the discord server when I didn't violate any rules or use any wrong language?

[@abhaytiwari6411]

Nice video Man and I am Waiting for more React js video

[@YuriiKratser]

Thank you! You are interesting.

[@rajeshprasadh3717]

thank you kyle !

[@mlevins2973]

after about 4 hours of "coding along" i caught myself at the 18 min mark, copying the server script without even understanding what its doing... sometimes the most useful thing a tutorial can teach you is that you need to come back after another few months

[@hamidmohamadi2943]

Awesome Kyle, I liked you bro

[@JMRVRGS]

This is exactly my idea to do after watching your video titled "You Will Never Become A Programmer Unless You Do This".

[@Shomi_brat]

Man this hour went too fast... I need to watch this again with some coffee in my system. Thank you Mr. Kyle,great video.

[@cs1763]

Ok I just gave up on this project cuz I can't get my code working past the 25:00-27:00 mark because everytime I click on the "login with spotify" button it shows me the next page for like 2 seconds then redirects me back to the login page. Anyone else experiencing this? Please help Edit: To be more specific, I keep getting a 400 bad request error for '/login' on both my client and server consoles

[@AyanChatterjeeYudodis]

Same issue

[@AyanChatterjeeYudodis]

Have you got any solution

[@abelardpangalila1827]

maybe your spotify acoount must be premium

[@duartevader]

Hey man, did you find a solution? Having the same issue

[@duartevader]

Ok, so I actually solved it. I changed the URI in spotify dashboard settings and forgot to change it in the AUTH_URL in login.js So, make sure every reference to a url in your code is the correct one

[@364679493]

ty so much!

[@jonnieoak2176]

give this man an hour and he can make a clone of anything

[@bafana_mhlamvu]

Batman of coding?

[@JC-fd8ho]

do i need node js to use the Spotify APi i tried to use the Built in Fetch method in the Browser to send a request and it failed pretty much when i used Axios i got the Access Token without Any Problems does that has to do with axios using node js to send requests?

[@hope2251]

Spotify Web Player: This functionality is restricted to premium users only

[@gregroyclark]

Hey there, friends! I finally got the app working. It was just a few little mistakes on my end. Please feel free to ask your questions in a reply, I'd love to discuss & check out your code and help get it working for you! Currently, the last thing I need to do is publish to Heroku. Wrestling with that now.

[@quietcalm7299]

Hey Greg - I am interested in tips on publishing this to Heroku - did you manage to get it up there?

[@gregroyclark]

@@quietcalm7299 I'm still struggling with that part! I know it has to be some issue with my routing, or some aspect of the authentication process that I'm not translating from development to production.

[@rysestar]

Hey Greg were you able to ever host this?

[@izzakhan10]

I'm getting an "Authorization code expired" / "invalid_grant" error, any idea how to fix it?

[@cytical968]

@@izzakhan10 Were you able to deploy it?

[@yhlu4426]

May you explain why you use "setInterval function", thanks

[@thechinpull4973]

Thanks man

[@sohamjanagave20]

Very nice Kyle sir

[@tomasvrana8940]

Hi i just want ask if you need a spotify premium to be able to play full songs from spotify or not??

[@garetht.542]

You need Spotify premium account if not the player won't load, according to the errors I'm getting in the response from the spotify web player

[@ArrowsInTheDark]

Yep, getting the same error: Unhandled Rejection (WebapiPlayerError): An error occurred while communicating with Spotify's Web API. Details: Player command failed: Premium required PREMIUM_REQUIRED.

[@TheGex]

Hi Kyle, hope you're doing well. I just followed the tutorial and also downloaded the source code and it gives me an 403 error in both cases. I don't really know why. Tried disabling adBlocker and in different browsers but it stills doesn't work. Any ideas what could be happening?

[@Echo737]

Same error

[@raghavsehgal25]

Do you have Spotify premium account?

[@TheGex]

@@raghavsehgal25 yeah why?. May that be causing the problem??

[@TheGex]

So i tried with another account (no premium) and it still doesn´t work.

[@hectorg362]

Can you do more of these? I benefit a lot from building apps like these?

[@aguswibawa7355]

damn I love this guy, explanation full and clear, easy to understand and I respect what it takes to make this expensive knowledge broo, you deserve success and that looks to haha, auto subs

[@leixie9932]

I also got the error about Player. {"error_type":"INVALID_LICENSE","message":"Device registration is not allowed: premium_only_device","error_code":9}. Shall I take premium to solve this issue?

[@AmruteshArun]

yes it worked for me after i bought premium

[@tomershitrit8638]

I love your taste in music man

[@WebDevSimplified]

Thanks. I love your profile pic as well. Can't go wrong with Avenged Sevenfold.

[@sproott1498]

@@WebDevSimplified Man, didn't expect you to know Ne Obliviscaris. That's awesome! Love the videos btw, keep it up!

[@Plaguebob]

@@sproott1498 I honestly thought it was one of my own windows that popped up at the beginning when he typed Ne Obliviscaris.

[@forcowicz5830]

The KZbinr for which I reload to actually see an ad.

[@mrnabby4178]

Boy this is what i wanted

[@user-uu8gh6le8e]

how does the returning the cleartimeout function stops the execution of previously set function incase refresh_token changes ? can someone explain ? its hard to understand since there are no if else statements are used.

[@mohitsaud2071]

Another good video

[@tanvirashraf728]

Kyle, do have any plan to build a react - redux course soon?

[@LUC-M]

What is you keyboard?? Nice gentle sounds :)

[@sphoortipatil5074]

Is Spotify Player's audio only audible for first 10 seconds? When I tried using it I colud only hear songs for the first 10 seconds and then the audio muted wheras the music indicator indicated the song was playing..

[@omarhassan2548]

That's super cool bro....

[@tuts351]

I love this channel

[@sacredgeometry]

This isn't "how to make a better Spotify". This is "how to write a stripped down UI with the Spotify API"

[@daheck81]

but clicks 💰

[@manoj.k.m4302]

Well the ui is easy.the backend is what he is trying to explain.

[@sacredgeometry]

@@manoj.k.m4302 Talking to an API is easy so is writing a UI. The BE side is the only thing that is remotely interesting and he doesnt even go into it. As I said there are plenty of good long form videos that do now. This video is useless. It equates to "how do you build a form in react" with some click bait in the title. There are so many of these useless videos on the internet, we dont need more of them.

[@manoj.k.m4302]

@@sacredgeometry well I am new to apis

[@syedhussam2452]

@@sacredgeometry there is a lot to learn from this video. Stop hating on people for teaching, you stupid.

[@teonprudent4016]

What plugin are you using to autocomplete the react code?

[@amitpatel6763]

tabnine extension

[@JS_Jordan]

I started learning react a month ago, I hope one day I can be on your level. Baby steps 😂

[@JS_Jordan]

2 month update: I still probably cant clone spotify, but I am so much better than where I was 2 months ago. I can confidently build out basic web3 websites! Just stick at it, love it, and be a sponge

[@harshitanaik5075]

@@JS_Jordan Any updates????

[@JS_Jordan]

@@harshitanaik5075 I'm employed full time as a web dev! I can build full stack applications and I'm definitely capable of cloning Spotify! The last few months I've been learning more about servers & databases and security. I've made mistakes along the way and I'm still navigating through the rabbit hole. Thank you for reminding me I posted this comment. I feel very proud of myself that I'm writing this!

[@harshitanaik5075]

@@JS_Jordan Thank you so much for the reply. I am also working on becoming a front-end dev but building this clone to learn about backend tech. Your message gives me hope that eventually I will do it someday. Really happy to receive your comment mate. By the way are you self-taught?

[@JS_Jordan]

@@harshitanaik5075 no problem I’m happy to share :) yeah I’m self taught I’d recommend an online course in a niche you’re interested in. For me it was threejs, I did Bruno simons course. Don’t skip the boring stuff like security. Follow trends so you’re learning while doing stuff that’s actually relevant (makes you more hireable). Chat GPT is also good but don’t just ask it for code, use it like you would use a grammar checker, asking how to optimise your code and don’t believe everything it says. In the future I would like to complete a degree in computer science. I feel like I’m missing a lot of the foundations because there has been no structure to how I’ve learned things. I hope this helps, everyone learns different. the most important thing is to just jump in

[@timber1390]

thank you

[@_maizon]

You saved my life

[@ThatGuyJamal]

Get great video! Im wondering if there's something wrong with the github code? When I tried to run it it tries to redirect me but I'm stuck on the login screen.

[@gregroyclark]

I had the same problem. I cannot for the life of me figure out what the issue is.

[@ThatGuyJamal]

@@gregroyclarkhey Greg, im both glad and sad that we both have this problem. Its not just me, I hope someone can find the issue, maybe i will make an issue on the github

[@gregclarkreasons]

@@ThatGuyJamal that would be helpful. Something I realized is that the rfc shortcut created arrow functions, which you can't use with hooks. Make sure your components are standard functional components if hooks are involved. That helped a little (got rid of some errors), but I still have the same major problem.

[@ThatGuyJamal]

@@gregclarkreasons oh okay thanks for the tip!

[@olehkulchytskyi1240]

all cool, but there are problems with player package he don`t work correct with react v17, so who have problems with it how do u fix it?

[@devashishsharma3591]

I am getting an error spotify web token player:Invalid Token scopes.Please help

[@herropaul]

Has anyone encountered an error for trying to access the spotify-web-player? Whenever I pass in my access_token to it, I get an error telling me this functionality is restricted to premium users, even though I'm doing all this with a premium account?

[@luismanzanero95]

Ne Obliviscaris \m/ Badass bro!

[@WebDevSimplified]

They are amazing. One of my favorite bands. Their violinist/vocalist Tim is incredible.

[@luismanzanero95]

@@WebDevSimplified Undeniably true! One of my favorites bands to start my coding sessions!

[@Juicyunior]

I have a problem when it comes to deploying the app on a server. How can I achieve that the nodemon server and the react app start at the same time with one script? I can't imagine how to deploy the app otherwise :(

[@thedaynos]

Hi! When I deploy this, what do I do with the server piece we create here?

[@yatiacdev]

I think body parser is now deprecated, you can use ```app.use(express.json())```

[@CannigiaLaluw]

52:00 "Play it, it should hopefully play immediately. And of course, it didn't." 😂 The struggle is real.

[@kozy95]

Kyle do you like Ne Obliviscaris? If so, you just became so much cooler in my book

[@nisugajayawardana9103]

the web-playback-sdk requires premium accounts to playback. Is there any alternative to playback for all Spotify accounts ?

[@johongo]

Can you show us how to build a Cinco-Boy next?

[@giwrgosiwannidis4684]

For some reason I dont get a response on the searchTracks function :(

[@kambing4406]

I didn't know you are allowed to use useEffect many times. Thanks

[@rljspeeltmee5776]

Nice video. But you actually dont need bodyparser. its build in with expressjs. But overall Nice video

[@kubastrawa]

After i deleted reportwebVitals like you said in the video there's a notification when i refresh localhost that it failed to complie because there is no such directory as reportwebVitals.js

[@turglow01]

Can someone explain around 42:42 how the canceling works? I cant seem to wrap my head around why changing the search sets a previous cancel to true

[@cbazcode7288]

The player below does not come out, it seems to me loading is it because I do not use a premium account to obtain the token? I would appreciate if you could answer me

[@mikhaelesa7936]

Yeah the same thing happened to me. Have you found the solution?

[@cbazcode7288]

@@mikhaelesa7936 I can read in a post that we need a premium account for use this component :c

[@jeswinjoseph1726]

I got everything working till the player , songs are also playing but the lyrics are not being displayed , i tried different songs (new as well as old) but the lyrics won't show....., any solutions ???