Spotify Clone with NextJS - Tailwind CSS - NextJS Middleware - NextAuth - Spotify API

hey everyone my name is apoor and today uh we are going to be building this 45 clone right this is built using next day as Tailwind um next auth for the authentication and Spotify API because as you can see all of the data inside this clone is actually from Spotify so these are like the featured playlists you can actually search for anything and it's going to show you top tracks um like top result over here artists um playlists all of that good stuff and you can actually uh open up these playlists and sort of go through scroll through all of these songs you also have a list of your own playlists right so these are my accents playlists within uh my Spotify account and I can actually open them up and play these songs as well the player has like a play and pause button and you can basically um play all of these songs we also have like as you can see we have all the artists for each song listed down over here and if you click on any of these you actually open up the artist page right and um the artist page consists of their top tracks like their most popular songs and related artists right so this is all that we are going to be building um and lastly all of this is because all of this is actually connected to your Spotify account um it's actually working with um a login with Spotify functionality right so if we log out over here you can see that we can log in with Spotify all right I'm gonna style this button up but um I'm already logged into my Spotify account over here in this browser which is why it's gonna remember me and I log me back in but if not it's gonna redirect you to this Spotify login page and ask you to enter your credentials after that you're gonna get redirected back to here where you can interact with this Spotify clone play your songs and do everything right so let's get started um something I want to talk about over here as I set things up is I wanna basically um the way I'm gonna be doing this it's not gonna be a smoothly typed like coding video I'm gonna actually show you the process of finding out um stuff from Google finding out um things from documentations and actually uh picking up the relevant portions pasting them in your code tweaking it to make it work for your project all of that real world stuff right so it's gonna be exactly like a real world project to start off I'm gonna be I'm gonna go into my terminal over here in my vs code what I'm going to do is create a new Next app right so I'm going to do it with um this command npx create next app with the Tailwind flag over here and what I'm going to do is I'll just say something like um Spotify too right and I'm gonna press enter we are not going to be using typescript for this one um and we're gonna leave everything else default and while they're just going to give this like one minute to set itself up all right and now what we can do is actually go into this directory right and I'm actually just gonna go ahead and open this in my vs code right so as you can see we have the typical next year's starter project over here right we have the Pages directory and the API directory inside of it this will contain all four apis right and all of this is gonna be um out of our UI we also have like a styles for a public folder and because we use the Tailwind flag while creating this project we have a Tailwind config already in place right so typically if you do not use the Tailwind flag you would have to set this up yourself but next create next app provides this convenient functionality right so we have everything set up what I'm just gonna do is open up index.js right so this is the starting point this is what shows up when you open up your apps URL and I'm just gonna show that to you by running npm runtime right so now our um our next app is um hosted at localhost 3000 so I'm going to go back over here and as you can see this is the like the starter um page that next.js gives you if you create a project like this right it even gives you like um a sort of header and like links to some docs but we are not really gonna using any of this so the first thing that I'm gonna do over here is get rid of pretty much all of this right awesome now uh I'll even get rid of these classes because we're going to be putting in our own classes and I'm just gonna delete all of this right so now we have like a blank page which is a good starting point for us right now um before we get started like the first thing that we're going to be implementing is the login with Spotify button right and for that to work you're gonna use something called next auth so I'm just gonna type in next dot over here and it's gonna give you Google is gonna give you this right so next auth is basically one of the most convenient and secure ways of implementing any sort of login with X functionality right so if you go in their documentation you're gonna realize that um you can first of all you can Implement any sort of like oauth um authentication using this but they also have like a bunch of built-in providers and click on this providers section you're gonna see a whole bunch a whole list of um apps that it has built-in providers for right so for example you can Implement login with any of these like you can do a login with Dropbox log in with GitHub login with Instagram login with Pinterest login with Spotify as well that we are going to be using but it has this nice long list of all these providers that you can just use right off the bat and we're gonna be doing just that right first thing we're gonna do is go into this get started section right so um and we're gonna follow the instructions for the most part but we are also going to implement some extra bits right and I'm gonna show you just where we divert away from these instructions but for now we'll follow these things right the first thing they want us to do is npmi next stop right so this is exactly what I'm going to do install next auth and we're just going to give it a second okay um something else I'm gonna be using is um node effects right because we're gonna be interacting with a lot of apis and if you I like how the fetch API works right the browser fetch API if you want to do that on the back end you're gonna need this package right there are a bunch of alternative ways of doing this but I really like the way fetch API Works which is why I like using this package node fetch over here so I'm just gonna install this as well right I'm gonna go back to our instructions so the first thing that you want to do is create a file called and there's gonna be placed inside Pages API auth so what I'm going to do is go over here create a folder called auth and then I'm going to create a file with the exact same name right next I'm just gonna copy this starter snippet over here and paste it right and we're gonna start changing some things from here on so first up we don't need the GitHub provider instead we need the Spotify provider right so I'm just gonna change this to Spotify provider right I'm gonna change this to Spotify provider as well and as you can see it takes in like two values one of them is a client ID and the other one is a client secret right where do these come from so there's like um say if you if you sort of scroll down below you're gonna get instructions for this but what I'm gonna do just right away is is basically sort of speed that process up so what you want to do and this is gonna be like a there's gonna be a similar process if you're implementing any other login with something functionality right if you're implementing login with Google it's going to be somewhat similar but what you want to do is go on to the developer dot spotify.com dashboard all right so this I'm already logged in from my Spotify account if you're not logged in you're gonna be asked to login but once you're done with that you're gonna arrive at this dashboard right and over here you will be asked to create an app right so you're probably not going to be seeing anything over here I've already created like three different apps for testing the API out but you'll probably see an empty list over here which you can do is just go over here and say 452 right then add any app name and description I'm just going to say educational qualify clue right and over here I'm gonna add localhost 3000 right this is going to be at least during the development process this is going to be my URL right once you deploy this like once you're done developing this I'm gonna show you how to deploy this to version and at that point You're Gonna Change this to the Versa um URL if you have a domain in mind you can actually change this to that domain as well there's another thing that you're going to need and and that is going to be a redirect URL and if you're using next dot right you're gonna be you're gonna be appending like whatever your base URL is you're going to be appending slash API auth slacks callback and then the provider name over here right and we're gonna see where all of this is coming from but for the moment I'm just gonna click um I agree with terms and conditions and click save all right so now you're here and we basically have this dashboard for the app that we created now I want to go into settings and over here you see that we have this client ID so what I'm going to do is copy this client ID and go back to my code and uh what we want to do as as is suggested by the template code as well is we want to put these values inside an environment file right um so I'm going to go over here create a new file called dot Envy dot local right now I'm gonna say Spotify client ID paste in this value right let's close this pop-up go back over here now um there's also this little button over here that says view client secret now this is an educational build and I don't really care about my client secret being publicly visible right but in your app you would never want your client secret to be visible anywhere right which is why they sort of like they don't show it to you right away you have to click over here and then it becomes visible right and I'm gonna copy this up and paste it over here keep in mind that when you're working on like production ready apps you're going to want to keep your secret um actually secret right like you don't want it to be visible anywhere you definitely don't want this to be committed to GitHub which is something already being taken care of by the dot getting node file I'm gonna paste my secret over here now I'm gonna go back over here right so um there's like a bunch of things that we are gonna need on top of this but we're gonna get to that in just a minute so I'm gonna save this file now right and we can go over here and we can say hey this is my Spotify client ID and this is my Spotify secret right and we are going to be adding another parameter over here called um authorization right and the reason we are adding this is because it allows us to um configure the permissions that we are going to be asking our users for when they log in through Spotify so the moment you log in through your Spotify account it's gonna show you a pop-up that says hey um this app is asking for permissions to be able to view your playlist view your email address um change your playback state things like that right and there are there's gonna be like a large agree button over there that the user will have to click right now the permissions that we are going to be asking for are um basically gonna be defined over here all right um and we can we're basically going to be adding the list of those permissions within the login URL right now how this is going to work is um for like the actual list of Scopes what what I'm going to do is instead of like um typing them out one by one because we already have like a print available I'm just gonna go over here in my build go over to auth um next stop right and I'm gonna copy this right okay so what I'm doing over here is this is basically just a list of strings that we need um uh that that represent the permissions that we are asking our users for where do I get these strings from well if you sort of go into the Spotify API documentation and if you click on any of the endpoints right for example get um let's say we're gonna go to get current users playlist right it's gonna tell you it's gonna give you this pop-up and it says authorization Scopes and it's going to give you a string right so if you want to hit this end point if you want to fetch the user's playlist you're gonna need permissions for this scope right and because I've already been using a bunch of these API endpoints I already have this list ready with me but you could also add them one by one as you start using each of these endpoints right so we're over here we're basically asking our user for re for their email address which is pretty standard we're asking permission to read their public and private playlists we are also asking permission to read whatever they are currently playing in their Spotify and the ability to play and pause songs for them right um so this is all we need right and now what I'm gonna do is basically um I create this object over here and the reason we are doing this is because we're gonna be um creating our login URL using these params right and the way that works um so we can actually I'm actually going to show you where all of this is coming from right so what you can do is you can go to um getting started over here right and if I sort of let me just look a little bit for something called um or right authorization code okay right so what what's going to happen over here is we need so this is sort of an example of what what the login uh URL should work like right so you have this this is your base URL so what I'm going to do is add this over here and then uh basically create I'm going to add this over here right um and what this does is it it basically um sort of puts it sort of combines this URL with like all of these Scopes um uh in in like URL friendly manner so that like all of these are like query parameters right um so the query is uh the query that we are particularly interested in is called scope and it's going to have like all of these comma separated all right and this is just like a nice little way of doing of of creating that login URL right so once you're done with this um we're gonna need so we can actually so there's a comment over here that's um that should sort of suggest you hey you can add more providers over here if you want um if you want your users to be able to log in through something else but for now we don't really need this we're gonna go ahead and add some more things to these options right the first thing I'm going to add is called a secret right and this again is gonna come from our environment variables we haven't defined this yet but I'm gonna do it in just a second right so what we want is a variable named JWT secret right and what this is gonna do is um it's gonna so what happens when you log in to your Spotify account is you get back some tokens right these tokens allow you to interact with these Spotify API and shows Spotify that hey we are a verified user right now all what we want to do in our build right over here is we want to basically uh keep the user in a logged in state right if they sort of refresh their tabs or close their tabs or something like that we don't want them to be logged out right we want them to be logged in as is the case with most other apps right in order for us to do that we're gonna have to save the access tokens the refresh tokens and things like that that we receive after our login inside the browser right and because these tokens are um these tokens are are something that we we shouldn't be saving inside the browser in like the raw format we should be encrypting them because um we don't want any malicious activity to happen uh because someone found out those those tokens from within your browser right what we're gonna do is encrypt all of that information the first saving it within the browser and the way next author does that is by defining [Music] um a JWT secret over here right and what what what this variable should contain is is either is is ideally something really like long and secretive right so I'm just going to use the string right for now I'm gonna go back over here so this is number one the other thing that you're gonna need is um a Pages uh thingy right so a Pages object basically is used when you basically have a different route for your login page right in our case the login is gonna happen from uh Slash login route so which means for example localhost 3000 slash login right and and to indicate that to our next dot we're gonna add this in inside our conflict right um the other really cool thing that we are going to be adding over here is callbacks right now callbacks are um a pretty cool thing I'm gonna explain what happens inside over here in just a second let's go back to the next Dot and see if um we are following through all of the stuff right okay so there's like um there's one step that I missed over here that I'm just gonna do say um as I mentioned when you log in through Spotify you're gonna receive some access tokens right and we're gonna need those access tokens inside our front-end code to interact with the Spotify API right in order for that to work we're gonna have two two things one is wrapping our entire front-end code within this session provider right so what I'm gonna do is copy this go to pages slash underscore app.js and over here what I'm gonna do is basically replace all of this with the code that have given us right and all it's really doing is basically extracting out this session object from within the page props right and passing it to this session provider right and we're wrapping our entire application like the rest of the application within this session provider what this allows us to do is we can go over here so this is sort of like where we can do this anywhere inside our front end code for now I'm going to demonstrate that over here so what you can really do is you can get the value of the access token or any other piece of information for that matter that we received from the login through a use session Hub now you can import this use session Hook from next dot slash react and you can basically um um sort of extract a session object out of it like this right and now once you've logged in you can actually access your access token by typing something like this right and we're gonna be creating this session object ourselves so don't worry if you're feeling confused you're gonna understand this in just a second but what you need to roll right now is that we've wrapped our entire application inside the session provider it allows us to get the values of access tokens and other important stuff using this use session hook anywhere inside our front end core right so I'm just going to comment these two lines for now right and we're gonna first Implement everything required for this use session hook to work right so let's go back over here and yeah this is exactly what I was talking about right they've written it down nice and clean within their documentation as well right so you're gonna have like this um you're gonna be able to access the user email for example uh by by using the use fashion hook right I'm gonna go down and this is um yeah this is this is something we're not going to be needing right away but we um what we're going to be using is this so this is our um this is the callbacks right within our next dot configuration and this is what I was talking about right like this is where we left off our configuration we are over here and what we want to do is Implement two callback functions right and those three this works is is sort of like this right um let's actually go inside like the let's go inside the callbacks documentation over here right and it's going to show us sorry about that it's going to show us exactly how these two callbacks works all right the documentation is actually pretty neat which is why I'm walking you through all of this so that you understand that hey I'm not writing all of this code um like via memory or by copying it from like like um somewhere else and actually I'm showing you where all of this code is coming from you can actually like uh go through documentation and find all of this out right and um okay so there's the the first one that we're going to be implementing is ctwt callback right now this callback is called whenever a Json web token is created and it's created either at sign in or whenever a session is called inside the client-side code right um so what we're going to be doing over here is like dude they're gonna be dealing with like two different things number one then um the user signs in for the first time this variable right like this object account is gonna have some values in all other cases this this is going to be undefined right like if for example if the user is already signed in and we are like somewhere in our front end code we are trying to access the session object the JWT callback within the JWT contact the account object is going to be undefined right so this is the case of our first um um first sign in right and the other thing that you need to know about Json about um like JWT callback is that the returned value will be encrypted and stored inside a cookie right so we basically what we do over here is you get a token object and we add the access token received over here within the token object right we are also going to add a couple of other things so we're going to do is say account dot refresh and the other thing that we're going to be doing over here is just say account Dot access token expires and we're gonna just say um expires at right how do we know we get these values out of it we can actually check um uh we can actually check what happens when when uh when we do an authentication flow Within These modified documentation right so what happens is you basically um when you request an access token you get the following values right you get an access token you get a token type you get some Scopes you get a refresh token and I'm gonna explain that in just a second right and we basically get um this expires in value all right um so the the main thing that you need to know over here is that every access token has an expiry um date time valued right so an access token is provided at the first sign in right it's going to be valid for some time period typically like an hour and after that that access token is going to expire so you are not going to be able to use the same access token to [Music] um interact with these 45 API in any way right um but we want our users to be logged in um pretty much forever till they decide to log out right so we don't want this access token uh we don't want it expired access token inside our code right and this is where refresh token comes into picture right so what refresh token does is you can actually so Spotify gives you like another endpoint where you can send your refresh token and basically get back a new access token right a new access token that's going to be valid basically for the next one hour as you can see from over here right now um so this is basically what we're going to be dealing with like what we want to do is store the access token and the refresh token and the expiry value um inside the cookie right and for that we are going to be using the awt Callback right so this is like the case where we are first signing in and what we're going to be doing is we will store these values in right and what we'll do over here is um because this callback is going to be so this is just the case where um we can actually what we can do over here is just say return token over here and this um case right here but what's going to happen over here is this is the case where the user is signing in for the first time right in the other cases where the front end code is trying to get the value of an access token right what you want to do is first check if the access token is valid or not if it's not valid if it has expired we wanna refresh the access token and um essentially store the refreshed value back into the browser right so the way you can do that is by simply checking um is by simply comparing like the current date time um with the access token expires and we're going to multiply that by a thousand because this is in milliseconds and if this is less we can literally just return the token as it is right because axis this is the case where access token is as not expired right if it has expired what we want to do is not return the token right now what we want to do is refresh the access token as in the token over here and we're gonna implement this function um in just a bit right so basically this is the case access token has expired and in this case we're just going to refresh the access token and send it back for storage right the other callback that we are interested in is called session callback so session callback actually creates this session object that we access that that we uh sort of access inside our printed code right using the use session okay so what we do over here is pretty simple it also actually like gives you um a decent idea with their their template code comment right over here what you want to do is like send certain properties from the token that you stored over here to the client right for example the access token over here right so it basically says hey take the access token from inside the token object and assign it to session.access token basically it's going to be um and and just return the session object over here right so I'm just gonna keep this as it is um and yeah this is sort of like uh these are like the two callbacks that we are really interested in now what I'm gonna do is um I'm gonna go over here I'm going to Define an async function refresh access token it's gonna take in the token object over here and over here we want to write the code for refreshing access to right um so what I'm going to do over here is go back to these Spotify documentation and over here we were looking earlier at like just requesting um just requesting an access token over here right like and what we can do is that they're also given like a way to request for a refresh access to print right um and over here they've actually given you like an example of how you can do it but we're just gonna write it we're gonna make the same request and and like our own way what we're gonna do is this is the end point that you wanna hit so first up we're gonna say response is await Fetch and over here I'm gonna import fetch from the node fetch package that we installed earlier because this is all happening in the back end this is not happening on client side so you don't actually have the browser's default fetch API with you all right I'm gonna paste this over here foreign this is going to be a post request right it's a method post and we're gonna have some headers over here so I'm just gonna go back and what I'm gonna do is copy this entire header right I'm gonna paste it over here so what this is saying is hey what you want to do and what you wanna um uh what you wanna essentially put inside your header is like this authorization string it's going to consist of um basic plus basically the client ID and the client secret over here and we're gonna just replace this with 45 client ID and process dot EnV Dot modify Secret right and the other thing that you're gonna wanna do is basically send in these two pieces of data and for that what I'm going to do is I'm going to say um plants is new URL search Price Right One start append I'm just gonna add Trend type over here and the current type is basically this right now I'm gonna append refresh token which is token dot refreshed right um because we had actually added token.refresh token over here right so we can get this value over here and over here what I'm gonna do is just say body parts all right so this does half the job now we're gonna say constata is a weight response dot Json and if you sort of look at over here it basically gives you back this right like this is the um this is basically what you get from uh from this request right it's gonna have like a new access token it's gonna have a call of this stuff and what I'm gonna do is I'm going to return something over here right so what we are expecting out of this function is a refreshed access token object so I'm just going to create that object over here I'm going to say hey um access token is going to be data Dot access token right this thing I'm going to say refresh token so this is something that doesn't happen always but sometimes the refresh token gets rotated as well so in that case you actually get back a refresh token if not we'll just add the same value that we that we already had write the other thing that we're gonna need is access token expires and what it's gonna look like is greater now Plus data dot expires in this this has this value right like 3600 seconds which is one hour and we will multiply it with thousand to make it in milliseconds because this gives us um basically it Returns the number of milliseconds right so we're gonna add that over there and this gives us back the refresh token and all this is sort of done right so this is all the configuration that you need from next auth and trust me this is like a really convenient way like a really convenient way of implementing all of the login and all of the authentication functionality over here right now what I'm gonna do next is create the login page we're gonna go to pages and create um login.jsx right I'm going to fill this up with some template code and what we want to do over here is say class name I just want things to look a little bit neat because it's neat which is why I'm gonna add some utility classes from tailored over here right so I'm just gonna say justify Center what this basically means if you're not familiar with Tailwind is Tailwind gives you all of these really really convenient uh utility classes right and you can actually hover over them and see what they represent so if you're adding Flex it's gonna basically add this CSS in to this diff right so it's going to say hey this is this display Flex align item Center justify content center right as you don't really have to write all of those things all of that CSS code by hand you can just use the appropriate utility classes from tailwind and these utility classes are really intuitive by the way so it feels the developer experience is really good when you're writing code with us right what I'm gonna do is create a button say login with Spotify right um and over here what I'm gonna say is we need a sign in function right now where is this coming from so we're going to go back over here to our getting started page and we're gonna go a little bit down right so we've already we're through with this step and we are over here with our login button right and it basically says hey you can import this function right from next Dot so this is exactly what we're gonna do we're gonna get rid of this and this because we don't have a sign out button and we are not using the session object over here right now um over here we need two things one is the provider name and actually shows up like this list over here and you can literally just select Spotify right and what you wanna the other thing that you probably wanna add over here is an object that has um a callback URL right and we're just gonna set the Callback URL to the base URL what this means is once the user is done with their Spotify login you want them to come back to this route inside your app and what that means is they're gonna come back to index.js right so this is this is this is where they're gonna be they're gonna end up in so we are through with these things all right I'm Gonna Save this and we need one other thing right sorry still um we're through to this but the one thing that we haven't added over here is we're gonna need this next auth underscore URL as an environment variable right so I'm just going to copy this over here um this is sort of like the last part of configuring next dot right and I'm going to replace this red just localhost 3000. and uh save this right now we can go to our terminal and run um our project by using the npm render right and we are through this what I want to do over here is close this go back over here and go to the slash login route right over here you can see I log in with Spotify button okay for some reason we don't have like the Tailwind classes getting applied over here but we're gonna get to that in just a second for now I'm going to click this and as you can see it redirects me to accounts.spalify.com right with like all of these Scopes So This Is What Becomes of the login URL that we were trying to use and these Scopes basically fill in the data that is being displayed over here so what this says is hey um this apps Spotify 2 is trying to basically get access to the following it's gonna get access to your email to your name username how many followers you have Etc the content that you're playing playlists you've made etc etc right like you can click agree and it's gonna uh sort of like it's gonna log you in and you're gonna be inside uh you're gonna get back to the Callback URL that we defined over here right the Callback URL was just the base URL so we are over here at index.js which is pretty empty right now but we're gonna change that in just a second right so this is where the magic starts happening all right now that we have logged in what we can do is we can actually use this session object right and we can use this session object to interact with Spotify API uh to get all sorts of data and to play songs and things like that right so what I'm gonna do over here just to show you how this works as I'm going to Define like a state I'm gonna say this is like X um use state I'm going to import this from react let's say this is blank for now right and I'm also gonna Define a use effect right and this is gonna be uh dependent on the session object so and the reason we are doing this is because session object on the first render does not have anything over here so we're gonna go over here and we're going to say if session object and like this is there I want to put our access token inside the state right and what they're gonna do over here is we're just gonna say hey um access token and we're gonna just say X over here right access token access token is not different oh sorry um session dot access token and over here we can see that we have our access token over here and we can use this access token to actually interact with the Spotify API I'm just gonna show you that in just a second before moving on so we're gonna go over here and we're gonna select this one right like get current users playlist so that way this works is first up you're gonna you're gonna have to pick the endpoint that you need so for now I need the playlists right so I'm going to use this endpoint and what I'm gonna do um first up I'm gonna so I really like using async awaits as opposed to like deep then callbacks which is why I do it this way right so I just Define an async function over here put all of this inside and call this function inside user so this is how you use async functions inside us effect by the way but I'm gonna do over here is I'm going to say reconced response is await Fetch and this endpoint okay I'm gonna have to copy this again copy paste and over here we are going to Define some headers right so this is exactly um this is where you need your authorization um this is where you you're gonna need your access token for authorization purposes right so we're gonna Define this header it's going to contain authorization which equals Bearer space and access token right and we're just gonna say data is a weight response dot Json right and now what we're going to do is I'm also going to just store all of this just to show you guys you're not going to be using this code after a minute but I want to show you how how this authentication really benefits us right so I'm just gonna say like playlist set playlist right I'm gonna Define a state which is initialized with like an empty array now I'm gonna say what we're going to go back to spotify's documentation and what we're gonna do is check what the response looks like so if you go over here you can see that the response consists of like these things right it's gonna have like an href limit etc etc but what we're really interested in is items right so items is gonna contain um basically these objects that represent the playlist right so what what I'm gonna do over here is I'm just gonna say set playlist to data dot items right and now what I'm going to do over here is I'm going to put this inside wonder and over here I'm just gonna say playlist dot map so we're gonna iterate over each playlist and uh we're gonna display all the playlist names right so what I'm gonna do is playlist ID because each playlist has an ID over here so we'll just use that for our key here we'll just say playlist dot name right we're going to go back over here and as you can see these are my actual playlists from my Spotify account right we can go over here and you can see these are my playlists over here right this is the actual Spotify app and these are like my actual Spotify playlist and we have actually received all of their data from the Spotify API using this access token right and the way we got this access token was by logging in through Spotify right so this is the magic of next dots this is how the rest of our application is gonna work right okay so now that we are through this what I'm just gonna do is I'm gonna fix uh the CSS first and I think I know what's happening over there because we have this global CSS file and it includes all of the table and stuff and something I I believe I did over here was I um import at the rate tiles Dot Google CSS right we have globals.css file over here uh this one has failed compile okay let me just check for some reason this is not showing up um let me just check what happened over here right okay so we did have this over here right and um and at this point everything was working fine right so what I'm gonna do is I'm gonna go back to next dot over here I'm going to copy this code again and I'm just going to replace this part right go back okay now we have like the Tailwind things applied how do I know that because we can basically just go over here um and for example over here I can say Flex um Flex column right so this sets Flex direction to column and say items enter and give it like a width of 100 right and now you can see like hey this is all centered up right so this is how Tailwind is working and now we are good to go for the rest of the application right um okay okay so now the first thing that we're going to be working with is like the sidebar right so if you look at like the enhancer Spotify web app there's this sidebar and there's like this main content and there's this player at the very bottom right the player is sticky this also remains in place and all of this stuff is scrollable right so this is exactly how we're gonna do it as well and the way I like to do it is to divide this entire UI into this this broader component and then go deeper into each component right the first one that we are going to be picking is the sidebar um okay so we can sort of like Get rid of all of this stuff this was just to show you how we actually get the value of the access token in our front-end code and use it to get some data from the Spotify API right now I'm gonna get rid of this right and I'm gonna do some I'm gonna change this a little bit so what I want over here is width is going to be 100 this is going to be a flex box and we're gonna give it a height of the screen and I'm gonna want overflow to be hidden right and I'm gonna set background to Black right over here um I basically what I want over here is like a Sideburn right that's the first thing and the other thing that I want is um basically like this main section right but this is gonna uh This is Gonna depend this main section is going to depend on where you are so if you are inside the Library it's gonna look like this if you're inside a search it's going to look like this if you're inside a playlist it's gonna look like this right so we're gonna have like this and this inside our main flexbox I'm just gonna delete this and over here what I want is like declare right and this player is gonna have likes sticky positioning we're gonna give it bottom zero and we're gonna give it like a height of 24 uh but it's full and I'm just gonna turn it to some background okay there seems to be one big error somewhere must have one parent element right okay I'm just gonna wrap this entire thing over here I'm gonna go over here and as you can see this is like the um so this is gonna become like the sidebar this is going to be the main area this is going to be the player the one which has like this light extremely light red background right over here it also has this text right now we're gonna build these into separate components right um the way we are going to do that is by going to the um like the root of the uh of the directory and creating a folder called components right now inside components I'm going to create a couple of files one is going to be sidebar Dot jsx the other one is going to be like playlist uh view dot jsx right and it's gonna also have like a player.jsx to start with right now sidebar is exactly what it says it's gonna have like um like a sidewalk component right which is gonna have like everything inside of this cyber right now I'm just gonna add some template codes over here over here as well all right so we are over here and what I want to do first of all is I'm gonna give it like um a specific grids right so I'm gonna basically say like 160 pixels right um and I'm gonna see what I want over here is this main flexbox is I want the sidebar to have like a fixed width and the rest of the content to basically grow into whatever is left of the screen right so I'm gonna give this like a fixed word I'm gonna say row zero shrink 0 right I'm also going to give it like a height of the screen I'm gonna make this scrollable in the y direction right um yes we are through this and I also want to add a couple of other things so I want to save I'll give it a border at the right side um I'm gonna say this one has like like neutral 800 color right um okay yeah the reason we can't see by the way all of this I'm just gonna add side card over here just to just so that we can show right I'm just gonna say um this one has like a light gray text color right so this is here now what I'm gonna do is go back to my index.js file and instead of this sidebar I'm just gonna import the sidebar component that we just coded right so now as you can see it has like a nice um right hand side border over here and like create text over here and we're gonna fill all of this up with like sidebargon right now what I want to do first something I believe I yeah so we're gonna give this like a higher Z index because the player is supposed to be on top of like all of the other content right so this is one thing the other is we're gonna go into sidebar and we're gonna go over here and increase the width by quite a bit transfer just gonna say something like this for now right so this looks pretty okay right now um now we're now that you're over here what I want to do is basically fill this up with a bunch of things right so first of them it's gonna be like a Spotify heading we're gonna replace this with an SVG later on but for now I'm just gonna write Spotify right and I'm also gonna do um a couple other things over here um okay the first one is gonna be I'm gonna make this like a flex box all right I'm gonna give it um some horizontal padding all right I'm gonna give it um some vertical spacing as well right um okay so now that we are over here this is weird yeah now what I want to do um over here is actually add in like a bunch of buttons right like basically there's a bunch of items over here followed by a list of users playlists and we're gonna uh be adding very similar items over here right so for the first set of items are these like a home search and your library over here so we're gonna uh we're gonna be um adding that right but the way but the way we're going to be doing that is by using some icons right like so we have we have these icons over here what we will be using um is something called hero items right so here icons is they're like a beautiful set of icons created by the makers of Tailwind CSS and um we're gonna be so you can actually search for anything over here and you're gonna get like a nice little icon in both solid and outline and you can actually just directly copy the SVG as well as like the jsx over here but in if we what we're gonna do instead is we're gonna basically be um using a package that they have for this right so what what they basically have over here is um they've created this nice little pack package over here right so what you can do is you can basically just run this in your project I'm just gonna stop this npm install video icon slash react right and what this allows us to do is basically import these icons um in a very convenient format and just assign like the event last names over here to um resize it or change the color and things like that right um so once you're over here like you can basically what we're going to be using is this right so we can we're going to be using mostly these icons so the outline icons from this part of the package and sometimes the solid icons and so on right and they've actually given like a full list of Icon names over here just in case you're confused about like which icons to import but for the most part what we're going to be doing um is is we'll just say for example home okay it's not importing it right away but it's gonna do that in just a second right so the first thing that you want to do so I'm just going to do a command F insert for home right so we have like this oh my God right and what we can do is we can do something very similar to this so I'm just going to go on top and I'm gonna say oh my right and I'm gonna import it from the outline packet and now over here I can just say home icon class name I'm gonna give it like um height of four I'm gonna give it a height of five width of five and uh I'm gonna close this out right and what that does is it basically gets the icon as you can see over here we're gonna close this uh for now and gets the gets you the icon right it Imports the icon it puts it over here and it's it's um the color is gonna remain uh as the font color of of like the parent object right which in case is this light gray color right so this is how we we're gonna be able to basically um we're gonna be able to import icons similar to this and use them throughout our application right this also includes the play icon the pause icon like things like that right um all right so um okay so what we are gonna do next is go over here and I'm gonna just start styling some things up right um the main thing that I'm going to do over here um it's going to be this right so let's start over here right what I'm going to do is um I'm gonna just remove this from the picture this as well and I'm gonna start adding some class names over here so I'll just make the subjects box align items center right you cannot give it some horizontal spacing and what I want here I want on Hover I want the color to change the white right and um if we go over here we can see that this starts showing up like this right um now what I'm gonna do is um start putting in some more some more items over here right so the first one is going to be I'm gonna put this inside round p tags all right now I'm gonna actually make this a little bit cleaner right so we have um if you have all of this in place not starts looking a little bit better as well and um okay so what I wanted to first of all is on a copy this and um paste it a couple of times right so the second function that we are interested in is search third one is your library right now what I'm gonna do is over here I want this building library on icon right and as you can see we can very easily import things right so over here what we want is a magnifying class icon we can just import that click save go over here and now we have something that's starting to look a little bit better right now I'm gonna do is I'm gonna add like horizontal line over here um what I'm gonna do for now is just make this invisible so we're gonna deal with it later on and what I want to do next is um basically add some more of these buttons right we're gonna deal with what these buttons do in just a second I just want to lay down these um like these elements first like um the other thing that I just noticed is like the padding scene elevated off what I'm going to do is go over here I'm just going to say here all of this should be padded with like five right now it looks a little bit better right uh you know I'm gonna do what I'm gonna do as go over here I'm gonna say Okay I want this button to say create playlist right and this one should be like this plus the Oracle icon right and I wanna copy paste this over here and just see this one should have like a part icon right and it's gonna say liked songs right now this is pretty cool um what I want to do next is basically place on this and here I'm just gonna say neutral like 900 right I'm gonna change this right so that we have like a very subtle uh separator over there and below this what I want to do is I'm going to have like I wanna have a list of my playlists right now we already know how to do that because we uh I just I just basically um fetched all of the users playlist while showing you how the access token Works we're just going to copy um this stuff over here and we're gonna change it for our purposes I'm just going to go over here paste this I'm gonna import all of this stuff so use session like um use skate right and use effect right um we don't really need to store the access token in like a particular State what we are interested in is this playlist right all I'm going to do is I'll just say hey um desktop is cool this stuff is okay we don't need this right and we're gonna set the playlist we're gonna do pretty much the same thing that we did earlier over here which is iterate over playlists object right I'm Gonna Save playlist we're gonna return um P tag over here right and what this is going to do is it's going to um basically have first of all a key you can have the value playlist dot ID over here we're gonna have playlist dot name right and then you want to style it up a little bit so what I'm going to do is just say um a cursor default over text white right and what this does is it give you gives you this nice scrollable list of all of your playlists inside the sidebar and so what we're gonna do now is go back to our code and I'm gonna change a couple of things um over here right the first thing is um I'm gonna go all the way over here and change the font size right so this is basically as you can see over here a font size of 14 pixel um I'm gonna change that go back over here it looks um much better now right now this is sng like the structure of our sidebar right and what we're gonna do now first is we're going to replace this um Spotify text with like the SVD right this is just to have an actual logo like this over there and over here what I'm gonna do is go to my um previous build over here because I already have downloaded and copy pasted the SVG right so I'm gonna go over here to um what if I build components um sidebar right and over here I have defined um this SVG right I basically took this by inspecting element over here and like copying the SVG right so I'm gonna go back to my code I'm gonna go all the way to the top paste this over here right and um what I'm gonna do is go over here [Music] just add Spotify switch over here right I'm gonna go back and this is how it looks right the only thing that's missing over here is like a little bit of margin so I'm just gonna add um let's see how this looks right and we'll also going to add a little bit of a margin on the top looks a little bit cleaner as you can see um the um the player is actually above the sidebar right so all if the list is longer it's gonna go behind the player and you can scroll through it right now um what I'm gonna do and it's basically um there's like one other thing that I want to do right so basically if there is a playlist name for example that's really long I want it to be truncated right and this is something we're gonna use a lot uh inside this build right uh what I want to do over here is basically um get to this point and I'm gonna just see I'm going to go over here so we have a third of 64 and then we have like a padding of five on each side so that's 10. so I'm gonna go over here and I'm gonna see um uh okay let's go for like 52 and add trunk it right it doesn't show any difference over here because like all of the playlist names are um kind of short right but if there's a longer playlist name over here it's gonna basically cut it off and end the characters with like three dots or an ellipses right this is the basic structure over here now what I'm going to do is add some functionality in here right so I'm gonna go back to my index um dot JS and we don't really need all of this stuff anymore because we've just moved it moved it to the sidebar right you're not fetching anything inside of this home component so what I'm gonna do now um is basically Define some states right the first date that I need what I'm gonna do is create uh some states over here right the first state along create over here is called viewed right and this is going to dictate uh what shows up over here and this main area right so for example if we click on search inside the sidebar The View should be set to search click on Library it should be set to library if you click on a playlist it should be set to like a playlist view right I'm gonna go back over here and say new state and I'm gonna default it to search right um and I'm just gonna comment write a comment over here that says hey this this is going to take some values like search Library um I'm gonna have like playlist right and it's also going to have like an artist rights for the artist page so we're gonna have this um and then what I also want to do is that like a global um playlist ID right basically if someone comes over here and selects a playlist ID right um the The View will be a playlist for you right but we're gonna also have to load um a certain playlist ID right click the data associated with a certain playlist ID over there and we need that playlist ID can be set from different places right so we're gonna need to keep a track of that which is why I'm adding it as a state over here I'm gonna default it to none I'm also going to go ahead and buy the same logic just add a state that says global artist ID and initialize it with another right um the other thing that we probably made um okay let's just leave it over here and we're gonna add more States if we see the need for it right but over here like inside sidebar we're gonna have to pass in some of these things right the first thing that I want to pass is like setting right because this is how uh the sidebar component is going to be able to change the view of what is happening over here right so set view equals set View and um I'm also going to pass in like this View this is because I want um so I'm basically thinking hey if the search has been selected I would want it to be a little bit highlighted right so we're gonna need to know which view we are in uh inside the sidebar component right now I'm gonna go back over here and I'm gonna select um something else so I'm gonna pass in Global playlist ID right set global playlist ID right this is enough for now we are going to go inside this Hardware component and over here I'm going to add all of those things so that uh we can utilize these values so send view set view set global playlist ID right here over here now what I wanted to is Implement some on click functions right so the first time drawn and Implement is is over here someone clicks um search right what I want to do is set View to search right and I'm going to add another thing over here so I'll just go to put all of this inside a brace change these to tactics and the reason I'm doing that is because I'm gonna add something over here right and what I'm going to add is if view equals search then I want the text to be white and otherwise it's gonna be uh there is going to be a null over there right I'm gonna add a similar thing over here set View Library and I'm gonna basically just copy everything else from here I'm gonna go over to this place delete some faces right and instead of search this one is going to be a library um this is cool now what I want to do is go over here and also Implement an on click function over here right um what this is going to look like is um on click I'll just do this in line for not because it's it's um really just like one or two lines of code so just push all of these over here I'm gonna push this below okay looks much better and what I'm gonna do over here is I'll just say um over here I'm gonna say first of all the view has to be a playlist view right so if you are in the search view for example move to the playlist View and the global playlist ID is going to be playlist dotted right um pretty sorted now um I'll just add this over here to make things a little bit cleaner looks much better okay right so we're over here um and we're gonna go back to our index.js right because like there's there's basically a bunch of different things that need to be displayed instead of this deal over here right so what I'm going to do first of all is I'm gonna um so we already have like a playlist view defined over here right so let's start with that um what I'm gonna say is um okay let's get rid of this and just add something like this so if View equals lay list right I'm gonna basically need the playlist view component over here right and we can actually add some things over here so playlist view right I'm gonna just add a couple of class names I want this to be let's grow I want this to have like the full height of the screen um and I'm gonna give it like um 800 right just to make things a little bit more visible right so as you can see right now we have our view initialized to search right which is why we can see that it's the search button as font color as white right now if I click on a playlist this is gonna not get um first of all this is gonna not be white anymore right because search is no longer uh the selection and over here we can see like the playlist view component right like this component coming up right we're going to do something really similar for other components as well so I'm gonna do is I'll just Define um some more files over here so one is going to be search Dot jsx right um and I'm just gonna save this go back and create something called Library dot jsx again put in some template code um done and one more it's gonna be artist.jsx right and now I'm going to come back over here and I'm just gonna um I'm just gonna delete some of this right so I'm just gonna say okay if we are in the search view I want the search component right and it's gonna import it from our components directory we want the search component to be there to be visible right if anything goes for Library and same thing course for artists artist right now um we're gonna work on each of them uh one one at a time right but for the playlist view let's start with that one and for the playlist viewport we are going to need is first of all the global playlist ID right because this is gonna tell this component to fetch the data of the playlist with this ID right so we're gonna do this and it's probably also going to have like some other props being passed in but we don't need them right away so we're gonna not add them and we're gonna go and work on the playlist view right um so I'm going to go into this component and first of all I'm gonna say Global Place ID over here right next I want to get all data um related to this playlist right so the way I'm going to do that is I'm going to go to the Spotify documentation go under playlist and click over here right so this is basically um like this is the end point we're gonna use to get all the relevant data right and it's a simple get endpoint so we're gonna do a couple of things over here first get the session object right because we need the access token second um okay this is weird um use effect yeah second um we're going to load so once we have the session object right and the session object also has the access token we are going to um fetch all of the data right and the way we're going to do that is by using the fetch API and for that we're gonna need an async function so I'm just gonna wrap everything over here inside a function call that function over here and over here I'm going to say const response is equals to a weight fetch and I'm gonna add this right and instead of the playlist ID I'm gonna say global playlist ID right um and the other thing that we need obviously is going to be um oops is going to be oh man I hate this code headers authorization and let me just actually go over here and copy that copy that up I'm just gonna copy this entire line right and this story right okay now construct data is a weight response dot Json and this data is going to contain basically everything listed down over here right and we're going to use a bunch of things um it's from this response inside our UI so once you have this in place what I'm going to do is I'm going to put all of that data inside a state so I'm going to say playlist um data right set playlist data I'm just gonna say new state null new state has not been imported okay now it's there so we're pretty much okay for now right um now what I'm going to do is there's like a bunch of different things that we're gonna need over here and the first one is going to be a header right so we're gonna place a header right over here at the very top and um what I'm going to do is I'll just remove this from over here because um we're gonna be dealing with all of that um down here right um so what we have inside the header is it's basically like um like a header bar where the background color and the opacity is gonna change as we scroll through through the playlist right so the way we're going to implement that is first of all by defining a header and we're gonna add some class so I'm just gonna say text White it's gonna be sticky um top zero right we're gonna give it a height of 20. we're gonna give it a z index and we're gonna say um on text size font size of 36 pixels right and over here I'm just gonna say um this is going to be the background color right and but it's the opacity is going to change a little bit and we're gonna code that in just a second and I also want this to be like a flexbox items Center um and font weight at 700 right so this is okay for now now what I want to do is create another tab over here and just add the Global so I'm not doing I'm not gonna go with like Global I'm just gonna say playlist data and I'm gonna say if it's there the name right I'm going to go back and click over here um and nothing shows up okay that's because we haven't uh assigned this okay now we are good to go right we can see the playlist name over here if I click on another playlist nothing happens okay we're gonna go back and see why that's that why why that's happening um I'm gonna go to sidebar we're gonna go over here it says set Global playlist ID to playlist dot ID okay so the global playlist ID changes but it's not gonna run this fetch function again because we haven't included it over here okay now if I click on Eminem there's Eminem if I click on progressive rock it has progressive rock NCS top 100 NCS document right so you can see that the content of this component changes based on like the playlist that is being selected which is exactly how we want it right now I'm gonna go over here and add a couple more things first thing that I'm going to add and something that you might have noticed is that we could sign it but there's no sign out or logout button right something that's going to be placed over here so I'm going to implement that first and the way it's gonna work is it's gonna be um at position absolute right and it's gonna have an even higher set index because it's gonna be on top of everything else and I'm just gonna say top five write it right it's gonna be a flexbox items Center and I'm gonna give it a background color of black and I'm gonna change the opacity to 70 percent okay um font should be white I'm going to give it some horizontal spacing and basically um I'm gonna say the opacity should be like 90 but if we hover on it the opacity should be like 80 percent right so this is like minor um for subtle hover effects over here cursor pointer and keep it like a capsule so rounded hole right and um Let me give it some padding over here and now what I'm going to do is put a couple of things inside over here right uh in fact what I'm going to do first is just say um okay let me just check if we have some some of the data in place right so I'm just gonna save this I'm gonna go over here I'm gonna console log the session object right I'm gonna go back go to my console right and over here we have a couple of things from here so we have a couple of things as you can see that we received from this modify login by default and that contains our email name and image right so what I'm gonna do is I'm gonna use them inside this button and the way that's gonna work um so just um go over here go over here add an image right and this is gonna be complete circle because we're gonna give it light um identical height and width let me see session dot user dot image right I'm gonna add an ALT tag as well that says profile like right um you can see that the image so this is my actual image um from my Spotify account right and that is exactly what shows up over here the other thing that we're gonna have to add um is going to be like I'm just gonna say pause the tag over okay a b tag over here and this is going to contain the text logout and over here I'm just gonna set the font size all right and now I also want um icon over here so this is all of this is basically coming from over here I want something similar to this which is what I'm going for um and I think there's like if I go over here yeah this doesn't so we're gonna go for something like this right um so let's get back over here and just stay Chevron down icon right this seems all right I'm just gonna set its height and width if you go over here now we have like this nice little log out button inside the header bar now what I'm going to do next is we are going to add um like a section over here right um and this section is going to have some background gradient so but the way that works is first of all I'm going to Define um a large parent container right so this is going to be um the way I want to do this is I want to position I want to set its position to relative and then basically um typically add a minus uh five or a minus 80 pixel worth of top position the way the reason I'm doing that is because the height of our header bar is 20 and I want it to essentially go behind it right now what I'm gonna also add over here is Edge screen all right and then I'm just gonna say overflow y scroll right and then I'm just gonna say um over here I'm gonna set the background to a dark gray color right this is the dark gray color right now inside of this I'm gonna declare uh section right now um over here what I want to do is basically depending on the playlist right depending on the playlist uh that is being selected I want some random colors to show up over here right so the for that what I am going to do is basically just Define um this array over here and I'm just gonna so these um okay I'm just gonna write this down and explain in like just a second so let's say I want um a bunch of colors over here from new 500 around why am I writing this from thingy it's because these are Tailwind classes right so if you go over here there's a very simple way of defining um a background gradient in in any element right the way you do that is you basically have like a from color and then you have like a two color right so you and you have like a background gradient Direction um and what we're gonna do is we're gonna just Define like a bunch of these over here um what what I'll actually do instead of typing all of these out I'll just go over here and paste because this is just like a simple constant I'm just gonna paste it uh over um from over here I'm gonna say playlist View okay it's over here in this case let me go to Colors we have this list of colors right so I'll just copy this and paste it over here and now what we are going to do is select a color at random from over here and put it inside the class of this section right um so this one is actually going to be a couple of tactics because we are going to be changing values over there and the one thing I want to do over here is add another um use effect um okay this one is going to be dependent on global playlist writing because if this changes I want the color to change right what I'm gonna do is to find a state over here const color set color use state I'm just gonna say color still right what I'm going to do is come over here and so I want to actually use um like a shuffle function and what I'm going to do is I'll just go back over here and do install this like really popular package if you have been working with JavaScript for a while you're going to be for sure familiar with this low Dash right uh start the server again go back over here and over here what I'm gonna do um is is I'm gonna basically be using this function called Shuffle from your dash right and what Shuffle does it it's basically gonna allow me to choose an item at random from the color sorry right and what I'm going to do is I'm gonna just put this value inside our color state right so now that this is in place the shuffle function by the way over here gets imported from low Dash so we have that over there what I'm gonna do is um so I'm gonna get back to this section and I'm going to just start adding some some class names over here so first up this is going to be our Flex box um I want the items at add right Flex end this time and I'm gonna give it some horizontal spacing I'm gonna say uh background gradient two words bottom right and this is going to go towards neutral 900 right which is the background color and the from value right from something this is gonna come from our color State over here right um next we want to add like a height of 80 um we're gonna keep the text White and I'm gonna add some padding over here as well I'm gonna go inside it and over here I want like a couple of sticks the first one is going to be an image right so this one is going to be a slightly larger image side of 44 um verto 44 I'm also gonna actually get into Shadows later on and I'm gonna just say suits is going to be playlist data right um if it's there I'm actually gonna do something over here first but okay playlist data dot uh images zero dot URL right where is this coming from um so we're gonna go over here and go over to our documentation right so over here we get basically this this object right it can have like an images which is going to be an array of objective objects each object is gonna represent an image it's gonna have an image URL right this is exactly what we're going to be using um all right but the playlist data is not always there for example when rendering um initially right it's it's not going to be there the playlist data is going to be null so we don't want okay we don't want this image tag to show up it's gonna be really ugly in that case right um so I'm just going to what I'll do is I'll just wrap this um in a condition with playlist data and now I'm going to create a div right inside this tip I'm going to add a couple of things the first one um I'm just going to say playlist right and the second I'm just gonna say let's actually make this like an H1 tag because this is going to be the heading off of all the main content and it's gonna basically have playlist data dot name right so there's going to be the playlist name we're going to give it um a larger font size um font we're going to go with like fault weight 800 over here um so I'm gonna say is okay so we're gonna get into some of this um there is like one thing that I did address at the beginning of the video and that is uh the responsiveness right so what I want to do is like make things responsive and that includes the text size as well so what I'm gonna do over here is um so there's like two things around too right first we're gonna go back to sidebar go over here and I'm gonna just say this sidebar is hidden in mobile phone right so I'm just gonna say it's hidden by default and basically it is visible yeah this display is in line Flex on um I'm actually going to change this to me medium right so after 768 pixel worth of width it's gonna change display to inline flag so otherwise it's going to be hidden right the other thing I'm gonna do over here is I'm Gonna Save if this screen is larger I want um bigger textiles to be even larger right for large screens I'm gonna go with like 5xl right I'm gonna go back over here I'm going to select right so as you can see we have like this over here now um the other thing that I think I'm gonna style is this text so it's just gonna say happy so we're just going to say um this one is going to be text small right and font fold right looks a little bit better now and we're gonna go ahead and like add the rest of the things so this sort of completes the section all right but except the opacity part right so over here we want all of this to be transparent and as we scroll through right we're gonna need um if you're gonna basically need this header to start showing up right um and the way that's gonna work um so first of all I see some weird scroll behaviors over here so I'm just going to go back and check what is happening we have this over here this is cool in place we have this over here or and what what we want is position as height of screen no reason for it to show up um okay let's just add some items and I think it's going to get clear why we're seeing something like this right but for now um what I'm going to do over here is is basically um I'm Gonna Leave this section as it is and I'm gonna go and basically um create a Dev over here and this is going to basically contain um all the songs right um and what we can do we can do over here as we can basically um basically um we can create like a scrollable list over here and the way that is going to work is um it's like as follows right um but before we get into that I want to actually uh set up couple of States over here right the first one is going to be um opacity right I'm gonna say opacity set opacity new state I'm going to start with like zero right the other one is going to be text opacity right set text opacity I'm going to say you state again zero right [Music] um cool this is sort of okay and we're going to use these two opacity values um after right after we we sort of like fill up these songs so what I'm going to do over here is I'm just gonna add some styling over here so what we want is text White right we're gonna have some horizontal padding it's gonna be a flex box um the direction is going to be column we'll just add some spacing over here and I'm gonna add some basically padding at the bottom a lot of padding at the bottom because that is gonna essentially cover up for this player right so I would want the last set of songs to be headed behind the player which is why I'm adding this right once you're done with this what I'm gonna do is is start iterating over the songs how do we do that if we go back over here and we check where the songs are right so if you look over here we have all of this stuff we have something about the owner of the playlist and then we have like this um object called tracks like tracks is basically going to contain information about with songs or detox songs that are present inside the playlist right and it's gonna contain all of that lust inside um this array called items right and we can see that over here all right and we're gonna be using all of this information right so each item for example has this track object which contains like all of the stuff um and we're going to be using all of this information and and like just a sec for now the thing that we're gonna have to iterate over is this items um so what else what I'll write over here is playlist data um I'm gonna say Dot tracks right because we have a tracks over here then I'm going to say items right and this is where I'll put my um I'll I'll just put my um map function right and over here I'm also going to need the index um because um we're going to be adding the numbers um over here like if if we go over here we have some of these numbers that get replaced with the play button when you hover on it and we're gonna Implement just that right so we're gonna go over here and I'll just say so this is this is going to contain some Logic on its own so we're gonna just put we're just gonna separate this out in its own component I'll just save song component over here right for now it's gonna just return an empty test uh let's say I need a key so we'll just give it a key okay The Key by the way is going to be tracked.track.id y track dot track dot because if we see this item right like this is the first item inside the array we have the track object inside of it and this contains the ID right okay so we're sort of done over here and I'm just gonna save this go back um okay okay and um I think we need to do like a refresh over here it's not fetching the tracks or it's not showing the tracks for some reason so I'm just gonna debug that um we're gonna need like the playlist data dot tracks dot items um seems fine to me but and me actually just open up the console Soul has no errors as well foreign unless there's two problems that we have I'm gonna address them one balance one is the scrolling thing right like so this is the central component scrolling right Scrolls a little bit and this is the sidebar and it Scrolls by quite a bit but more importantly it makes everything score and that is not what I want so I'll just check what is happening over here and we have like all of this stuff all of the stuff over here um things that we are interested in is this height screen overflow this seems okay to me but we sort of need to go over here and check um that out as well so um if I go over here and what I want to do is we have a virtual light screen overflow hidden so this is all pretty okay right and then it has like this sidewalk over here okay let me actually check what's happening so what we have over here is this and I don't actually want the sidebar to be able to manipulate the height sorry to be able to manipulate the height of this mean over here so what I'll do okay one thing that I want to try over here this is adding another tip this one is going to reflex verse 4 right I'm gonna remove this from over here I'm gonna basically uh Apple of the support here back and refresh everything just seems to be scrolling right which is really weird okay now I'm gonna go back to my sidebar.jsx file I'm gonna take like a look at what's happening over here we have all of this stuff is pretty okay we have like the third I'll be having some we have Flex properties we have padding they have all of that okay yeah one thing on just checks we don't this is cool and if I okay let's just take one boundary word is fine uh we're gonna have text color row zero trunk zero right and we have like water over here and we have like this stuff right overflow y 'all which is supposed to do what we wanted to do right but it is not really it is not really doing it for us um okay someday I want to try over here as removing this right and removing this I'm gonna what I'm gonna do is wrap the rest of the children inside this dip all right so I'm just gonna go ahead and wrap pick all of this up and I'm just going to include everything then here right I'm gonna I'm gonna just be a step over here and I'm gonna go back and see what's happening okay okay so this is a little bit weird but um no worries I'm gonna debug it um like really soon right um okay so I'm gonna debug it really soon but for the moment what what I want to do um is a sort of clover here to our playlist view right so this is where we are at and we had like a like another problem over here that I'm tackled first right and what's happening over here is we are unable to see um okay we're unable to see anything because we okay let's see if we can see yeah we can see the entire list of songs over here now and we can even scroll through them right now now that we have scrolling in place at least for this uh Central component we're gonna be able to configure like uh the opacities for this header one right and um if it's gonna happen over there is um okay so I'm gonna do it like this first up um I'm basically [Music] um okay so I'm gonna go over here like the first thing that I want to change is I wanna so it has a bunch of like things to find over here but the one thing that I want to Define with inline CSS is opacity or set it to opacity the reason I'm doing this is because I'm going to be changing this value based on the scroll position right the other thing that I want to do is change this opacity as well like over here I want to say opacity to text opacity right now uh what I'm gonna do so this is like the logout button I'm gonna leave it as it is I'm gonna come over here and I'm gonna say on Crawl right um and on scroll I'm gonna write a Handler function for this right and I'm just gonna call it like change opacity and it's gonna I'm gonna pass in E dot Target dot crawl top which basically is um uh like a value that represents how much you subscribed by right and we're gonna remember a couple of things for this calculation um so first up let's go over here and Define this function and it's gonna basically say like scroll position right and um here's what I wanted to do right and scroll position is like zero I want everything to be zero right then scroll position is like 300. right now on opacity to be one right and till this point text opacity zero as well right now when scroll all system goes to like let's say 310 I want the text to suddenly appear right so at this point this is still 1 and text opacity is also one right and this basically can be done using like a sample function so I'm just going to Define some things over here first off instead of writing 300 I'm going to represented the variable so that we can change it later on and uh I'm just gonna write that stops that I'm gonna say 10 right 10 over the other offset all I want to do is I want to just say um like const new opacity right and what what this is going to represent is 1 minus I'm gonna say scroll position or or I should actually say offset minus scroll position right if scroll position is going to start from 0 and it's going to go up right um so what I want to do is e okay so there's there's two things I want you to do crawl position less than the offset right this case one over here I'm Gonna Save one minus offset minus scroll position and I'm going to divide it by the offset so that it becomes a number between 0 and 1. right so what this basically means if you're not um that okay with like uh this sort of like algebra is and scroll position is zero right like this this is going to be this is going to to calculate to zero because offset my offset is 1 and 1 minus 1 is 0 right then scroll position is equals to offset right which is 300 at the moment this is going to become 0 and this value is going to become 1 right so it's going to linearly grow from 0 to 1 right and now uh what I want to do is that opacity to the opacity all right and I'm just going to save this over here so right now we can see the starting opacity is zero so we can see this as we scroll up okay there's an error that's happening over here it says scroll there's a typo okay another viewer over here we can see there is no header as we scroll up the header slowly starts to creep in and by the time we basically all of the section goes above the header actually is in place right like this and as we scroll up it again slowly gradually disappears right the other thing that we wanted over here was um okay so let me just um do a couple of things over here this is fine um over here what I want is um if less than offset then we are not going to be dealing so let me just write an insulation over here right if scroll pause is greater than offset then we need to change the text opacity as well and it's going to follow a very similar formula like this one over here so I'm just gonna say const new text opacity right and this is going to be one minus and I'm gonna say ah okay let me just do it this way like const Delta right is equal to scroll pause minus offset so this basically means how much over this 300 value is the scroll position I'm gonna say I have something like this text offset which is 10 I'm gonna compare it with Delta and divide it with the text offset again to make this number between 0 to 1 and this number slowly going from 0 to 1 right and now what we can do very easily is um you can just say set text opacity to new text capacity all right I'm going to go over here and as you can see over here the header path is slowly changing its opacity and now the text appears right like the text goes it changes its opacity from zero to one really quickly because we've given it like this a small Delta of like 10 but it looks kind of smooth right okay it doesn't seem to be working exactly how I want it okay so it seems to be coming up along with the header bar which is not what we wanted right so over here I'm just going to add that text opacity to zero right and over here I'm just going to say just to keep things really concrete it's gonna say right now let's see what happens Azure power comes sent the playlist names comes in scroll back up the playlist name vanishes the header bar vanishes right exactly all we wanted pretty cool right so that is basically all about this header bar and the next thing that we are going to be working on is going to be um everything over here right and um I'm also gonna add like this one other thing [Music] okay let me let me add that in like just a minute but let's let's sort of like fill this area up really quickly right so what I want over here is like a song compared so I'm just gonna go in my components directory and Define a new file song.j6 right and I'm Gonna Fill This up with some template and I'm gonna get two um how this is going to work right so over here what I want is um I'm gonna Define I'm gonna use display grid for this right so I'm gonna say grid um calls to right I'm gonna have a normal curricular for the font I'm gonna have font size set to 14 pixels and give it some padding and then I'm gonna basically say um I'm going to Define like a background for uh when it's being overdone right and it's going to be white with like an opacity of 10 so it's gonna look like light gray actually um I want some border radius as well so I'm gonna go with this 8 pixel right um and I'm gonna say cursor default foreign next I'm gonna need to Define these two columns right so I'm gonna just add into this over here and let me fill this up right so this one is going to be a flexbox items Center right and I'm going to give it some spacing as well um over here what I'm going to do is first of all so okay before we get into this we need to get some data from the playlist view component from to inside the song component right and what we're gonna need over here is um the serial number that's going to be one right um we're gonna take in like the entire track object and then we're gonna add some other functions later on so over here what I want to do um what I want to do basically is just save create a P tag and I'm just gonna write serial number plus one right um because this serial number is going to start with zero um we're gonna give it our fixed width and you're gonna get the reason in like just a second but after after this right so this is the flex box gonna go ahead and create an image stack thus image stack is going to have by different width of them it's gonna have like a source the source is going to be tracked album dot images zero dot URL this is again as you can probably guess taken is is taken from over here all right so every track has an object called album album has and a list of images each image has a URL clear over here this is um yeah this this is sort of done and the next thing that I want to add over here is another diff right inside of this div I'm gonna add basically two things right so one is going to be the strong name it's represented by track.name over here I'm actually gonna uh paste in all of the um artists that this track has is by doing okay let me actually pull this up over here pull this up and just say track Dot artists I mean I believe they have if you go inside the track we have artists right and this is a list over here I'm gonna introduce a map function right and this is the artist I'm just gonna return it's gonna have around some things over here and the first thing that this is going to have let me actually put all of this inside um some empty tags right and over here what I want is first artist dot name I believe right each artist has a name cool and the other thing is going to be um I'm also gonna take the index over here right I'm gonna say is um okay squaredness see over here I'll just say I not equals to artists dot length minus one right if it's not the last artist in the list I'm gonna say add a comma over here otherwise it's going to be none right and over here I'm just going to add over um underline right okay this is a lot of stuff over here and let me save this and see if we are getting anything over here right I'm just gonna go delete this entire dim I'm gonna import the song component I'm gonna start passing in the props so we need s and O which represents the serial number right so I'm gonna just pass in I over there and then we need the track objects I'm just going to pass and track um track.track right I think this is fine uh we also need a key so for this key um what I am going to do is I'm just going to say track dot track dot ID right and I'm going to go back over here and artists is not defined okay we're gonna go and check out what that means yep we don't have anything called artists what we have is track dot artists I'm going to go over here click on this playlist and as you can see we have something uh that's looking really good over here right we can hover on these artists and they uh basically automatically get an underline this is useful because it informs our users that you can click on this and we are going to implement what happens when you click on it on this later on right because it's going to open up the page for and all of the details about this artist right and we have all of them comma separated and they're looking pretty good I like this um so something I'm gonna do over here now is so first up I'm gonna go and deal with this um deal with with the song name right and the way this is going to work is I'm going to give it like a fix button right and if it exceeds this word I want the text to be truncated right we're gonna use this for that um after this what I wanted to uh I wanna also Define like a larger width over here for larger screens just to make things responsive right I'm gonna say text white and I'm gonna in put it to like a font size of 16 pixels right I'm gonna go back this looks much better now right and as you can see the hover is also working everything is looking pretty good now uh I'm gonna so this was like column one over here right uh so what I'm gonna do is this is column one I'm gonna go over here and start working with this right um so this is again going to be a flex Box by the way it's gonna be Flex items Center and we're gonna use justify between right because we want the rest of the um song related data to be spread out right and we're just gonna see um if you're going to let let me just put keep this as it is for now and add a couple of text over here right the first thing I want to add is a beta over here I wanna again Define somewhat right so that we can use truncate right I don't want any of the longer pieces of text floating around uh I'm actually gonna just go over here add in the same thing over here right this is done this is done we are over here and I'm gonna say I'm gonna hide this um in like Mobile screen so this is like the default display right but um if it's like a larger screen I want the display to be in line and just to be available right so I'm just gonna say track dot album Dot right this is done the other thing that I want to add over here is the duration right so this is here and drag dot duration underscore Ms if I remember correctly so we're gonna go back to the developer um to the docs right and over here what we can do is we can um it is going over here right I can go inside the track object and over here what you can see is we have um something called like we have the name we have the album name and all of that stuff but we should also have something that is called um yeah durations in milliseconds right uh we're gonna save this go back over here and this is looking pretty good right like it's looking pretty neat except this number so because this is the duration in milliseconds and what we want is like a minute and second split right because that is how a song durations are being um shown up and for this what I'm gonna do is there's like um there's just like a small snippet of code that I found in stock stack stack Overflow right I'm just gonna copy that um to to sort of make my life easier right so I'm gonna go to my previous build I'm gonna okay this is working really slow for some reason I'm gonna go to components I'm gonna go to song over here and if we scroll down we have like this nice little function I'll just copy paste it and then explain instead of typing the whole thing again right um so if you go over here we have this call middle east two minutes and seconds what it does is basically divides um um the milliseconds to find out how many minutes and seconds are there and basically creates a string out of that right if it's like a perfect minute it's going to append a colon and two zeros after it um if not it's going to do something like this and what that does is I'm gonna go over here and I'm gonna wrap this up in parenthesis and just say this right I'm going to go back to my build and now we can see this has like a nice little view right it's been parsed into this minutes and seconds format that we are all familiar with the other thing that I want to implement over here is when you hover I want this number to be um to to disappear and it to be replaced with like a play button icon right the wave we are going to do that is we're gonna Define a state over here it's going to say const over set over is use state I'm going to say it's false by default right now uh we're going to Define two things over here so react gives you like a bunch of these um event listener and the one we need right now is on Mouse enter and on Mouse Leaf right so when this happens what we want to do is set over true right and then this happens we wanna set over to false right and now based on the state of this this over we can actually change what is being displayed inside right so we can go over here you can say hey let's wrap this up under some conditions so if over I want to display um like some icon over here right and otherwise I want to display the stack so instead of this icon I'm just gonna actually import um the play icon right so I'm gonna play circle play icon I'm gonna go with like this this one but I'm actually gonna import like this solid one right I wanna give it some class names from 2 is height of five or five I think that is going to be pretty much enough because the um text should be white no it's not white so I wanna okay we're gonna load up a playlist this is not working because your state is not beat imported right I'm gonna load this again and as you can see um we have this play icon appearing as we hover on the song items right pretty neat right and this is exactly why we have um this width of five in our P tag just to just to keep things consistent I don't want things shifting here and there when we hover on them right um okay awesome so um this sort of completes the song component except that we don't have the ability to play anything yet right but we're gonna get to that in like just a minute for now we can just test this out right this UI seems pretty okay to me and what you can also check is if I sort of like go back you can see the text size went down right if I go back even further the sidebar disappears but this is a little bit um um this is a little bit over the place what I'm gonna do is I'm gonna fix this right so what I want over here is some margin at margin on the left right and we're gonna do that by going over here um yeah right about here right so over here what I want is I want um margin left Auto by default and it's like a larger screen I wanna basically say um zero right you can go back and we can see that this is like really responsive now right till here then things vanish and it looks pretty okay so this is like a tablet with I can uh make it even smaller and this is basically how it's going to look on the phone right sidebar is header sidebar comes into picture X becomes even um even bigger on larger screens and here we are right like now this is looking pretty good it's actually starting to look a little bit like Spotify okay um so this is all pretty cool and all I'm gonna just add uh one more thing over here because when we scroll up this seems to Bland so I'm just gonna go over to playlist view I'm gonna go all the way over to header right and this one is a flexbox as it is and you know all I'm gonna do I'm gonna say image right and over here um I'm gonna do the same thing as this I'm just going to copy this one but we have like a mini version of that image over here and I'm gonna say this one has like um and it's gonna have like a height of it width of it I'm gonna give it some like margin right so aha this looks better now right this Scrolls up and shows up over here and um okay what I'm gonna do is I'm gonna put this uh inside this div I'm gonna press enter press this and what I'm going to do is I'm just gonna say class name Flex right and look over here save this here I can just add this like feedbacks right and I'm also gonna have to add um items enter over here okay so now as we can see the header bar appears the name and the logo of the playlist appears and you can scroll through it and it looks pretty beautiful right um so we're sort of done with like the at least the UI of um of the playlist view right next we're gonna basically um we're gonna be working on the uh on the headers uh or sorry we're done with the headers what we're going to be doing is working on the player right um this player over here that we had colored red light red for some reason right so we're gonna go back um we're gonna go back to our player and over here what I'm gonna do is um so this is sort of where you're gonna start running into some peculiarities of how these modify um how this Spotify API basically works when it comes to playing in right um but for now let me at least just add a couple of things over here so the first thing that I'm going to do is I'm going to say this Flex items Center right I'm gonna give it some spacing and um what I'm also going to do is let me go back to index.js right and see what's happening over here so I don't need this background red um by the way right but I am going to need a couple of other things so um okay so what I'm going to do over here what I want to do over here is basically um I'm gonna I'm gonna get inside the player so this is where the player object is going to come in so I'm just gonna first of all import player from the components directory save and I'm gonna go inside player.jsx right which is where we are and what I'm going to say is instead of going with like the flex and stuff over here first I'm going to Define some things right so if you noticed I actually removed a couple of things from here I'm actually going to remove these I'll just keep that keep the height inside over here I'm gonna go back to my player I'm gonna say height of 24 right I'm gonna give it um this gray color as the background I'm going to give it a border at the top the Border color is going to be this one right text is going to be white it's going to be a grid with three columns right and then I'm gonna say get the font size and I'm also gonna miss that the font size for medium sized monitors give it some padding and I'm also going to increase that adding so this is the padding for like mobile this is the padding for like desktops or even iPads for that matter right now um I'm gonna come over here I'm gonna say Flex item Center so this is like the first one right we're gonna say item Center space X4 right inside of this uh we're gonna need to display right like the song details I'm just gonna comment this out for now some details we're gonna fetch these song details of the player of this song that is currently loaded on the player and we're gonna display its details over here right this is going to be the first this is going to be the first column right um then I'm gonna add like this um this icon over here right like so what I'm going to do is um at least for the moment I'm just gonna say play circle icon solid right um I'm gonna give it um some height and width so I'm just gonna say height of 10. width of 10 [Music] um all right and clear this out see what happens this is okay um change the positioning a little bit anyhow um and actually this needs to be inside but as well right um and what I'm gonna say is last name keep it Flex items Central justify center right now this is at the center of the player which is where I want this okay so now we're gonna get into how we play songs um I'm just gonna set a couple of things needed for that first of all um we wanna know um if we're on a North leaves the song ID right that is being selected for example from inside the playlist view or maybe inside your search results if someone clicks on a song you want to know which song that is right and for that we're gonna need a state we're gonna Define a state over here that says global current song ID um yeah right and what I'm going to do is that global current song ID I'm gonna set it to not right what I'm going to do is I'll pass this along to um our playlist View right and I'm gonna go inside the playlist view I'm gonna take it out of the props over here that I'm gonna go all the way down um and I'm gonna pass it over to the song component right because this is where the on click is gonna get implemented so um what I want to do is basically say on click right set Global ID um to wanna also get the ID over here first of all so I'm gonna paste this over here go back to the playlist View and over here what I want to do is I'm going to say I'm gonna pass in this ID as well right actually we have like all of the track data over here so we can just use that um so track dot ID right this works and what this is going to do is it's going to basically um it's going to inform uh it's going to it's going to set the track ID that is being selected all the way at the top and in our index.js file and you can use this value for example inside our player um like this forever like this right now this player component knows that this song is being selected so it can fetch the details for this and start playing it right um the other thing um okay so let's let's just deal with this one first right so what I'm gonna do is go inside the player object right and what I'm gonna say is global current song ID and that is the one right let me check Global currents already so we have this value over here what I'm going to do um real quick is um I'm gonna write a use of it right um it gives effect imported from react I'm gonna say this one is going to be dependent on the global current song ID so if this changes I want to refetch the details this is where I'm going to fetch song details right and place um this is also going to be dependent on this session so if we're gonna need the same old fashion object from the usage and work which is um pretty convenient right like this this sort of like I'm pretty sure you're you're starting to realize why next thought is such a good choice right it gives you this nice neat little way of getting the access token anywhere inside your frontal code right and okay now we're gonna so I'm gonna do over here is to find like some functions the first function is going to be async function that you're gonna use for all these 45 API interactions I'm gonna call it over here inside of this I'm just gonna check if session object exists and if it has the access token right once we are done with this what I'm gonna do is check um if there is um so if there is no global current song ID right if there's none you need to fetch um get the currently playing song from Spotify over here right and we can basically just get some info right over here so we're going to define a bunch of functions that are going to help with this so we're going to start with like this one first and the way this works is I'm gonna have to find um like get or let me just say functions fetch song info right and this is going to need the track ID right and then um was what's what we want to do is um son actually add a check over here because I think we're going to be using this function in different places as well but for now what I want to do is basically save const response equals a weight fetch we need to go back to our favorite Spotify documentation and we're gonna go over to tracks get track so it's a simple get request at this end point right um so I'll just add some backticks over here I'll do this track ID I'm gonna paste the headers all the way from like somewhere else right because we've been using this all over the place I'll just take this I'll look over here or paste this right next we're gonna say const data is equals to a weight respond to Json um right and now what I want to do is create a state to store all of this information so I'm gonna say song info set song info use state is going to be null initially over here I'm gonna say set phone info data right over here what we can do is just say await fetch song info and pass the global current song ID right um no not this ID oh yeah this ID because it's defined audio if this is um not the case I want to get like the currently playing song from the from Spotify so I'm gonna go over to player and click on this one get currently playing track right as you can see it also requires an authorization scope but we already took care of that because we had already sort of like I had already collected the Scopes that we're gonna need for all of these apis and pasted it while we were configuring uh next auth right so we can just use this now and what it's going to do is we need this endpoint I don't think it has anything that is necessary otherwise we're just going to go over here we're going to create a function for this as well async function um I'm gonna say get currently playing right and it doesn't have any parameters and what we can do is just say const response is await Edge paste this paste the headers from over here const data is await response dot Json right um and this is sort of fine let me actually just show some of this stuff over here right because I want I want uh I wanna I wanna basically make sure everything is working fine at least till this point so um over here what I'm gonna say is we have the song info right like if we have the song info and if the song info so it's gonna have like an album just gonna have images we're just gonna have like a URL right so there's this song image thingy I'm just gonna say if this is there I want an image tag over here the image tab is going to be hidden by default but it's going to be visible um in larger screens right so anything about mobile and uh it's gonna have a height of 10 width of 10. and we're gonna give it a source which is going to be exactly this right so this this stuff okay copy paste you don't even need this need this anymore and um this one is a flexbox right so this is the first item first child inside this Xbox the second child is going to be a tip and inside the step we're gonna have two things first one is basically going to be um there is song info right it's going to be the name inside it right and the second one um is is basically going to be like the artist name so for now over here what I'm going to do is I'm just going to say artists zero so the first artist I'm gonna add its name over here I'm gonna style this up a little bit so I'm just gonna say fine color white right and text small and this one is going to be um font color gray so this and then I'm gonna say um an even smaller stick right okay let's go back over here and see what's happening we already have like some error over here inside the sidebar okay um okay there's something happening to them like the playlist object is not loading up for some reason over here on the playlist should be an empty state but it's okay it starts like something happening over here and we will sort of like get to that in in a second or no I think I think I'm pretty sure the problem is somewhere with like the tokens I'm just gonna go back login with my Spotify and see if that resolves the issue it does so we know that there is some problem with like the refresh token mechanism for example because it's been a while we've been coding and the access token must have expired and the refresh token uh maybe like there's like some type or some bug over there for now I'm just going to click and open up this right if I click on on anything like this you can see it shows up over here right click on cradles cradle shop click on on not on and on shows up right so this is basically um the playlist View communicating this selected track ID back to index.js which communicates it to clear component right and it fetches the details and shows it over here but it still does not play anything right and we're gonna deal with that um right now so till this point everything is gonna work just fine even if you don't have a Spotify Premium but one odd thing about Spotify API is that if you want to actually play songs right uh you're gonna need the premium the premium is I know a lot of you uh watching this are gonna be students but basically you can get like a week of Spotify it's premium service for like the price of a pack of chips right so it's pretty cheap and at least for the purpose of learning and experimenting with Spotify API I think that's a worthwhile choice so go ahead and just uh basically um purchase this 45 premium for like one week right uh and that's gonna serve um serve you the purpose of like building um all of this play pause functionality over here right like and um yeah assuming you have that I'm gonna get back to our code okay and um basically I'm gonna get over to player dot jsx over here okay now what I want to do basically look over here go over here and say okay we have the current key playing cat currently playing function over here right all right okay what what I am going to do is first up I'm going to add like an F condition over here this is because you can there can be a number of reasons that this return set to go for response right and in this case I just want to basically log 2 4 response from currently playing right um and one reason could be the Spotify Premium thing the other reason could actually be a lack of an active device right so it happens over here is like you're gonna need an active device with your Spotify in order for you to be able to play anything through Spotify APA what does an active device means well the simplest way of doing that is opening up your Spotify and your phone or in your desktop right your browser or the desktop app just playing something okay and pausing it right um and that basically turns this device into an active device so you can actually now play things over here um but okay we're just gonna get back to what we're doing and this also needs a return by the way because nothing should happen after this and we're gonna get back over to here right so we once we have this I'm gonna just return this data right now um we have that song info we have get currently playing I want to go over here all right and I'm gonna basically say um const data is a weight um get currently playing right uh over here I'm just gonna say set global we don't have do we have it here we don't have it okay we're gonna have to uh we're gonna need this Setter function inside our player component as well because we're gonna be setting some songs setting the current song using from inside the player component yourself so I'm just going to paste it over here paste it over here now we're passing it in right you can go inside the player object put it over here inside the props and now we can access it so we're gonna get back over here I'm going to say set Global um currents of ID and this is basically going to be data Dot item I believe dot ID let's check go back to Spotify developer documentation close this the response is going to have like a device and all of the stuffs context we don't need this and then it has an item the item is gonna be basically a track object so yeah ID right pretty straightforward so far um okay so we are over here this is okay now what I'm going to do over here is this do one more thing over here right we basically need to display the play or the pause button depending on the state of the song that is loaded into the Spotify player right and in order for that to work we're gonna need that state over here as well so what I'm gonna do is go over here create a state that says global uh what do I say is track playing set Global is track playing I'm gonna set it to false all right now I'm gonna pass this and I'm actually going to pass at least this one inside the playlist View right because when you click on a song we want the is track playing status to change go inside playlist View add it over here go inside um pass it inside the song component go inside spawn add it over here and then over here when we are setting the track ID we're also setting um let me just do this over here and Light right we are also setting this to True right now I'm gonna go back to playlist view save this go to our player right over here what I want to do is go over here and I want to pass these two objects inside the player the global a string set Global extracting equals this we're gonna go over here and paste this as well and then we'll basically copy these two because we're gonna go inside the player component and extract both of those values from the props right so now we're over here and this is okay and now we're gonna what we're gonna do is we're gonna say is plane right why are we doing that because we when we check this data we actually get something called is playing right if something is currently playing returns true so we're gonna go over here if this is true we can set is track link to true right and [Music] um what we can do over here is uh await fetch ah like strong info over here and over here we can just say data dot item dot ID right this is done and this should actually set things straight right um okay so if we're gonna do one more thing over here right save first of all um there's two things that I want to do next number one uh if I click on something right yes I want it to start playing right away right and the second thing is is I want display pause button to work right that's gonna leave us with like a fairly uh functional first half of the Spotify clone app right so what I'm gonna do first is I'm gonna go inside the song government right like and this function is kind of getting a little bit bigger so I'm just gonna extract this out now I'm just going to say Play song right and inside over here uh I'm gonna pass track dot ID and I'm gonna go over here and Define um this function over here right I'm gonna say async function play song and it's gonna have a track ID inside of it and in order for this to work we're gonna have to say a weight over here async over here right now over here I'm gonna do these two things but I'm also going to do a couple of other things so the one thing that we want to do over here right is actually play the song and the way to do that is we can go back to spotify's documentation and we can say hey start to resume playback we're gonna use this endpoint it's gonna be a simple put request right um it's gonna basically we're gonna pass in the URI of the song that we want it to play and it's going to return a simple 204 response right So This Is How We Do It const response a weight fetch this end point right um over here we're gonna need the header and for the header we are also going to need the session object and let me just copy this right um paste that over there and uh where's our header here it is we're going to go over here over here paste it right and before this I'm also going to add method what and over here I'm gonna say Json Dot stringify and over here what I want is basically Uris which is going to be an array and over here I'm just gonna say um okay we actually need like the Android track object over here right because yeah uh this is fine this is fine we're gonna go over here we're gonna go over here and set this over here and what I want is not track dot track dot URI right what is Strike dot here right basically um anywhere inside like a track object for example the one we get inside over here what you can do is you can um go inside the response you can go inside um tracks and go inside items go inside track object and over here you're gonna find an ID and a URL right so this is what we need for playing the song okay so this is sort of done right we we don't have anything to do with the response right away so I'm just gonna leave it leave it at that um it's also going to need like one other thing right we're gonna have to check if we have um session object and the access token right and now we can go back open up a playlist um go over here because we haven't imported use session go back open up a playlist click on this right and nothing really happens um let me actually console log something so over here this is sort of done this is done I'm gonna just say console log response dot status right all right this is okay I'm gonna go and basically inspect element console click on the song and it says 404 right okay we have some problem over here we're gonna go to play our start regime testing close all of this okay 404 is actually really weird so what we're going to do is I'm just gonna check a couple of things over here you have a put request um we have the headers in place um and we have this in place this all seams pretty okay right um what I'm gonna do is as two things one I'm gonna go over here and like play and pause this just to make this device active and I'm going to go over here I'm going to refresh this go over to my playlist click on this okay we can actually even pause this song from our actual Spotify player um because we haven't implemented the pause button in our clone yet right but as you can see if we click on a song it starts playing now right the other thing that we need is the play pause button now so we're gonna go to player.jsx right and we're gonna deal with this button over here first up uh what we are going to do is we're gonna display please play and pause button depending on this right Global is track link so we're gonna go all the way down over here wrap this up and just see is try playing right and if this is true what I want to do is basically have the pause Circle icon in place otherwise I'm gonna have like play circle icon right I'm just gonna click on this over here let me go over here is okay um the other thing that I want to do is basically handle the play and pause right and for that to work what I'm gonna do is is I'm gonna create a function over here all the way all the way over here right so I'm going to create an async function called handle play twice what it's going to do it's if this if there's a track that's playing already right we're gonna we're gonna basically um we're gonna use that track uh we're gonna uh just pause that track right if not and we're gonna play uh the track that's currently on the player right um and if there's no track We're not gonna do anything at all um right so I'm just gonna put all of this um over here right I wanna know what I want to do first is use this function again right like so this is the function if you're gonna use to get some data so const data is a weight get currently playing we're gonna say if data dot is playing right we need to pause um the player for that what we can basically um you're gonna get rid of this in just a second for now let us um ignore this and I'm gonna go over here and I'm gonna say pause pause playback right so this is the end point and it's again a simple put request right and it's going to return a 204 response when the playback is passed so we're gonna go over here and we're gonna say okay we're gonna pause right say we're gonna say const response is await fetch this URL over here and we're gonna actually wrap all of this up over here so that we don't actually do this when we don't have a session object um just to sort of keep things a little bit um in check right and we are going to add this header as usual go over here paste this right um so this is going to be for pausing right if this is not the case we're gonna have to play all right and if you're playing we can actually go ahead and click over here and we can use the same um say thank you right because these are not really important these are not really magnetic like they are important they are not mandatory they are optional right so what you can do is we can basically just go over here all right um over here right like we have this thing already in place we can just copy this go to player right go to our function paste this remove D yes right and we have like the play um end point in place right and now what we can do is we can go over here somewhere here just say on click handle play pause right I'm just thinking why handle play pause this sounds fine this one's fine okay we're here to copy this go over to the play icon and paste this also right we're gonna do a bunch of things first of all I'm gonna go over here and like make this please active again right so that we have like a smoothly functioning I'm gonna refresh this right now let's go over here and um play something right like I'm gonna play this one okay so the pause doesn't seem to be working and we're gonna get to why that's happening um so I'm just gonna click inspect go to console because I can see there are a bunch of Errors over here and you can see failed to load resource the server responded with status four or five which is okay we're gonna get to y that is happening right um we have a bunch of other things right each child should have a unique key we're gonna okay where is this happening by the way and um okay we'll see where checks the render method of song okay okay we're gonna go over here we're gonna fix these one at a time okay this is where it's happening right so um we'll just add a key over here all right um I don't actually want to place a key over here because this is an empty tag so okay let's let's sort of like deal with that a little bit later but for now um okay let's close this refresh this and I want to see what's happening over here right because I think because it's unable to show the song that's like a bunch of other errors also happening over here I'm gonna go to the networks tab right and I'm gonna refresh this um so we have session and all in place right [Music] volume is really too damn High I'm just gonna reduce this but uh okay I got a sense of what is happening over here first of all the play button is working right it starts the song it's just not showing everything over here and um we're gonna have to deal with that right now but um apart from that right click so what what really is um happening over here is we're gonna have to go to player dot GSX right and over here in the handle play pause function we're gonna have to um like a couple of other things right first of all I'm we had [Music] um data we basically ran into this condition right so we sent a put request um but this is not really um all we wanna do right if response dot status equals 204 which means the song has started playing we need to set Global is track playing to um this is going to be true right and we're gonna say global current song ID right so this is the current song and the wage is going to work is um if you go over here currently playing track and check the response right so we have a device we have a context we have an item right the art the item actually contains all of the data related to the sort including the ID sorry here what I'm going to do is I'm going to sync data dot item Dot um I don't know like ID right and see what happens over here but before that um let me just walk you through what is what I think is gonna happen right based on this Goods first of all um when play is clicked it's gonna start playing the song right and it's gonna set this to True which means the pause button is going to be visible and it's going to set the current song ID which means the details of the song should be visible over here right and we're also gonna once we click the um pause button I want this is track plane to be set to [Music] um false right and um and this is when response react status is 204 right um this is pretty okay right we have um the pause everything else seems to be fine so let's see if this works right I'm just gonna reduce the volume a little bit because I don't all right I hope you can hear that in the screen recording so we have the song playing we're gonna [Music] we are still unable to pause it um so I'm gonna do is there's something happening with like the pause button uh with this pause API actually um let me just go back to pause playback right it is uh put request to be oh I know what's happening we haven't really added method equals put over here this is why it is not working um okay so we can just sort of like go over here we can test this out now so let's play royalty over here right it starts playing the button changes to a pause button I click pause it pauses I click play at place right pretty awesome we actually have a functioning modify player now right like and we can click on songs and um just play them right foreign okay so this sort of like completes what the player is gonna be about right and now we can move on to like some of the other sections so um right now we have the player file I'm just gonna close uh all of these like files that we are not dealing with anymore right um awesome okay so we are sort of done with like the playlist View and um what I want to do next is I want to basically cover the um like the library view right like because I think this is um relatively straightforward and it's gonna basically like the the components that we're gonna use inside of this are also going to be useful in the uh search results for example and and like other elements here in there so um okay let's start with like the library over here right and what I'm gonna do over here is like I'm gonna start with like a couple of things um first up we're gonna go back to um so I'm going to close this we have all of these things in place so I'm gonna close this as well I'm gonna go to index.js and we already have like a library component being rendered over here so I'm gonna just type in library at least for now right I'm just gonna say Flex Pro height drawing right now I'm going to click library right and it shows up library you have this Library button being highlighted right which shows that you're in the library you can go back to your playlist you can switch back to library and this is what we are going to fill up now so in order for us to do that we're gonna go ahead and like do some other things first right so first we're gonna copy these two things which is the header and the logout button all right and what I'm going to do is I'm gonna go over here and copy these two I'm gonna delete everything inside the arrow and I'm also gonna remove this stuff because we are not dealing with opacity over here and um I'm gonna import this icon right um there seems to be some problem over here oh we don't have a session object uh I'm just gonna copy our good old use session hook over here oh my God save go back click your session is not defined okay import your session from next auth react save go back click on Library we have this now right like the image is not loading for some reason but we're gonna refresh that um and we have like the header bar at least in place right and so what I'm gonna do is first up I'm gonna remove this background color from the header right because I and I'm I'm actually also going to remove all of this stuff right because you don't need it we're gonna keep it like empty for now um I don't know if you go back it's like an empty header over there and um what we can do um okay so this is sort of okay this is done what I'm gonna do is I'm going to create a dip over here right and this one is basically going to contain all of the UI for our library so we're gonna do what what um if we're going to do is we're gonna make it a flexbox Direction column and give it a cap of four right um and then we're gonna say we have like um some padding um we're gonna give it the full height and allow it to be relevant right now inside of this thing we're gonna actually create a heading right and this one is going to say playlists right and I'm gonna add some class name over here so it's going to be text Excel and now go on um font bold right and below this I'm gonna create another parent container or flexbox right and this one is going to have um Flex wrap as wrap right um we're gonna see a gap of six I'm going to add some bottom direction right just to get get over that player section now over here what I want to do is iterate overall playlists but for that to work we need our playlist first and we've already done this before so I'm just going to go over here and um like copy all of this stuff right and I'm just gonna paste it over inside our library so over here right we don't actually need this at all um so I'm gonna go over here and I'm gonna iterate over my playlists right so playlist dot map gives a playlist and I'm gonna basically say over here another tab for each playlist I'm gonna assign it to Key which is going to be playlist dot ID right um and it's going to have an on click as well but we're gonna get to that later first I wanna basically um Define like some of the UI elements right so we'll hear what I want is class name equals to I want cursor um pointer right um I want relative group right so this is an interesting utility class from Tillman I'm gonna explain what happens over there in just a second right so I'm gonna give it like a sixth worth of 56 I'm gonna give it like some bottom margin and I'm gonna give it a background color of this gray color right and if you hover on it I want the background color to turn a little bit lighter in fact more light I want some border radius and some value cool so uh here over here now okay use state is not defined right import now what I want to do over here is I'm going to open up this right like your library and and I want to basically Implement these cards right the the interesting bit in them is this play icon right like this play button that's sort of like animates or transitions into visibility when you hover on the card right so if you hover on this parent card um the properties of this uh play icon actually changes and this is exactly why we're gonna need this um okay where did it go we're gonna read this class right like this group class right and I'm gonna show you how how that works right um okay so what I'm gonna do is I'm gonna deal with that um okay let me let me uh two two things right one I'm gonna add the image first right so that we have some content over here right okay let me just delete that and check what's going on first right like we have this stuff all of this stuff this is cool um I'm gonna go to my index.js we have the library component click on Library use effect as well defined okay gonna go back to library import use effect from react I'm gonna go to library and now we are these boxes right like I'm Gonna Fill these up first before we get to the animations so in order to fill them up I'm going to Define an image tag right and this one is going to be pretty straightforward now because we've been doing this for a while so what I want over here is like a width of 48 right because we had like um I guess like we had 56 over here and then we have like a padding of four so 56 minus eight is forty eight um okay height 48 right and we're gonna give it some margin at the bottom source equals playlist dot images zero dot URL right um next up we're gonna need a pre-tack inside of this um just gonna basically say playlist dot name right forward I'm going to Define another P tag over here I'm just gonna say buy I'm gonna say playlist dot owner dot display name right I'm gonna style both of them up playlist Dot name is gonna have um font size of 16 pixels right it's gonna have white text it's gonna have some water margin a width of like 32 or I guess we can keep it like 48 right same size as the image truncate over here I'm gonna say um text small right text neutral 400 for the gray color large bottom margin W 48 truncate right that's sort of completes the setup I'm gonna go back and we can see we have these beautiful cards over here right like and we have some bottom margin so that the last row of cards actually gets over the player over there right but what's missing is the um animated play button that comes into picture when we hover on these cards right so what I'm going to do is I'm gonna adjust that right so this one okay not this one I'm gonna go over here okay so this one it has like this group class and it has position equals to relative we're gonna use both of them right so I'm just gonna go over here in that character tab inside this tip I'm gonna basically um active play icon right this one I'm gonna give it some class h of 6 W of six right and I'm gonna say text is black right the other thing I'm going to need is we will put this position absolute right and we're gonna have to add a bunch of things over here um okay so let's let's sort of go in one by one right likes first of all the opacity by default is zero right but when you hover on the parent right which is this one I want the opacity to increase and the way that works is we defined this utility class over here called group right in the parent container so now we can write group over group Dash over right and now I can say opacity hundred so it's gonna basically go from opacity 0 to opacity 100 when you hover on this one like this element right which is the parent card all right so that's one thing now I want um transition um so I'm gonna basically I don't want it to jump between those two opacities I want it to smoothly go I'm just going to say transition all ease in and out I'm gonna set the duration of the transition to 200 milliseconds and I'm going to add like a shadow over here um I'm gonna give the shadow color as well then uh what I'm gonna say is like we have absolute position this is fine so I want that of 10. right and I'm going to say edge of 12 and W of 12 right I'm gonna make a reflex box to Center this display icon inside of it so Flex item Center justify Center right and I'm gonna say rounded full to make it like complete circle and I'm going to give it a nice green color as the background so I'm going to pick this one right and then uh I want another transition to happen so if we sort of go over here you can see that when when we hover on these cards um the the icon actually moves up by a little bit right so what I'm going to do over here is I'm gonna say it goes from like top 156 pixel to group over of like 148 where do I get these values for this time I got these values through trial and error all right so I'm going to go over here we can see that the play icon now shows up right everywhere and this 148 pixel and everything is actually from so for example if I set it to 140 it sort of like goes a little bit too up and and so if you set it to 148 it sort of like lands in just about right and that is exactly how I ended up with those pixel values right like you can experiment on your own but yeah these are looking pretty damn good now and the only thing remaining in these cards and in this Library section is the ability to open up these playlists right so I'm gonna add an on click over here and I'm just gonna say select playlist object over here so over here I'm gonna go and create a function called select playlist right and what it is is going to do um so we're gonna have two two next one we're gonna have to settle U playlist right the other thing is we're gonna have to set Global playlist ID playlist dot ID right now we don't have these two inside our library object but we're gonna change that right away so what we need is set View and set Global playlist right we're going to copy these two I'm going to go to our library component add these two as props right and we're going to basically go over here and take them up from the props set view set Global playlist ID right now if we go back over here we not only have these playlists but we can actually click on these and it opens up all right this playlist right like you can you can basically scroll through it you can play songs from it all that regular stuff right um okay so we're going to go back to library and this one this page is sort of pretty much done right it's like a nice little view of like all of your playlist all of the users playlist basically and what I'm going to do is I'm gonna go to I'm gonna build like the search page next right and in order for me to do that what I'm going to do is I'll just go over here and we are going to fill all of this up right so right now we don't have much over here so I'm just gonna write Flex curl Edge screen right like that's good stuff I'm gonna say it like this so we have like the search component already inside our index.js page right and if you go on search we can see the component loading up right we can see the search page basically acquiring all of the space left apart from the sidebar right and I'm gonna basically be doing a voice over um from this point on because my earphones got messed up and um like all of the remaining audio um it got messed up along with it so I'm just gonna do a voice over for the remaining portion of the video as I um as I watch myself code right okay so basically um right now what I'm gonna do is fill out everything that's going to go into our search page right the first thing I'm going to do is basically copy the header as well as the logout button right because that's really um gonna be more or less the same right the header is gonna have um a search bar over there but um the positioning and everything is going to remain the same so I just copy that down all right and for the logger button we are actually gonna need like the session object as well um so we're gonna have to import that um with jio session but before that because we're gonna add some content inside the header we're gonna make it into a flexbox and add item Center and add some horizontal padding over there right and now I'm gonna essentially code the search bar over here so um the search bar basically is going to consist of like an input field right and we're going to give it some class names so it's going to be something like w96 for like um um like around 380 pixels of width round it's full because we want it to look like in capsule right we're going to give it a background of white we're gonna basically add some padding to the left because that is where our search icon is Gonna Come into picture right we're gonna set the font color to dark gray right neutral 900 font size is going to be 16 pixel and we're going to add some padding um on like the top and the bottom right and we're gonna keep everything else the same we're also gonna do an outline set the outline width to zero pixels so that we don't have to see the outline inside our UI right and now as you can see we have like the session object is not defined so we're gonna have to basically get that session object from the user use session hook right so over here I'll just copy that same line from our library component and paste it over here right and we're gonna have to import the use session hook from next slot um so that's done now so basically we have like the playlist object is essentially undefined at the moment and this is actually um happening because of like an error with the refresh token or type Point refresh token function that I'm going to fix pretty much at the end all right um for now we can just log back in and everything uh starts working again right and for the search icon we can basically just import the magnifying glass icon from hero icons right and give it some class names to set the height and birth and its position as well so it's going to be an end position absolute we're gonna position it such that it basically Falls towards um like the starting portion of the search bar right hsx birth of sex and we're gonna give it like um this um gray color right and now we can basically we basically have the search bar we can type in it you know and and that is working just all right but now we're gonna um basically need we'll be defining some states right because search page is gonna have um it's gonna be keeping track of like a couple of things so the first one is going to be search data right which means and this is something that's going to be updated as you type into the search bar right so we're gonna fetch the search data from Spotify API at the same time we're gonna need like an input value and a set input value right because this is this is going to be used when uh we start um getting because we want to use like the value inside the important um input element right and we're gonna also Define a reference right using the use refs book the reason we're doing that is because like we wanna when the user clicks on search right and they arrive at search view we want the input element to already be in Focus so that the user can start typing right away right um so we added that ref for that purpose and we're gonna also add like value and on change uh the uh set the value as well as set the on change function right the origin function is actually gonna do two things one it's gonna set input value to whatever has been typed inside the search bar and second it's gonna basically go and call this Spotify APN and get um some updated search data which is why I'm adding an async over there inside the on-chain functions and I'm going to do an update update search results so I'm gonna pass um all of the text inside the input field over there right now update search results is something I'm going to design and it's going to use the Spotify API but first um what I want to do is basically use the um the the reference that we just defined right so what I'm going to do is I'm going to say like input um ref dot current dot Focus right and I think that should work we're also going to need to oops we're also going to need to add input ref as a dependency for this use effect okay so now as you can see we click on Library we click back on search and we are already ready to type right um the update search results function is not defined so it's showing an error but now we're gonna Implement just that right so updates search results is going to have a query and what it's going to do is use the Spotify search API endpoint to get results right get some data so we're going to go to the documentation 45 API documentation and go under search uh towards the end point that says um search for an item right so this basically needs two things right like the first one is going to be the query right whatever you're searching for and the other one is um basically going to be type right like type type basically says hey what do you want your results to consist of do you want I'll test you want playlists do you want tracks right and we're gonna go with artist playlist and track for now um because those are like of our immediate interest and that is what we're gonna be implementing in our search page UI as well so now I'm gonna just copy this endpoint right and I'm going to say const response equals await fetch I'm going to add the end point and we're gonna add some new URL search parents and over here we can write q and it has the value of query and then we can add type and it it's going to be um an array that consists of those keywords right so we're going to add artist um we're gonna add playlist and we're also going to add our track right so it basically says hey if you search for something anything right you you want Spotify API to give you back relevant artists relevant playlists and all relevant songs right I'm gonna basically copy paste the header needed to interact with the API over here and then const data equals await response dot Json right now um so as you can see from the documentation the response basically consists of a bunch of different objects right so we are interested in artists playlists and tracks so what we're gonna do we're gonna store all of this this response inside search data right set search data and we're gonna pass in data and now we're gonna basically fill out the rest of the content of the search are you going to do that is in like two different components number one ft user has searched for something right so you have some search data we are going to display that search data in a certain format if not we are going to display um the featured playlists from Spotify right so that um it doesn't look completely blank and empty right if you haven't searched for anything and for that we're gonna create two components inside our component directory one is going to be featured playlist Dot jsx and the other one is going to be search results dot jsx right I'm gonna fill it up with like some um not this like the template code over here right now you can go back and basically replace um the what we had written down with like these components right so featured playlists if search data is null and search results otherwise and we're gonna pass in all of the information needed inside both of these components in the form of props right um and uh they're gonna basically dictate what is visible in our search page right so um first we're gonna work with like the featured playlists right because they are uh pretty straightforward and they're pretty similar to the library that we just quoted right so what I'm going to do is I'm going to copy um like this this section over here uh basically um the code where you display all of those playlists in those cards right and I'm gonna paste all of that over here right um I'm gonna basically uh be all right using pretty much the same code with um like different data because over here what we want is like featured playlists right um you're gonna paste like the session as well as like the playlist create and import everything like the U session import your state and we're gonna also copy paste like the select playlist session uh function because it's going to be used for um basically um loading the playlist but if the user clicks on it right and we're going to import we're gonna take set View and set placed ID from the props right because that's needed for the playlist to get loaded and now we're gonna go to Spotify documentation and go over to the featured playlist API Android right and this one is again a pretty simple straightforward get endpoint we're just gonna paste that over here and this one requires like um I'm just gonna add like some query params over here so new search params and over there we're gonna add country and U.S in Independent Court right we don't really need to add anything else over here and it's basically going to give us like a playlist um like like this object where you we're gonna have like playlists and inside playlists we're gonna have like the items which is going to be a list of those playlists so we're just gonna add data.playlist dot items over here and see how that goes right so you have all of these functions and place pretty much um there's okay there's like um closing tag missing we're gonna import the icon um the play icon right and everything else is pretty much the corner doing the same we're gonna change the heading from playlists to feature playlist and now we're gonna go over here we need to okay we haven't imported use effects so we're gonna go over that and boom we can see all of the featured playlists from Spotify these are actual featured playlists from Spotify we can see them um beautifully rendered in this um UI right like in all of these cards with the little play icon animations because we are basically using the same component as uh as as our library right like the code that we are already written um and if you click over here we um it says set to use not a function and that is because we have it passed in set to view and set Global playlist ID inside uh the featured playlist component we're gonna do that in just a second so we're gonna first we're gonna copy paste these two props into our search component we're gonna go inside our search component take those um pick those values out from the props right set view set level playlist ID we're gonna go down to featured playlists and over here we're gonna pass in those same problems right now you can come back over here and now if you click on any of the playlists they get loaded up we can browse through all of their songs we have the nice background gradient at the very top we have everything similar to how we had for our own playlists right um and we can also for example like play songs and all of that functionality Remains the Same except for except for the fact that this these are now coming from uh feature playlists right so this is looking pretty good and now we're gonna go into uh like the search results right which is basically how are we gonna display uh whatever data comes from Spotify endpoint um thank you to uh when you search for anything right um okay so now uh we're gonna basically take a look at what happens in like the actual Spotify apps right so we have this search page over here and what really happens is we have like a bunch of different sections right like we have a top result which shows like top playlist over there we have a bunch of top songs uh over at the right right and this top result card has like a slower transition duration compared to like the other cards and we have playlists and um things like that right like over at the bottom so we're gonna be uh it is uh we're gonna be coding up um something really really similar right so we're gonna go to our search result component right and we're gonna start off with um uh basically some some class names right so first up we're gonna need like Flex Flex calls right um we're gonna have like some cap over here we're gonna add some horizontal padding right and we're gonna give it um the entire height of the screen and we're gonna make it scrollable right now inside of this we're gonna create um a bunch of dips right the first step represents the first row inside the screen and we're gonna set it to display grid and give it two columns right uh we're giving it two columns because uh if we go back we can see that there's there's basically two sections in the first row of search results right and so we're gonna give it like grid grid calls two and inside over here now we're gonna have to basically Define what goes inside those two columns for the first one we're gonna create a div I'll give it some vertical spacing all right and um I believe I'm gonna actually come back and wrap this up in another div but for now basically I'm just gonna Define two divs right which represent the two columns right and we're gonna start filling in the First Column with the top result card right so first of all there's gonna be a headache this one says top result we're gonna give it some styling um the text Excel font hold right and then we're gonna go below it and create a tab right now this one um okay so this one is I'm I'm gonna write down some classes to to sort of ensure that it looks like the card that we saw in the actual Spotify uh is that app right so you can see that the transition is like a little bit slower when you hover on it the play icon and the opacity changes a little bit slowly right like compared to other cards and we're gonna take care of that but first we're gonna add like position relative group for the hover effect we're gonna give it a height of 64. 100 filth uh gray background and we're gonna have like a slightly um like one shade lower um gray background on Hoover and we're gonna give it some padding we're gonna make it a flexbox flex column we're going to give it a gap add some border radius so this is like about a radius of 8 pixels and uh we're gonna say transition duration 500 right so this sets the transition duration to 500 milliseconds as opposed to like the 200 milliseconds over in other countries right now um what I'm gonna do is uh I so I think so this is this basically represents the top result card over there right um but what I'm going to do is I'm going to wrap it inside another div right and this div I'm gonna give it some padding from the right hand side so I'm going to give it height of 64 and like a PR of it so this basically creates this gap between the song list and simply a card um the top result card right now I'm gonna go over here and over here what we want to do is uh first up we wanna have the play icon over there right so we can see that the card is already present in our search results right but I'm gonna add like the play icon that appears um smoothly and slowly on uh when you hover on this card right so for that we're gonna instead of coding it from this guys we're gonna copy like the play icon there from our featured playlist cards right and paste it over here import the icon and then we're gonna tweak certain things right first thing we're gonna tweak is change the duration from 200 to 500 right and then we're gonna go and change the positioning right so instead of saying hey this is like at top 156 pixels and like right six we're gonna say uh this one is um at bottom six and when you hover on the card right so group over we are going to set it to bottom eight right and we're gonna also set right right it as as like the second part of the positioning so now we can see that the play icon smoothly appears right like beautifully appears as we hover on this card right now we're gonna actually fill out the rest of the card right um for filling out the rest of the card we are going to actually need some data right so we're gonna have to pick some pieces from the search data that we received from the Spotify API right so first up I'm gonna basically add um like a playlist object in the props right and this is something we're gonna pass in from our search search component right search dot jsx but for now if there is a playlist object what I want to do is basically I want to pick the top playlist right which is going to be the first um object inside of the playlists array right and we're gonna use that to fill up this card so we're gonna give like we're gonna declare an image tag and give it height 28 12 28 we're gonna keep it completely um we're gonna uh give it like uh like some border radius right and I'm gonna basically uh add source as playlists of zero m dot images of 0.1 right so this is the first playlist and we're gonna use their first image for this card over here I'm gonna write playlists zero dot name right and we're gonna give it um uh text 3XL right so a large text and we're gonna give it like font weight of 700 right then we're gonna go below and we will uh basically add um uh the owner of the playlist write their name so we're gonna say buy and we're gonna add playlists zero dot Corner dot display name right and we're gonna basically set this to like um text small um and we're gonna add text neutral 400 for the gray color and um we can basically save this um go back over here but the data is not there right like we haven't passed in any playlist information um inside the search results components right so we're gonna fix that so we'll go back um to our search dot jsx right the search component and we're gonna pass in a playlist prop over here right so playlist drop is basically gonna come from the search data right and we're gonna just write search data dot playlists over here and uh if I be doing that because basically um we're gonna have like the search results are going to contain like this playlists objects and it's going to have like these items inside of it and each item is going to represent the playlist right so we're gonna just pass in that array inside the props and now we have this card ready right like we have the top result showing up with the relevant image and the relevant text now what you want to do is display the top songs for this uh search query right um right so this okay we actually missed one little thing right there's a small capsule that says playlist over there so what we're gonna do is um we'll just add that over here by using a span right so we'll just say playlist and we're going to add some styling to make it actually look like a dark um capsule right so we're gonna say um rounded full right um that background of like dark gray color and we're also gonna add like 10 like Tech and font bold right and I'm also going to give it like a margin on the left to keep it a little bit separate from the owner details and we're gonna give it some vertical padding and some horizontal padding now we have a capsule over there right like looks much better um so this card is pretty much done right this was like the First Column inside our um inside our grid over there right so now what we're gonna do is people want to basically work on we're gonna basically work on the uh like the top songs right which is the second column inside our grid right it's gonna be the right side right section we're gonna copy the same heading over here and we're gonna just change it to like top tracks top songs right um and over here now we want to basically display the list of these songs and what we're going to do is we're going to display we're gonna create a div right that's gonna contain all of the song items and we're going to basically uh set flex and flex call and over here what you're going to do is you want to basically iterate over um these songs that we received um in in in the props of of the search results component right so we're gonna basically say some start map and we're gonna return um we're gonna return everything that is needed to um basically display that song over there right okay so now we're gonna basically um add a div right as the starting point we're going to give it a key equals to song dot ID all right and we're gonna give it some class names right so this one is going to have um cursor default right we don't want any of that text cursors right and give it Forward we're going to give it a height of 16 and we're gonna display top four sound so we have like height of 64 in on the left hand side top four songs are gonna basically match like that exact same height right and we're gonna give it some padding um on the horizontal side give it some border radius we're gonna make it a flex box and add items Center and we're also going to add a gap of four and on hovering we want there to be like a gray uh Bangalore so we're gonna add a PG neutral 700. right now once this is done you wanna actually start displaying each song so we're gonna start off with like an image stack it's going to have a height of 10 width of 10 right and will also um basically add um the source as song dot album um dot images dot images the first image dot URL right um and this is because if you if you sort of like go back um to tool to basically uh the search end point and go through the response right there's gonna be a tracks object it's going to have like an items array and each track object inside the items is gonna have like an album and each album is going to have an image images array and it's each image is gonna have a URL that we are going to use um to to basically render the image for each of these songs next I'm going to create a div and like add two things inside of it one is going to be song.name the other one is going to be basically the artist of this one and for for like this particular case I'm just gonna pick the the first artist's name over here right and I'm gonna uh basically um style it up so I'm gonna say text small and um text neutral 400 right for that gray color and the other thing that we are going to need over here so this is all inside our flexbox right so the other thing that we're gonna need over here is um like this child is going to basically have Flex code so it's gonna occupy pretty much all of the remaining space right um in in e in the row or the container that represents each song we're gonna basically add um a couple of things over here so the first one we're gonna declare a P tag and add text small text neutral 400 and over here we are basically going to uh we're basically gonna display like the duration and we already know how to do that because we've done that inside our sound conference I'm just gonna copy paste the exact same thing and for this to work we are also gonna need our Middle East two minutes and seconds function so we're gonna go over to our song component and copy this uh over here as well ideally we can like um move this function to a separate file right and just import it in both places from over there that's basically the best way to do this but for now I'm gonna just copy it over here to make things function and we're going to get to code optimizations later on right over here we have like songs is undefined so we're going to pass in songs right so we're gonna say songs equals search data dot tracks Dot items right and we're going to click save and now we have all of the songs being written in the search results and we only need top four by the way right like we have that long list over there so the easiest way to fix that is just to add a slice up when I say songs dot slice zero comma four and then gonna map it over right so now we have four top four songs and it matches perfectly with the height of the top result card so this completes our first row and we're gonna add like the other stuff below it now right so um we are basically we are basically going to um so this was basically the the div that we had set to display grid right this was the first row we're gonna create another div below it and this one is going to contain like the rest of the search results which include like the artists and the playlist right so I'm gonna basically things consistent I'm gonna basically add the same vertical spacing over in this tip we're gonna actually use the same um styling for the heading as well right so text Excel and font board right and over here I'm gonna say our tests right so we're gonna display all of the artists that are returned from the search endpoint over here now below this what I want to do is something very similar to what we have done in our featured playlist and in our library right because we have already uh we already have like this code for for the cards right for those cards where you're displaying each playlists right um but first i'm gonna add artists inside the props and I'm also gonna add playlists right because these are both pieces of data so pieces of data that we're gonna need um uh we're gonna need to display inside our search results component and we're gonna basically pass those in over here if you're gonna say search data dot artists dot items right we're also going to add playlists so search data dot playlist dot items right there seems to be an error and that's because you already passed in playlists over here so we're gonna delete that right and um we're gonna go back to our Spotify documentation just check if everything is um exactly as intended right so artists have like an artist dot items that we are passing in we're gonna go back over here delete the extra duplicate playlists props and now we can go over here and iterate over our artists and display them um in in in their own cards right first we're going to declare a parent tip and this one is going to be Flex Flex wrap right um and we're going to give it a gap of four and inside this one what I'm going to do is I'm going to utilize um I'm going to utilize very similar cards cards similar to what we have in our featured playlists right so we're gonna say take the top for artists artists dot slice zero comma four we're gonna map over it right and over here we are going to return um the the cards that represent each artist right and yeah so it's gonna have a key equals artist.ib all right and we're gonna give it some class names so these class names um are are basically um gonna be pretty much the same as what we have over here in our featured playlists right so I'm just gonna basically copy um all of these class names right and we're gonna copy this instead of typing them all out right and then we're gonna basically um fill in like the rest of the information inside the inside this card right and um the way we're gonna do that is uh we'll basically go back to our featured playlist and we're gonna copy this entire section right which basically represents everything related to the playlist but we're gonna tweak it and we're gonna change it so that it displays like the data related to the artist right we're gonna go back over here we have the play icon uh already imported right and now um we're gonna go all the way down and it seems like we have missed something uh okay so we have basically um incorrectly copied everything so we're gonna copy paste the rest of the information over here as well and now we can basically change this to represent the artist right so what we're gonna do is we're gonna change this playlist over here to artist right because each artist is also going to have an an array of image objects and we're gonna also add a rounded full over here because we want the image to be a complete circle we're gonna add artist.name over here right and over here instead of displaying the owner name we're just gonna write our test right and now you can go back and see that we have we have like this um we have the cards that represent artists um being beautifully displayed right so these are the artists that are being returned inside these search results when we type um NCS in this case inside the search bar right um now uh what I'm gonna do is there's basically a small scroll issue over here and I think I have an idea of of why that is happening okay right um let me just take a look right next we have um featured playlist and everything over here and this section is inside search.jsx which has um the height of the screen and it's pretty standard and similar to all of the other views that we have okay it's pretty much the same we're just gonna compare this to like featured playlist right because they seem to be scrolling just fine right and we are pretty much using the same class names over here right if we go back to search um sorry search result and we look at like the top level tip it has um the same class names right so we're giving it the height of the screen we're adding overflow y scroll over there um so okay so what I'm gonna do now is basically we're gonna get to that scroll issue in just a bit we're gonna solve it but first i'm just gonna finish up like adding all of the search related data and the uh the other bit of data that we need is basically like the playlists right and for the playlist like the playlists being returned from this search query it's pretty simple because we've already rendered the playlist cards so many times now all right so we're just gonna add a parent with some spacing over here we're gonna add a headache with text Excel font pulled and we're gonna just say playlists over here right and inside this we're gonna create like um a container for all the playlists this one is going to be Flex Flex wrap cap of four similar to the artist's container right and now we can basically just copy um the playlist like the cards that represent the playlist right from featured playlist right so now please search for this okay we have like the scroll thing working fine and we can basically see that we have like songs artists and everything and then we have like below artists we have all of the playlists being returned from the search query We have basically all of them being displayed over here we don't really need all of them I'm just gonna at least for for now restricted to the top four so we're gonna just add dot slice zero comma four right and now we basically have this and in order for playlists to show up what I'm going to do is um I'm just gonna add like a bottom margin auditor right um yeah so now we can basically uh see all of the playlists uh as well so our search data is all getting displayed right now right let me have the top result we have these songs we have the artists and we have the um we have the playlist being displayed as well for for any search query directly formed Spotify right um I'm gonna do basically as um so I'm going to do now is is and none of these items right inside the search results are clickable right now right if you click on them nothing is going to happen and we're gonna basically include that functionality as well so that people can click on the click on this search results and they can actually for example play songs or check out the playlists or check out the artist right for that to work we're gonna start with like the playlist right so in order for um the user to click on a playlist and load it up we need two props set View and set Global left ID so we're gonna just pass them inside the search results component as well right similar to how we did it in the featured playlist component right and we're going to basically um go back uh to go back to our index.js and we're gonna copy these two props like set global current song ID and that is long distracting right these two are used to play a song when a song is clicked on so if the user clicks on any song inside the search results you want that song to be loaded in the player which is why we are basically passing in these two props inside the search component first and then we're gonna pass those same two props um inside these search results as well right um so basically we have set view answer to Global playlist ID for loading the playlist and then we have like um the uh said global current song ID and the set Global is track playing for basically playing a song so we're here what we're gonna do is we're gonna basically declare a non-click function that that basically we're going to take it up from from like our playlist View right um oh sorry uh from our song component right like because that is where we have the function for playing a song so we're gonna copy this function as it is um over here and where we basically have like this global current ID and Global extract playing over here as well so this can uh this function is going to be able to work um whoops okay we actually pasted this inside this search component but what we want is you want to put it inside the search results right because that is where the songs are just going to paste this function over here and we in order for this to work we're gonna have to pass um D2 props right like we're gonna have to first so I'll just declare this session object first and get it get its value from the user session hook right from next Dot and next I'm gonna basically change this on click function um to play song and I'm gonna pass it song over there right um okay and um now what I need is I need to actually um pass in these props over here right I want these props to be inside my search results component over here right so that we can actually play the songs and change the state inside the player over here so I'm just going to paste all of those props over there now I'm gonna add like the two remaining props so I'm just gonna say set global uh I'm actually gonna just copy from over here instead of typing the whole thing again so I'll just copy the two lines that represent global current song ID and Global base track playing and paste it over here save it go inside search results yeah now we now we basically have like all of this in place right um the other thing that I want to do is basically create this function that says select playlist right and this is a function we have created before right so what this does is it takes um like a playlist ID and it's gonna basically change the view to playlist View and it's gonna set the global playlist ID right so if you go over here we can actually just copy these two lines uh so set view playlist and we already have like set View and set Global playlist ID over here we're gonna go back to go all the way down over to our um on click functions right and we're gonna add select playlist over here and we're gonna pass in playlist dot ID and if you sort of take a look inside our library component what you can see is we are actually instead of passing the playlist ID we are actually passing the entire playlist object um we can do it actually either ways but what I'm going to do is I'm going to just to keep things consistent do it the same way right so instead of playlist ID it'll pass the playlist object and over here in the search results we are going to pass in the playlist object as well right now if we go down and if we uh okay so we are going to need to add a little bit extra padding over here um so I'm just gonna go over here and increase this to 48 right yeah now you can scroll all the way to the last row of playlists in these search results and it's neatly positioned above the song player right so um what I'm going to do is I'm going to add um like an on click function on the top result card as well because that also represents a playlist I'm just gonna pass in playlists zero over there um and okay so the reason um this is happening is because we haven't declared a function we have literally just called it directly inside object now if we search for this and we we basically click um on on like any of these playlists right okay this playlist seems to not have any image inside one of the songs which is why this is breaking so now I'm just gonna make that image optional all right I'm gonna go down here and I'm gonna basically um like some of the tracks don't don't seem to have images with basically breaks this image tag so what I'm gonna do is I'll just um basically conditionally render this right so I'll wrap it up within curly braces and I'm gonna say hey if this track has um like images right if it has images then I'm gonna do then I'm gonna render the image otherwise I'm not gonna do it but as you can see if you click on any of the playlists inside the search results we can open it up right and it opens up in the exact same playlist view right um we can even click on the top result and it does the same thing right um the other thing that I want to test is I want to basically just play and pause um my actual Spotify for a bit to make out make this my laptop an active device now if I click on any of the top songs you can see that this song starts um playing right um and uh I think like there's like an issue with my screen recording which you might not be able to hear this song but as you can see at in at the bottom left right like if we if we clicked on Mortals and like that song is loaded into the player and it's it's actually playing over here right and next up what I want to do is basically if I click on any of the artists right if I click on any of the artists I want all their details to be displayed just like this right so if you take a look at the actual Spotify app each artist has their own page right like this page basically has like um like the top part is actually similar to a playlist view right we have this gradient thingy with like some heading and text and we have like the top songs right and then we have like a bunch of other things so we're gonna add like the top songs and the related artists in our artist's View right and um in order for this to work so we already have artist component in our index.js uh we are actually going to need um like a couple of extra things right so the way this will work is first off we wanna basically use um the code from our playlist view component because the top part of an artist view is very similar to a playlist to you so I'm gonna just as a starting point I'm gonna start copying some code I'm going to start copying some code from playlist view dot jss so first up I'm going to copy like this colors array right which represents all the different colors and we're gonna randomly show them up in the background gradient similar to how we do it in playlist View right um I'm just gonna open up artist.jsx and plays view.jsx side by side and now I'm gonna paste and color so I'm gonna go back and I'm gonna basically um so over here in playlist view we have like a bunch of props we are going to need some of them but not all of them so I'm just gonna copy it for now and then change it later right so instead of global playlist ID what we really need over there is like a global artist item right but we're gonna get to that in just a second for now I'm just gonna copy these states right so we have this session object imported from you session hook we have we're gonna import the use datehook and we have like a state for the color and we have like we don't really need the playlist data state and I'm gonna copy this function for the change opacity um functionality right because we're gonna be needing the same functionality over here we want the header to slowly appear as we scroll down so we're going to copy that we're going to go over here and we'll just copy um like the use effect as well right and we're gonna have to change this user effect a little bit because we are not really interested in clear this data but we are interested in like everything related to the artist so I'm gonna just copy both of these use effects go back to artists.jsx paste them both in all right I'm gonna change this to like Global artist ID right because it's going to be dependent on the global artist ID all right um so basically if the artist changes we want we want like a different random colored gradient to to show up right similar to how it was working with like different playlists so over here I'm going to declare Global artist ID inside the props as well um um basically instead of patching all of this information about a playlist inside the use effect what we're gonna do is we're gonna effect um a bunch of data regarding the artist based on the art test ID right so I'm going to comment all of this for now I'm gonna go back to my index.js file and we already have declared the global artist ID over here right like we had declared it because we knew we were gonna use it to show or to determine which artist is being selected right and now what I'm going to do is I'm going to pass in all of these props all right so I'm going to copy paste um the same props from playlist View change Global playlist ID to Global artist ID right um I'm gonna basically say set Global artist ID equals um set Global artist ID right because each artist page is gonna have like related artists as well and if they click on any of the related artists they should be able to change the global artist ID so that we can get the details of the newly selected artist right so I'm just going to add set Global artist ID over here into props as well right and I'm gonna get into how we basically fetch all of the information related to an artist so we're gonna go back to Spotify documentation we're gonna go into artists and over here we have like a bunch of things I have an end point for getting the top tracks of an artist we have an end time for getting the related artists and we also have an end point for just getting general information about an artist like their images um their name their followers things like that foreign and this one is like a simple get request again so we're gonna start with like this one like let's start like some general information over here and what I'm going to do is I'm going to basically replace this playlist and point with the artist's endpoints I'm going to add a dollar over here and just say global artist ID right um and we're gonna set this to um a state so we're going to declare a state over here called Arden State arm set artist data and um use State and we're gonna initialize it with null we're also going to declare um a state for basically all of the top tracks of the artists so stop tracks set top tracks equals use State and an empty array we're gonna see we're gonna also declare a state for all of the related artists right so related artists set related artists equals new state um and initialize it with an empty array right so now we have all the states we need over here we're just gonna go over here and say set artists data and fill it up with the response that we get over here right now we're gonna also have to fetch like top tracks and related artists so so I'm gonna do is I'm gonna declare um I'm gonna put all this code inside um in like a function right we don't even need to pass in like the ID because we already know it's the the global artist ID right it's a prop inside this component so I'm just going to copy all of this paste it over here right and then what I'm going to do is I'm just going to say return data right and it's going to basically return the um all of the information about the artist right and I want to now I can what I can do is I can simply say like await get artist data we're gonna set uh we're gonna basically um put the returned value inside set artist data right now I'm going to declare another function called um get top tracks right this one is going to use the top tracks endpoint to basically get um to basically get the uh the top tracks of the artists right uh just the formatting seems a little bit of uh for some reason okay I just had forgotten to save so we're gonna go to Spotify documentation we're going to go to the top tracks endpoint right and over here what you really need is basically uh we're gonna need um the artist ID again so what I'm gonna do is I'll first copy the same code over here right I'm gonna basically copy this endpoint and we're going to change the API URL over here add a dollar and changes to Global artist ID right everything else is um pretty much the same and it's gonna basically return this tracks object and that is going to be an array of of track objects right so each um so each each object inside the cracks array is gonna represent one of the drop tracks so I'm gonna just say creator.tracks over here right we're gonna return that and um okay I'm just going to leave tracks for now because uh I'm gonna just check what what the data what what do we really get back over here right and um what I'm going to write is that top tracks await get top tracks right and it's gonna basically set the top tracks State using whatever has been returned from that function right now I'm going to go to my playlist view I'm just gonna copy um pretty much like all of the HTML over here we're gonna import this song component um and we're gonna import the right and over here we're now gonna change some things right because we already have like the artist data and the top tracks so first of all let's change um let's change some of the details right so inside the uh header section right where you have the background gradient I'm just going to write artist instead of playlist right and we're gonna change playlist data to artist data over here and over here as well right that's and we're going to change it over here as well right now um I'm gonna also add like a rounded full over here to make the image circular right and we're also going to change playlist data to artist data over here and here and over here inside the image source as well right now we're gonna go over here and instead of like iterating over playlist tracks we're going to iterate over the top tracks over here right so what I'm going to do is just write top tracks dot map right and um this one does not really like it has um like each item already is a track object right um and yeah so so what we're gonna do is we already have like the ID over here so we don't need tract.track.id we just need track right then we're gonna pass in track inside the song component as well now we're gonna go back um we're gonna go back over here and and what I'm going to do is in order for us to basically start checking out this page all right the artist page um we basically need to go inside our search results and we need to um we need to basically make the artist um clickable right and the way that is going to work is we are going to need this prop set Global artist ID inside our search results right because if someone clicks on an artist on the card for an artist right we should be able to set the global artist ID and change the view to artist view so that the details about that artist shows up so we're gonna go ahead and pass this Global artist ID equals set Global artist ID inside our search results we're gonna add it to the list of props um over here as well and now we're gonna go and create another function like set play select playlist we are going to call it select artist right we're gonna set view to artist and we're gonna say set Global artist ID to artist.id right now we're gonna go down towards the cards that represent each artist and we're gonna add an on click function and this is simply going to be select artist and we're gonna pass in our test right so now we can click on on like any of the artist over here okay we have not imported use effect um we're gonna go back to artist.jsx import use effect and we're gonna go ahead search okay we don't have Global field study okay we need to uh we need to switch we are the global artist ID over here right okay we need to change Global playlist ID to select set Global artist ID um and Shuffle is not defined so we're gonna have to import Shuffle from loader right a bunch of imports missing uh as we copy pasted some of our code from the playlist View we're gonna go back click on the patreon and top tracks dot map is not a function right so okay so the way I think that's basically like a difference in the way we are expecting the tracks data to get returned right and the way in in which um the API returns that data we can see that um data or tracks is also not working so I'm just gonna add a console log over here because I want to see and I see exactly what is being returned over here so I'm just going to write top songs I'm going to say data over here right I'm gonna just return like an empty array for now so that there is no error right now we can go over here and click on like an artist the artist page does show up but we're gonna have to debug what's happening with the tracks so if you click on top songs we see that there is like an error okay so the request is actually failing because we haven't added the country parameter right so if we go to Spotify documentation we can see that there is like this Market right right and this is supposed to contain a country code so we're just gonna add that real quick um so we're gonna say new URL search params and we're gonna add basically market and we're gonna add us over here right um now if we go back we basically have the talks top songs coming in right so I'm just gonna say uh I'm just going to return data dot tracks over here all right I'm gonna close this one and click on the factor and now we have the song right now we have all of these songs similar to the playlist view so all of these songs related to the artist over here right and um um these are all inside the same song component right they all use the same song component that we use inside our playlist views so it's being displayed in the exact same way with like the exact same functionality right and the header bar also shows up in the exact same way now what I'm gonna do is uh we already need like the top five songs right we don't need more we don't need all of these songs this is not like a playlist of all the songs from the artist right you can also see that the play icon appears on hovering because you're using the exact same we're gonna go over here and what I'm gonna do is first of all add a slice right so slice zero comma five is to only display like the top five songs that is done right now um okay so we're gonna get back to like the the rest of the um the rest of the artist page right so over here I'm gonna add another function cat related artists right because we want to display all of the related artists inside this artist view as well I'm going to copy all of this right and I'm gonna go to the get related artists um end point right and over here it's again a simple get request we're gonna change the url right um so I'm just gonna replace all of this with the related artists endpoint we're gonna add a dollar over here and say Global artist ID and we don't really need anything other than this we don't even need these right we're gonna get rid of that this one has like an artist object which is basically an array so I'm gonna write dot data dot artists over here delete these console logs right and then I'm gonna say set related artists to await get related artists all right okay so I'm gonna do is now we have like all of the related artist data inside one state so what I'll do is I'll basically go down here and I'll add another div right like this div is basically going to uh it's going to contain the cards or the UI for all of the related artists right we had given like a bottom padding of 28 over here to basically overcome the height of the player at the bottom I'm gonna add that over here I'm gonna say this is like a flex Flex wrap I'm gonna give it some Gap right and now inside this div we are going to add all of the information about the related artists okay okay so the first thing we're gonna do we're gonna go go ahead and do is um so we're looking for um basically um we're gonna add like a section that displays the related artists right and it's gonna be very very similar to what we had in our search results where we were displaying this row of our tests right like row of cards which represented artists corresponding to the search query order right so what I'm gonna do is I'll basically be um reusing some of the code from over there and over here I'm just gonna copy the heading right and I'm gonna say top tracks because like we had uh we hadn't added and a heading over here okay looks like we're gonna need like some padding over here so I'm gonna just add px8 which makes it consistent with the rest of the tracks we're also going to add some water margin over there right just to keep things uh neat and spaced apart right and um the other thing that I want to do over here is basically so I'm gonna actually I'm going to use the space y4 class right that we were using otherwise as well and I'm gonna just remove the margin pattern and now it it's like um it's going to be easier to to maintain the consistency across um like the other sections right so I'm gonna just wrap um the flex wrap container that we just made within another div with space y4 right um and over here I'm going to copy the heading and I'm just gonna say um related artists and um now that the heading is in place we're gonna basically be adding cards below that heading right and to add the cards you already have the code over here all we need to do is copy it from our search results page and paste it over here right now um we wanna basically import this play icon right and uh we have like most of the other things in place in instead of artists I'm just gonna write related artists because that's what the data is um the other things are pretty much um the same right the only other thing that we're gonna have to change right um is is gonna be um the on click function right so the on click function basically um what it does is it basically sets the view to artist View and it sets the global artist ID right so we're gonna go over here and um I'm just gonna add Global artist uh ID over here right and obviously go over here okay if we need to fix the padding over here as well so I'm just gonna add px8 over here and now it looks consistent look like the rest of the page um Okay cool so now what I'm going to do is if I click yeah the other thing that that we should probably notice is like the header uh behaves the exact same way it did in our playlist view because we basically reduce the same code right and if I click over on the on any of the artist card it doesn't seem to be changing the content of my artist page and I wanna just figure out why that's happening all right so okay we have our use of it um [Music] you can I'm just gonna inspect element for a second right um just to see if there's there's any errors happening or anything like that um nothing there doesn't seem to be like um an error right but it's it's not loading uh the new content right so we have this first changing the global artist ID and this should we're passing an artist dot ID right and they should basically be triggering um like the fetch data related code right like everything else is pretty okay um we have the artist object should have like the ID in it because like the rest of the content that image the name is getting populated right um now we have the said Global artist ID over here and we are basically using it inside our use effect right so if we sort of like um since we sort of scroll all the way up here and just go through the code um once again right what's really happening over here is we have this card we are setting the global artist ID we call up and um we have this use effect this function is going to get triggered when the global artist ID changes right and since I'm doing a voiceover I can see what the fault is that we have the set Global artist IIT over there in place of global artist ID under the use effect dependencies um it feels a little bit funny uh seeing this in retrospective but this is what happens when um when when you're coding right so okay I found it out basically I had to change Global artist ID to set set Global artist Idris Global artist ID right and now now everything is working if I click on tobu we have the data related to Turbo if I click on like um like I don't know like anyone over here if I click click on uh any of the artists that ID shows up the other thing that's missing is basically all of these songs have their artists listed down right and if we click on them like we should be able to open the artist page right that's the expected Behavior that's not happening at the second and we're going to fix that in in like uh right now so we're gonna do two things over here right number one I'm going to move this on click function right the function that basically plays a song when you click on it I'm gonna move it to um from like the entire container right I'm gonna cut it from over here and paste it inside the play icon right the play icon that gets that that becomes visible when you hover on the song and over here I'm gonna add another conflict function on like each of these spans uh write each band that basically has the artist name what I'm going to do is I'm going to say select our test and I'm going to pass in the r test over here right and then we already know what's going to be there inside the select artist function it basically we're gonna need we will need to set um the view to our test and we we will set the global artist ID right um we have uh we have this in place now in order for this to work we need set View and set Global artist ID inside our song component right so for that to work we're gonna have to pass it down from index.js so we're gonna copy this stuff right and we're going to pass it down to um playlist view right because that's like the immediate um child of of our home component right inside index.js and we're gonna take those values out from the props right so set view set Global artist ID all right and um now what I'm gonna do basically um is is I'm gonna go over to song component right and I need to pass those two values uh those two functions basically those two Setters those two Setters down uh to the song component right I'm gonna just remove um the select artist function from our playlist view I don't know why I paste it over there I'm going to put it inside this song component which is where which is where we need it right I'm going to go back to my playlist view I'm gonna copy these two um and paste it and like the props of the song object as well right I'm gonna go back to playlist View um I'm gonna I'm gonna basically what I'm gonna do is I wanna pass insert View and set Global artist ID so I'm going to copy paste these two lines into the song component right now we're done uh sort of with with this and they should basically enable us to click on the artist names listed beneath the song So if you click on EG sort the page for egzard opens up right like and we have like the related artist the top tracks everything right pretty cool um if we click on any of the artists over here right and the artist listed right under the song name it's not gonna work because we haven't uh passed in the same props over here in this song component right so I'm going to paste these two over here just make sure we have set View and set Global artist ID over here we don't so we're gonna have to um uh we're gonna have to pass it down to the artist component um over here so we'll just go over to our artist component inside our index.js file paste it over here we're gonna go back uh now if I click on easy sort we open up the page for each disorder if I click on vqs or Maestro right I'm going to click on Maestro we have the page for Maestro over here if I click on request from related artist it's going to open up the page for the related artists right um yeah so that that sort of like that belt completes up the um artist uh related functionalities right so we have a fully functional artist page which shows you the top tracks and the related artists and you can basically click on the artist name anywhere um in in like under the song name or inside the search page right and you can click on any of this and you will be opening up the relevant page right for example over here we went to our playlist we click on an artist name we clicked on like the related artist and we are basically navigating through seamlessly right um we so just to sort of like sum everything up we have like this nice library page right uh Library basically shows us our own playlist and we can basically um uh do everything that we are doing with other playlists over here as well and I think there's there's like one or two things uh one or two small things left in this build right the first thing is basically we want to implement the log out functionality right like we have a logout button everywhere but we if you click on it nothing is going to happen because we never implemented logout functionality so we're gonna go back to next auth documentation and over here we can see logout is actually pretty simple right if you import the sign out function from next dot you can just use that use that and in like the on click of your logout button and it's gonna talk you out right but that means it means is you're no longer you will no longer be able to okay this is a session object right that contains your access token and all of your user details and things like that so I'm just going to copy this over here and what I'm going to do is I'll just we have the logout button in a number of places right so we are going to go uh over them one by one right so we're gonna go to playlist view right over here and we this is our logout button so I'm going to paste it over here we don't need the sign in we need the sign out right so I'm going to import sign out from nextstalk right and I'm gonna basically copy it over to um the two or three other places right so I'm gonna go to my search view right the search component I'm going to paste it over here and um import uh the sign out function right and now I'm going to basically go over to my library view write the library component I'm going to go over to my logout button and import the sign out function from next auth slash react package I'm also going to do the same thing in my artist um component writes paste and import signup right um featured playlists um and search results and all of that stuff basically comes are not are not direct they don't have like logout buttons inside them right so this is um this is basically um one part of it right like so this is basically next dot logging you out of your session right the other thing that we want to do is if a user um does not really have um like an active session right if the user is not logged in if they're not authenticated we want to redirect them back to the login page automatically right um and this should be happening anytime the user tries to open up your app right um so the way we are going to do this is with something called Next JS middleware right so this is this is why so um this is where I want there is one thing I want all of you to take away from the video right like when it comes to building apps like this you don't really have to memorize all of the code or anything like that right all you need to know is what you need to Google for a specific functionality for example if you want to redirect users based on the request that they are making uh on your app right you are going to be using like one good way of doing it is using next.js middleware right and so you just Google next year's middleware and go through their page and then basically uh modify things as per your own requirement so what I'm gonna do first is we're gonna create a file called middleware dot JS at the root of the project right as written down in the instructions we're gonna copy this like starter code over here and if you're not using typescripts I'm going to delete um these types right and um it says over here that this function can be marked async if you are using a weight inside and that is exactly what we're gonna do right so we're going to add an async over here I'm going to comment this out for the moment and the other thing we need is like matching paths right so what middleware does is it basically anytime a user makes a request to your app right if they're trying to open your app if you're trying to hit some of your apis anything like that the middleware function basically processes that requests and decides what's gonna happen so you can basically for example redirect the user based on what you find inside the request right now what we want to do is like we don't wanna apprehend all of the requests that come to our app right so we go down here and it gives us like a a neat explanation right like maths all request paths except for the ones starting with like API and static files and image optimization files and things like that right um so this is exactly what we need right we don't so what we're gonna do is instead of the matchup that we have over here we're going to copy paste this enhanced method over here right so uh the middleware function is not going to be um used um unnecessary right now over here um we're gonna have to basically check if the request is coming from an authenticated user right like um from a user that is that has logged in through the spotix account the the way you can do that is we have like some utility functions provided by next auth for this very purpose right so what what I'm gonna do over here is as so we have like the request object right uh the request coming from the user so I'm gonna just say const token equals await get token right and get token is basically the utility function from next dot right and it takes an um essentially like two parameters right one of them is the request and the other one is basically a secret right and this is we already know that our secret is stored in our environment file under the uh name JWT underscore secret so we're just going to pull that up over here so that we can extract out the token if at all there is a token over here now we're gonna also extract out path name from request dot next URL right like this is the format in which um the um the request comes in right and what we're gonna say is if path name includes API auth right this is basically the authentication URL or if the path include or if we have like a a token right if you can find a token a value token inside the request what we're gonna do is we will leave the request as it is and that is being done by return next response dot next right otherwise if you don't have a token right and the path name is basically not equals to login so if the user is trying to access anything other than the login page and they don't have a token then we will basically redirect them using the code that they they had already given us in the example we're just going to change this about to route to login right slash login this is where the users are going to get redirected to and I'm just going to change this variable name over here and if nothing else it's gonna basically default to um just leaving the request as it is right so now we have the middleware setup right if we go back to our page and if we click on logout you're gonna see that we automatically get redirected to the login page because we no longer this session right like we are we have um we have gone out of our session right and we have logged out so we are no longer an authenticated user and in that case middleware basically says hey you're gonna have to go back to login page right and I'm gonna just add a couple of classes over here just to make things make this login page look a little bit better right um so I'm just gonna say it expired add some padding and I'm gonna apply some border radius and a background like I'm going to keep it green right uh I'm also gonna just add like a font weight over here right now this this looks much better so we have a login with Spotify button and what I'm gonna do now is if we like it already I'm already logged in in inside this browser with my Spotify account so what I'm about like I can just click on this right log back in into my Spotify clone if I click on logout anywhere I am redirected back to the login page because I am no longer allowed to access the application right so this is this is actually pretty cool and this sort of like um completes like most of the stuff over here so we have like the library we have like all of our playlists and everything and um I think there's like there's just one thing one small thing um left over here right which is basically this this weird scroll right like the entire screen is scrolling for some reason and it's basically scrolling roughly by the amount of roughly by the same amount as the height of the player and what we can see over here is we've actually placed the um the player um and did the parent tip outside of our main um tag right and that is that is what is causing this this problem right and now we can go back over here and you can see like the scroll is no longer working only the things that are meant to be scrollable are scrollable right so you can basically scroll through your library you can scroll through your featured playlists um and and you can basically do all of that stuff but you won't be able to um unnecessarily scroll inside this web app which is exactly um what we wanted right so um okay so this pretty much finishes up everything that we have over here the only thing that I I think I've left out is um just making sure that we have like the right refresh uh refresh token mechanism in place right because we noticed that while we were developing this for the past few hours uh sometimes um the request started failing right and that that tells me that hey maybe the refresh token is not working ended right so I'm just gonna take a look at this code over here so we have the refresh token over there I'm also going to add like um an extra check over here if we have the access token expires then we're gonna make this comparison right and check if the access token is valid but we are also going to forcefully check if um the refresh access token is actually working or not right and and how do we really do that well um so ideally we call this function basically when when um uh when an access token has expired right but we're going to call it pretty much forcefully now and I want to just make sure I'm going to console log this and just make sure uh to to see what what is really being returned over here right so what I did is I just commented out the um I just commented out those few three lines of code which basically check for a valid like with check the access token for the expiry value right and now it's going to refresh the access token every single time right it should at least ideally be refreshing the access token every time we um uh we try to get hold of the session object right or we try to log in for example right now what's gonna happen um is okay I can't see any of the logs right I can't see any log with respect to the refresh access token uh okay so refresh access token was actually an async function and for some reason I forgot to avoid over there so I'm just gonna add that over here and I'm going to click through a couple of views just to see if we can see the logs now and we are unable to see any logs right so I just want to see what is going on over here um so what I'm gonna do is I'll just put like another console log over here just to see what's happening right so I'm just gonna put this over here and this function should get called over here right like it should get called every time zero JWT callback is being called which gets called by the way whenever you um whenever you sign in right or whenever you try to get hold of the session object so I'm just going to put another console log over here just to make sure what's happening right I'm Gonna Save this and go back to my terminal right I'm gonna click through like a bunch of things and and like go to search search some stuff right okay so this is weird for some reason free are unable to see any any log right like anything with respect to this I'm just gonna restart my server once just to see if um if if that changes anything right and I'm just gonna click through like this artist page and oh it just refreshed okay so now we can see on the JWT and we can see refreshing access token and this is the refreshed access token right so they refresh access token endpoint is working correctly like we have new access token we have the expires in value and everything as expected right and um basically uh if if that is working fine and we are able to make requests to the um basically to this 45 API using this refreshed access token then everything should be working fine and how do we check that we just add another console log just to make sure we'll just do just to keep it like 100 sure we're gonna add another console log in the session callback because this is exactly where we're gonna be creating the session object so I'm going to click through a bunch of things I'm gonna go back to my terminal and I'm gonna see what's happening over here so um we don't see any logs over here um I'm gonna I'm gonna just log out of my Spotify once and log back in again right click through my library and stuff okay so now we can see the session object and the refresh token right so we have the exact same access token over in like the session callback that we received from our refresh access token that sort of seals the deal that basically means our refresh access token is working fine I'm gonna remove these console logs and uncomment the lines of code that basically check if the access token is valid or not and I'm going to remove this control log as well and this one as well right right so this is um pretty much done right um what we have like what I'm going to do is I'm just going to play and pause um like something in my actual Spotify uh the app right just to make my laptop an active device for Spotify API now can I can do like a little Showcase of everything we coded in like the past few hours right so we have this a completely functional search page uh we can see all of the featured playlists we can go inside them uh we can click on any of the artist's name and it shows us an artist page with like all of their top tracks and related artists we can actually search for anything right and we have the tracks uh we have the playlist we have the artists everything being displayed in these search results right all of this looks so neat so beautiful we can even play and pause any of these songs from anywhere inside our app by the way um again I'm really sorry like the audio from the last roughly two hours got messed up which is why you will be unable to hear any of these songs and which is exactly why I'm doing this voiceover for this like last section right instead of like giving you the raw audio of what I was actually saying over here but basically we have like everything pretty much ready right like we have the artist page and if you've basically if you've been watching so far I want you to give yourself a pat on the back because this was a long session and we've built out something really cool I want you to like the video subscribe my to my channel for more content like this and post your comments on how your build is going right um if you're facing any issues be sure to drop a comment if you've completed something be sure to be sure to talk about it and you can also go to our um Discord Channel where where there are like uh roughly 400 more devs working on projects like this and you can ask your doubts and it's going to be really helpful um but yeah this this sort of completes the video um if you've been watching uh this far along thanks a lot and see you in the next one foreign

Channel: Apoorv Nandan

Views: 18,479

Keywords:

Id: qFN6zQZU9jU

Length: 323min 50sec (19430 seconds)

Published: Sun Apr 23 2023