Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5 | RapidAPI

hi there and welcome to a project video where you'll build and deploy a youtube clone application in react.js using the newest version of material ui with a stunning new video section custom categories responsive channel and video cards channel pages and most importantly video pages where you can play the video straight from the app see related videos and much more jsm media is the best modern fully functional youtube clone application that you can currently find right here on youtube by building this single web app with me you'll get the knowledge needed to build any website that uses apis and talking about the category of websites that use apis almost every single website in the world you can think of uses an api there are many other tutorials out there teaching you how to create a website consisting of a navigation bar a few devs and a footer boring right today you'll learn how to develop a professional website and deploy to the internet so that you can share it with your friends potential clients and put it on your portfolio you might be wondering what are the prerequisites for building such an amazing website you just need to know a bit of html css and javascript it would be great if you already watched our beginner react course it's going to be linked down in the description with that you'll be able to develop this website using the most in demand technologies today such as react.js and material ui and with just a couple of other dependencies you'll build everything from scratch alone by watching this video today we're going to start simple and then we're going to move to more complex topics as we go alongside building this application you'll learn react functional components and their reusability react file and folder structure you'll achieve mastery using material ui version 5. perfectly placed media queries for satisfactory responsiveness on all devices using the rapid api visual studio code extension for testing apis and most importantly you'll learn how to fetch data from unlimited sources using rapid api essentially you'll become a master of working with apis if this video reaches 20 000 likes i'm recording a new video teaching you how to fetch data from multiple sources before creating a folder for our project code we must first visit rapid api the link is going to be down in the description the making of this entire app is possible only due to rapid api because we'll be using their youtube version 3 api this api is just one out of thousands of apis available in their api hub you're going to learn how to use most of these endpoints from this api we're going to talk about suggested videos search video details channel details channel videos and much more by utilizing this api you'll be able to later on create your own projects using any of the apis listed right here so to be able to use these apis make sure to use the rapid api link in the description and then you can click sign up or log in at the top right you can log in using google github facebook or just your regular email once you're in you'll be redirected to rapid apis hub this was the first step in our video now let's create a react application and then later on we're going to come back here and then make calls to this great youtube api before we dive into the project i have an incredibly important announcement for you we've recently added the free resources section to the js mastery.pro website the link is in the description so from now on alongside the professional project-based courses such as filmpire and nfd marketplace you can get entirely free guides and ebooks about react web3 and front-end back-end and full-stack development if you decide to get the courses by using the link in the description a special discount code will automatically be applied for you during checkout with that said let's dive right into today's video [Music] here on javascript mastery we always start from scratch and i teach you every step of the way so let's get started by creating a new empty folder on our desktop in this case we're building our beautiful youtube underscore clone application so let's call our folder youtube underscore clone and then drag and drop it into your code editor in this case we'll be using visual studio code currently the best and the most popular editor out there before we install the necessary dependencies we can install one visual studio code extension that we're going to use throughout this video so head to extensions and then search for rapid api that's going to bring you to the rapid api client extension through which we'll be able to test our apis while we are developing them straight inside of visual studio code so for now just install it and we're going to use it later on once you expand your visual studio code you can head to view and then terminal we're going to immediately initialize our react application and then create all the necessary dependencies so let's start by clearing out our terminal and then running mpx create dash react dash app and then dot slash to create it in the current repository this process usually takes just about a minute so let's let it do its thing and i'll be right back and there we go our application alongside its file and folder structure has been initialized now before we go ahead and run it let's first install all of the necessary dependencies that we'll be using throughout this project to check out the dependencies we can go to our package.json inside of here you can see some general scripts needed to run our application and you can also see a list of all the dependencies that we're currently using to make sure that your application uses the exact same versions of dependencies as i'm using in this video you can click the github gist link down in the description and then copy the dependencies alongside their versions straight from there once you do that you can select your dependencies and simply paste over them as you can see we're installing emotion react and emotion styled as these are the needed dependencies for material ui to work while we're on the topic of material ui we're also installing that mui is one of the best ui kits for react it is intuitive and it has that functional design that we're all used to all the most common components that we use in all of our applications so we'll be using mua material as our ui kit of choice for building our youtube clone application we're gonna also install icons material to have some icons then of course axios to make api calls and we have react router dom for our routing and one thing i would like to mention is that we are using the latest versions of mui and react router dom both of these packages have recently created their new versions mui coming with version 5 and then reactor dom coming with version 6. so by watching this video know that you're up to date with all the latest versions of all packages once you paste those dependencies in you can go to view terminal and then run npm install dash dash legacy dash beer dash depths this is going to install the same exact versions of dependencies so we can proceed with building this application once your dependencies is told there might be some vulnerabilities and if you want to fix that you can run npm added fix but at this point we're not going to worry about that too much now let's start our application to see it on localhost 3000 and it's immediately going to open up on localhost 3000. we right now have one error but we're going to immediately fix that and if you close this you can see that our application is up and running so what we can do now is explore the file and folder structure you can notice we have a git folder which was automatically initialized for us by create react app we have our node modules where all of our dependencies code is in we have our public folder and we have our source folder besides that we have a git ignore to ignore which files go to git and then package lock and packet json to keep track of our dependencies finally we have a readme to explain what's going on once you actually publish this to github in this case the most important folder is our source folder inside of there we have quite a few files but in this case we're going to make it even simpler and create everything on our own so you exactly know how react works behind the scenes let's go ahead and delete the source folder and let's right click right here on the root and create a new source folder from scratch inside of there the most important file we need to have is going to be the index dot js file inside of index.js we can import react from react and we can also import react dom from react-dom now in here we'll also have to import our app.js so let's create a new file called app.js and this is going to be the starting point of our application so let's create a basic functional component by running rafce if this command didn't work for you then you need to go under extensions and search for es7 plus react redux react native snippets install this extension and then you're going to have access to a lot of useful react snippets such as rafce now that we have our app we can go back to index and we can import it by saying import app from dot slash app now we can create a root of our application by saying const to root is equal to react dom dot create root this is new with react version 18 and then we need to pass in the document dot get element by id root this is the only place in our entire react application where we're literally fetching from the dom we're getting the div with an id of root so let me show you what i mean inside of the public folder we have an index.html file and it looks like a lot is happening but if we remove all of these comments like this there's one more remove everything that shouldn't be there and indent this properly you can notice that this is nothing more than a simple html5 document that only has one div and that is a div with an id of root while we're here we can also add a few additional links to make sure that our material ui works properly so you can go to mui.com click get started and then head to installation there you can notice that we have to install some packages which we already have done and now we have to also add the icons and the font as two additional link tags so let's copy this right here and paste it right above the title we can of course repeat the process with the font icons let's indent that properly and now we have everything we need while we're here we can also rename this application i'm gonna do jsm media feel free to call it however you want to great with that said we can now go back to our index.js and we can use this route by saying root.render and then the only thing we want to render is the self-closing app component great and before heading to the browser we just have to add the forward slash client to our react dom import again this was changed in version 18 of react and now that we've updated that just before we check the app in the browser we can open up our terminal press ctrl c and then y to stop it from running and then we can simply run mpm start one more time to make sure that all the changes were properly updated and as you can see this ran our application in the browser if i zoom it in we can see app right there and that's exactly what we were expecting because if we now go into the app you can see that that's the only thing we're returning there is just one more thing left to add to our index.js and those are our simple styles alongside all the components we'll be creating in material ui i created a simple index.css stylesheet that's going to help us with some generic styles so in that same github gis down below where you found all of the packages you can find an index.css file simply paste it inside of the source so that's going to be source index.css and there you can see about 100 long css file that simply has some general styles such as resetting the html and the body's margins paddings setting up the regular anchor tags and so on and now of course we have to go back inside of the index.js and say import and then that's going to be dot slash index.css great with that said we're now ready to go inside of the app.js and start creating the structure of our entire application let's get started to start creating our layout we can first import a couple of things from react router dom and those are going to be browser router routes and then a route and those are coming from react dash router dash dom we're going to also import something known as a box coming from add mui forward slash material a box is nothing more than a simple div element now when it comes to the output of this app we can turn it into an instant return by simply using the parentheses right here and then removing the return keyword here we go now instead of a div right here we'll be returning a browser router that we're going to use to wrap our entire application with inside of that browser router we can render a box element and that box is going to have an sx prop equal to background color is going to be hash 000 which is pure black inside of that box we're going to have our navbar for now we can simply type it out later on we're going to turn this into a real component and then below our navbar we can have our routes this is a built-in component by react router dom and inside of it we can place individual route components our first route is going to have a path of forward slash meaning just the route route and it's going to be exact also it's going to have an element which is going to render and that is going to be a feed component so we can create a self-closing feed component like this in the browser we're going to get an error that feed is not yet defined but that's fine for now we're going to have many different errors but let's just go through building the entire project structure first and then we're going to focus on file and folder structure and creating those actual components so we can move to our second route which is going to have a path equal to forward slash video forward slash and then column id like this this means that if we go to four slash video and then some random sequence of numbers or letters like one two three one two three we're going to go to a specific videos page and we can render a new element there which is going to be a video detail page now we can duplicate this two more times instead of rendering the video for the next one we can render a specific channel so everything is going to be the same but instead of video detail it's going to be channel detail and finally the last one is going to go to search and then we want to have a specific search term that we want to search for and this is going to render the search feed great now we have almost all of the components that we have to create and we can also turn this snap bar into its own component so that brings us to our next step the routes are ready but let's go ahead and create those actual components we can do that by creating a new folder inside of the src folder and we can call it components inside of those components let's go ahead and create those five components the first one on our list is going to be navbar.jsx and we can simply run rafce inside of it to create a simple navbar component we can proceed by creating the feed.jsx component and the same thing rafce let's proceed with the third one which is going to be video detail dot jsx and we can again run rafce the fourth one is going to be channel detail jsx and we can again run rafce and for now there's just one more left to go and that is going to be the search feed dot jsx and we can again run rafce with this simple structure we created five different components which we can now import inside of our app.js to import them you can double click the navbar keyword right there press ctrl space if you're in windows and then simply press enter this is going to automatically import the nav bar from dot slash components forward slash navbar if this didn't work for you if i'm not mistaken you'll need an extension called intellisense so if you search for path intellisense and npm intellisense you can install those too and then by pressing ctrl space or command space it's going to give you an immediate import with that said if we now repeat that process for all other components you're going to notice that we're going to have five extra lines and that really clutters our app.js view five different imports this is not what you want to have i'm going to show you how we can import all of these in one single line for that we're going to need one extra file inside of the components folder so let's create a new file called index.js inside of there we can say export in curly braces default as the setup is a bit tricky but you'll be able to repeat it from now on for all other components and you can say default as the name of the component from dot slash and then the file and now we can repeat this four more times the second time we're gonna have the feed then we're going to have the channel detail after that we're going to have the search feed so let's do that right here and finally we're going to have the video detail there we go so now we're exporting all these components and now back inside of the app.js we can remove all of this and we can say import now inside of curly braces we can just start naming these components and they'll be coming from dot slash components that makes the most sense right import navbar from components import feed from components import video detail channel detail and the search feed all of these are coming straight from dot slash components can you see how simple it is to understand this and how simple it is to look at this code we created our entire app structure by using this great file and folder system in reaction yes now if we go back into our application you're going to notice that right now we can see the nav bar and we can see the feed because we are on localhost 3000 but if we switch to something like that's going to be search and then forward slash javascript mastery you can see that now we can see the search feed we can repeat the process for something like video and then one two three let's remove the search first and then you can see that we're gonna have the video detail so our routing is indeed working if you want to get some more practice on how to build professional react.js application that follow the cleanest possible code standards on larger projects i would strongly suggest that you check out jsmastery.pro on there we create even longer and more comprehensive projects one of the best examples of that is the film park course there in the span of 10 hours you're going to learn how to build a professional movie application by using redux material ui and you're even going to learn how to add voice functionalities using alan ai it's all covered and i teach it step by step just as i teach it right here on this channel we're going to build different pages such as discover movies movie details recommendations and save to favorites this is how the final application would look like it's going to teach you how to use material ui to its fullest potential and it's also going to teach you how to do routing and of course it's going to be fully mobile responsive as you can see it seems just like a native mobile application but when i say mobile i don't just mean mobile i mean tablet it's also going to be for laptops larger laptops and even 4k devices so it works great on every device size the course contains some react.js knowledge that you'll utilize across all of your react projects but with that said let's go ahead and continue with our youtube clone application we can clean our working environment a bit by closing all of the currently open files besides the app.js and then you can control click to go into the bar now bar being at the top is going to be the first component that we're going to implement together so let's go ahead and get started we can start with our navbar by importing one component from mui that's going to be a stack it's coming from add mui forward slash material and if you want to check out what one component is you can simply hover over it check out the demo site and then click stack right there this is going to immediately bring you to that component's documentation page so you can see that a stack is used for one-dimensional layouts it can be used in a column but it can also be used in a row so in this case we'll be using it in a row to form our navigation bar and throughout this project we'll be using a lot of different mui components so if you're wondering what some of them do simply hover over them and then go to the demo page you can also just research this documentation page a bit they have all the components listed right here on the left side so if you want to use one of these components for example a button you can read more about it here and immediately get the code to use it in your application right from here with that said we can also import a link component coming from react router dom now inside of our navigation bar we'll also be using our logo and to speed up the process of creating this application and to teach you more things in shorter amount of time i've already prepared that logo for you you can find it in that same github gist you visited before down in the description there you'll be able to find a constants.js folder so that's going to be a special folder containing some things we'll be using throughout our application first of all create a new folder inside of our source folder called utils this stands for utilities something that we used all across our application inside of there create a new file called constants.js and then inside of there you can paste that file that you can find in the github gist if you quickly look through this you can see that we're just importing some icons we have our logo url right here we have our array with categories that we're going to use on our sidebar and then we have some strings for videos that don't have a url a channel url or a title everything is right here and as you can see there is absolutely no logic included here it's just some strings and arrays that we'll be using throughout our application so now we can go back inside of our navbar and we can import that's going to be a logo coming from dot slash utils forward slash and constants there we go we can turn this into an instant return by removing the return keyword and also using the parentheses right here and then we can return a stack element that stack is going to have a direction equal to row and align items equal to center it's also going to have a p of 2 which stands for padding and it's going to have a special sx prop with sx you can provide any styles to your material ui components so if you're using an mui component you can give it an sx prop and therefore provide the styles right here in line we can give it a position style which is going to be sticky we want it to stick at the top we're going to also give it a background which is going to be 0 0 0 which is pure black then we want to position it at the top by saying top is 0 and give it a justify content which is going to be set to space between great now we can expand this in a couple of lines just to see it better we are providing this component some kind of properties direction align items sx and so on so what are these and how do we know that a stack accepts those properties well you can check the api part when you hover over that component and then click stack api in here you can see a list of all of the properties that a specific component accepts and again as we keep going through the video you can simply go to sound the components api documentation and then see what does a specific prop do with this video i want to teach you not only how to build this project but rather teach you how to learn by reading the documentation on your own that is the only way you're going to become an independent developer and again that's the same thing that we do on js mastery jsmas3.pro so if you like the teaching here you're definitely going to love it there with that said we now have our stack component and we are ready to start implementing our navbar at the start we're going to have a link and that link is going to just point to home it's going to have a style equal to display flex and also align items is going to be set to center inside of there we want to render an img tag which is going to have a source equal to logo alt is going to be set to logo and then we can set the height to be equal to 45 and you might have noticed that so far we didn't really look into the browser and that's okay that's because we have been just focusing on the structure but now this logo is the first thing that we can actually see so what we can do is divide our window into two smaller parts on the left side we can have our code editor and then on the right side we can have the app we're developing so we can see the changes live right here on the second tab i also have a finished version of the application that you are going to build today so we can instantly see what we're building at the moment right now we're building the navigation part so the logo is already there but now we have to create this search bar so from time to time we're going to reference this application to show you exactly what we're building and how now let's go back and let's implement the search bar that search bar is going to be right here below this link and it's going to be a new component that we're going to create so let's simply create a new component inside of the components folder called search bar dot and for now we can run rafce we can also export it right here inside of our index from the components and say export default as search bar from dot slash search bar now of course if we go back to the nav bar we can import it that's going to be import search bar from dot slash search bar and if we go on localhost 3000 you can see that now we have right here the feed and on the right side we have the search bar now of course we chose the dark mode so everything is currently dark but now we can go into that search bar and start implementing it so that we can actually see it right there inside of our search bar we can import the use state hook coming from react we can also import the use navigate hook which is coming from react router dom we can import a couple of components such as a paper and an icon button and these are coming from add mui forward slash material and finally we can import a search icon which is coming from add mui forward slash icon stash material and that's going to be it but we also have to add curly braces around it there we go now we have all the imports that we need inside of our search bar we can render a paper component so right here that's going to be paper and a paper is nothing more than a simple div that has a white background and some elevation it appears like it's floating on the top that paper is going to have a few props the first one being component so it's going to take a form of a form in this case so a paper is going to be a form in this case our search bar it's also going to have an on submit property which we're going to leave as an empty callback function for now and it's also going to have an sx property remember sx is for styles it's going to have a border radius of 20. now let's see if we can see the changes already if we add some text in here like test we should be able to see it right there and we can it's also going to have a border of one pixel solid and then we can use e3 e3 e3 it's barely visible but it is there we can also add a padding left equal to 2 and as you can see with sx properties we can sometimes shorten these such as pl for padding left box shadow is going to be set to none and then we want to have a margin right only on small devices set to 5. and this is phenomenal we can provide specific styles for specific devices with that said inside of our paper we can have an input tag and that input is also going to have a few properties the first one being a class name of search dash bar then we can give it a placeholder that's going to say something like search dot we can also give it a value which at the start is going to be set to an empty string and we can give it an unchanged property which at the start is going to be set to an empty callback function of course we're going to implement all of these really soon and below our input we can add an icon button component and an icon button component does exactly what it says it is a button for an icon so we're going to give it a search icon inside of there of course let's apply some styling so it's going to be of a type is equal to submit it's going to have an sx property where padding p is 10 pixels and also color is set to red so let's do color of red and it looks like i used the wrong import right here instead of search icon it was supposed to be just search from mui icons material so we can rename this to search right here and immediately we can see a beautiful search icon appear right here and it is actually a button that is going to be it for our search bar and with that our navbar at least for now because soon enough we're going to come back in here and we're going to make this search work of course we cannot do that yet as we're not fetching any videos but we will fetch some videos soon because we're going to need them for our next component which is the feed hand the feed is also one of the most important components of our application so let's dive right in our feed is going to be consisted of two primary parts the sidebar on the left side and then the video feed on the right side so let's get started we can first import the use state and the use effect hooks from react we can also import a couple of components such as box stack and typography coming from add mui forward slash material now we can turn this div into a stack which is going to be our primary wrapper and it's going to wrap the sidebar and the main part we can give it an sx prop of flex direction there we can open up a new object and say usually meaning just sx the prop is going to be set to column and then on medium devices and larger the flex direction property is going to be set to pro that is going to allow us to achieve a look that looks like this we have rows on devices that are medium or higher meaning laptops tablets or desktops and then on mobile view it's going to look something like this everything is going to be in one column now let's collapse this back right here and let's continue implementing our feed inside of the stack we're going to have a box and that box is going to have an sx property of height that height is going to also be dynamic so usually it's going to be set to auto and then on medium devices and higher it's going to be set to 92 vh meaning 92 vertical height so now you can see that everything is going to turn dark we can also give it one more prop which is going to be if we can find the end of the height here that's going to be border right and that border right is going to have one pixel solid and then 3d 3d 3d that's a great color finally we also want to give it some padding so we can say px for padding horizontal usually it's going to be set to 0 and then on medium devices and higher so md that's going to be 2. there we go so now we can see just a bit of padding and a really tiny gray border inside of there we want to render our sidebar so for now we can write it like this and then soon enough we're going to turn it into a real sidebar component and while we're here let's also add our typography now typography is just a simple component that is used for all text elements instead of p tags and headings you can check out the demo right here and notice that if you scroll down you just have nice headings or subtitles and body elements with that said let's write something in there such as copyright 2022 and i'm going to call it jsm media feel free to use any name you'd want here let's also give it a class name equal to copyright and let's give it a variant and that's going to be body 2. if we save this we cannot yet see it because we have to provide the sx prop give it a margin top of 1.5 to divide it a bit and then we can also give it a caller equal to fff that is white in hexadecimal and there we go we can see it right there of course this is going to go on the bottom below our actual sidebar which brings us to our next step we can now create a new component called sidebar.jsx again run rafce and then export that sidebar from our index.js from within components so let's simply say sidebar and now back in our feed we can now turn this into a functional component hold ctrl or command and press space and automatically imported from dot slash sidebar now we can control click the sidebar to go into that component and start implementing it right away just to see if it works if we hover here we can see the sidebar which is exactly what it says right there now to implement our sidebar we can import the stack component one more time from add mui forward slash material and instead of this file we're going to also import the categories coming from dot slash utils forward slash constants and if you remember that is that file that contains an array of all the categories alongside their names and the icons so what we can do now is turn this into an instant return just so we have some more space and we can again use a stack component the direction of that stack is going to be set to row but then we can give it an sx prop and give it an overflow y which is going to be set to auto we can also give it a height prop usually it's going to be set to auto and then on medium devices it's going to be set to 95 and we can also give it a flex direction and on medium devices and higher it's going to be set to column because we want to show it like this but keep in mind if we go to mobile and go to something like iphone 12 pro then you can see it's going to appear right here in a row so again we're making everything responsive right off the bat now inside of there we have to map over our categories so we can say categories.map we get each individual category and we want to instantly return something keep in mind when you're returning instantly you want to have a parenthesis right here instead of a curly brace for each category we want to return just a regular button that button is going to have two span elements the first span element is going to render the category dot icon and then the second span element is going to render the category dot name now if we save this there we go we can immediately see that's about 10 or 12 buttons that have the icons as well as the text but now let's style them a bit we can give this button right here a class name that is going to be equal to category dash btn that's automatically going to update it and now if we hover over it you can see that we can see something but still it appears as if all the buttons are gone so what we can do is we can give each one an inline style and say background is going to be dynamic we have to figure out which category is currently clicked so for now let's just imagine that the new category is clicked so i'm going to add a variable at the top const selected category is equal to new written like this with capital n so now we can say if category.name is triple equal to selected category then and end meaning then have the caller to be fc1503 now if we save this you're gonna notice that that's going to be this red color right here only if it is currently selected then we also want to give it a color and the color is going to be set to white so now we have all of these buttons right here but this one is selected red we can also give it a key which is going to be equal to category.name because whenever we're mapping over something in react we have to give each property a key now you can notice that it's not quite like what we have on here these are of a different color and there's a bit of space right there so let's implement that right away by styling those spans our first span is going to have a style equal to color and we want to make that dynamic as well so if category dot name is triple equal to selected category in that case we want to make it white otherwise we want to make it red now if we save this okay it instantly changes color and we also want to give it a margin right off 15 pixels now if we save this it's already looking so much better now let's also style the category name so let's give it a style and we want to give it an opacity so we can say if category.name is triple equal to selected category then we want to set the opacity to 1. otherwise we want to set it to 0.8 to make it just a bit grayer it's just a bit grayed out as you can see right there great so now we cannot yet shift between those because the new is selected statically right there but soon enough we'll be able to switch those categories and get real videos based on what we select with that said we're done with our sidebar at least for now and we can get back to our feed inside of our feed as you can see right there we have to have this title saying which category are we currently viewing and then we have to show all of our videos so let's focus on that right away we can go below our sidebar below our typography and below our box and then we can create a new box which is going to be for our videos inside of there we can create a new typography property and that typography is going to say span that span is going to say videos and we can give it some styles so we can say style color is that same red color fc1503 make sure to put a hash at the start because this is a hexadecimal value and then we want to render a word that is going to say which videos are we watching js mastery videos coding videos new videos or something else so for now let's simply hard code this in as new there we go right now that's not looking good so let's apply some styles let's give it a variant equal to h4 to make it bigger let's also give it a font weight equal to bold let's give it a margin bottom of 2 to divide it a bit from the videos which we're going to see soon and then let's change the color by saying sx color is white there we go new videos now let's also apply some styles to this box for example p dash 2 to divide it a bit from the sidebar let's also give it an sx prop of overflow y is set to auto height is going to be set to 90 vh and then finally flex is going to be set to 2. this is going to make it take more space than the sidebar now let's save this and now we are ready to start adding the videos right below this typography so what we can do is go below the typography and create a new self-closing component called videos of course let's go ahead and add it to our components folder videos.jsx we can immediately type rafce in there go to our index and then export it export default as videos from videos there we go so now if we go back to videos it's saying just the videos and we of course have to go back to feed to actually import it so at the top we can say import that's going to be sidebar and then a space comma videos and all of that is coming from dot slash components and there we go now it looks like it automatically imported those in two different lines but as we learned we can import them in one line by saying import sidebar and videos from in this case just dot slash because we're already in the components folder great the next thing we're going to do is pass a videos prop into the actual videos but right now we cannot really pass anything we can just pass an empty array because we don't yet have the access to those videos so our next step is going to be to fetch the data to be able to show all of these videos so we're going to scroll up and we're going to start implementing the api data fetching part and of course for data fetching we'll be using rapid api so the next part we're going to learn how to fetch from all kinds of apis within your react applications is coming right up this is maybe the star of the show of this entire video of course besides creating this beautiful layout that we're looking at right now so let's get started with api data fetching and react to start fetching our great youtube api data we have to go to rapid apis hub the link is going to be down in the description there you can first log in you can log in using all of these social media platforms or just using your email once you log in you can click the youtube v3 link down in the description that's going to lead you straight to the api that we'll be using throughout this video once you check this api out instead of test 10 point it's going to say subscribe right here you can click that which is going to bring you to the pricing section but don't worry you won't actually have to pay for it you can just subscribe to the basic version which is entirely free and you get 500 requests a day which is plenty so once you subscribe you can go back to endpoints and right here you're going to see your options so for now simply copy the entire options object because we're going to use it really soon once you copy that you can go back inside of our application and then let's create a new file inside of utils called fetch from api dot js this is going to be our utility function for fetching api data we can first import axios from axios and then we can simply paste our options object inside of here we have all the headers that we need but we have a couple of things that we maybe don't need such as we don't have to specify this is a get request because we're going to do that using axios then the url we can put in a special variable so let's call it something like base underscore url and then we can declare it right here const base underscore url is equal to and then we can take that same string that we just copied there we go now besides that we don't have to pass any params at least not yet so besides the max results is 50 this is going to be all that we need now you're going to notice that we also have the x rapid api key and then x rapid api host we can leave the host as it is but when it comes to the key we'll have to safely store it in our environment variables so let's copy this entire key instead of the key let's say process dot env dot react underscore app underscore rapid underscore api underscore key and now we can go back inside of our file tree and then right in the root of our folder we can create a new file called dot env inside of there we can paste our key but we can also copy this name and then say react app rapid api key is equal to this key right there of course use your own key which you're going to get in this options object with that said we now need to re-run our application for the changes to take effect so let's simply press ctrl c y and then we can run mpm start there we go our app reloaded on localhost 3000 and we are ready to put this options object to use so let's say export const fetch from api is equal to an async function like this that function is going to accept just one parameter which is going to be a url now what we can do is say await axios.get and we want to call a template string that looks like this and to it we're going to pass the base url so whatever request we make we always wanted to start with the base url that's why we extracted it in a new string right there and we don't have to pass it right here as the url to the options object with that said we want to add something to that url and that is going to be the url string which we're getting as a param that's going to allow us to call forward slash base url and then forward slash something like get channel or we can change that to get videos we're going to make this incredibly dynamic and we're going to utilize a lot of different endpoints from this api such as search suggested videos video details channel details and much more with that said let's try to finalize this so what we can do is also pass the options object as the second and the last parameter into our axios.get function then we have to get the response so we can say const response is equal to a weight axios that get and then the call to that url now we can immediately destructure the data that we get back from that request and the only thing this function will do is it will return dot data and we can then call it from within our components this is it this is the function that allows us to call this api pass some dynamic url and then call it from within any component in our application we can immediately try it out by going back to our components and then back to our feed component inside of this feed component we can import fetch from api and that will be coming from dot slash utils forward slash fetch from api great so how do we make use of this function well with a use effect we want to call fetch from api as soon as our feed loads because we want to immediately fetch the data so let's create a new use effect right here use effect is a life cycle hook which gets called when the component initially loads we also have to provide a dependency array and for now we're going to leave it empty meaning that the code inside of this function will only run when we reload the page now from inside of there we want to call the fetch from api function which we created and we want to pass something to it we want to pass the remainder of the url that we want to call so it's going to be youtube v31 rapid api for slash in this case we don't want to provide the forward slash search in the url because we're going to add that to that url we just want to have a base url right there now we can say search and then question mark part is equal to snippet and we can say q as in query is equal to selected category like this and of course we have to make this dynamic so we can turn it into a template string this is going to go hand in hand with what we are just about to implement to our sidebar once we select a specific category we want to update it and then we want to fetch the videos for that specific category so let's fix this error right here by defining a new use state field so let's start typing use state we can use this function that's going to create it instantly and we can say selected category set selected category and then at the start it's going to be set to new with the capital letter n there we go now it looks like i missed an s right there that's supposed to be utils and now we can see our application again since we're using this variable right here inside of the use effect we also have to provide it inside of this dependency array that means that it's going to recall this function whenever we change a category so how can we actually change this category so that instead of new it says js mastery videos right here or coding or react.js well we can do that by passing the necessary states into our sidebar so we can expand this and we can pass the selected category which is equal to selected category state and then also set selected category which is equal to set selected category now back inside of our sidebar remember i told you we're going to go back in here we can now accept the selected category as well as set selected category right here and that's coming through props as we're calling this component we no longer have to use this static variable so let's remove that but now of course let's implement the logic to update that category so what we can do is make use of this function and that's going to happen once we click on any one of these buttons so let's simply add an onclick property right here below the class name on click we're going to have a callback function and we simply want to set selected category to be equal to category dot name that is it now if we keep changing things you're going to notice that the highlight of the button actually changes but it still says new right here to fix that we can go back into feed and we can see that right here new is hard coded so instead of new let's render the selected category and there we go now it's going to say coding videos js mastery videos nextgs videos and that works now based on that we can make different calls to our fetch from api function the only thing we have to do to extract the data is to attach a dot then function that then is going to be executed once we actually call this function and once it returns us a promise that's going to result to a successful return and then we have to add a dot then function to it that then is going to be a result of a promise so this right here is an asynchronous function so we cannot simply say cons data is equal to and then a call of that function because it returns a promise with asynchronous functions we have to chain a dot then to it so to be able to get the data we immediately get it right here as the first parameter of the dot then and the only thing we have to do is set it to the state of videos so we can create a new state const videos set videos and at the start that's going to be set to an empty array now that we have the state we can simply call the set videos state setter and we can say that's equal to in this case it's simply going to be data dot items there we go now how can we be sure that we are actually getting back to videos well remember where we were we were just at the point that we're going to send the videos over to the videos component so instead of sending an empty array let's now send the real videos so let's go back into the videos component and now we can actually console.log to see what we're passing so let's console log the videos and those videos will be coming from of course props so we can destructure prompts right there and then get the videos let's open up our inspect element open up the console as well expand it just a bit and open up the info tab as you can see we successfully get back an array with 50 different elements and if we can guess it correctly those 50 pieces of data represent youtube videos so this is working perfectly not only that if we now switch to a different category right here you can notice that we're going to get another 50. there we go every time that we call we're going to get new 50 results perfect so now we have to figure out what is hiding in those 50 elements how does each one of these objects look like and then we can create a video card that looks just like this so now that we're properly fetching the videos let's start by creating the layout of the feed component we can do that by closing this we can remove this kansa log and we can literally dive into just creating our layout inside of our videos we can first import a couple of components from material ui let's first import the stack component which we've already used a couple of times so far and let's also import the box component which we have also used now instead of this div we're going to render a stack component and let's give that stack a direction that's going to be set to row let's also give it a flex wrap property equal to wrap and then justify content which is going to be equal to start we can also give it a gap is equal to two now inside of there we can map through all of our videos so let's say videos dot map we get each individual item and then we're going to also get an index now for each one of these indices or videos in this case we want to render a box element that box is going to have a key equal to idx as an index and we want to render a video card but they're going to be two different types of videos that we're getting one is not going to be a video at all so what am i even saying well if we search for javascript mastery or if we click js mastery right here you're gonna notice that we get back a profile alongside all of these videos so this is not a video but it's rather a channel consisted of different videos that they post there so what we need to do is we need to take into consideration are we going to show the profile or are we going to show the video and we can do that by checking what data does it return so we can start by rendering the video if the item has an id and then the id points to the video id that means that it is a video so we can say and and and then we want to render a video card component a self-closing video card and we also want to pass a video prop to it which is going to be equal to item let's expand this to be able to see it better there we go so if we have the item dot id dot video id then it must be a video card now let's duplicate this if we have the item dot id dot and then if we have the channel id right there then we want to render a different component called channel card and instead of passing the video we're going to pass in the channel detail there we go so hopefully this makes sense we are immediately taking into consideration what our api returns and what we're going to present on the screen now let's create those two components let's create a new component called video card dot jsx we can run rafce inside of there and let's create another one called channel card jsx run rafce again we can export both of these components from the index the first one is going to be video card and the second one is going to be channel card there we go and now if we go back to our videos we can now import both of these components so that's going to be import video card coming from just dot slash because we're already inside of the components folder and then we can also add the channel card right here coming from dot slash we no longer have any errors but now if we expand this properly we are rendering these cards and now hopefully we should be able to see something right there and would you look at that we have a lot of different video cards but it seems like we cannot see a channel card so far if we go into this channel card it should be saying channel card maybe you can see it but i am definitely missing it right here i can only see the videos oh that's right that's because we're in the homepage but if we now switch to js mastery for example you can see that the first one on the list is indeed a channel card and all the other ones are video cards perfect now what we can do next just to be able to see something is we can comment out the channel card and we can focus on the video card first by moving into the video card component now this is almost going to be the main star of our show because our feed is consisted of many different video cards that look just like this so our next step is going to be to implement the look and feel of our feed by creating the video card component let's get started to start implementing our video card let's first import the link component coming from react router dom because once we click on that card we'll actually have to navigate to the video detail of that card we also want to import a couple of components from mui that's going to be typography we're going to also need a card a card content and a card media for that great video thumbnail all of these are coming from add mui forward slash material we also want to import the check circle which is going to be coming from add mui forward slash icons dash material now that we have all of those we also want to import some demo data so let's import demo thumbnail url and that's going to be coming from dot slash utils forward slash constants alongside the demo thumbnail url we also want to get the demo video url the demo video title we also can get the demo channel url and finally the demo channel title this is going to be used in case we cannot fetch the proper data for some of the videos that we'll receive then we just simply want to show some demo data to be able to still kind of check out the rest but we're going to mask the fact that we're missing some other data as well great with that said we know that we're passing a prop called video into this component and we can immediately start exploring it a bit by simply cons logging the video component to see what we're getting from it so let's open up the inspect element let's go to the console to the info tab and you can see that we get back an object now this object is going to have the id property and inside of that id we have the video id which is what we're concerned with and then we have the snippet property so let's immediately destructure those properties from the video so let's only take the id and then we can one more time destructure the video id coming from that id with this specific syntax what we can do next is we can also destructure the syntax so let's go into the video and then right here after the ending curly brace we want to destructure the snippet so now if we console lock the video id and if we console log the snippet we're going to immediately get those values there we go we have the video id and then the snippet contains a lot of different data that we can use to show that right here so let's focus on actually rendering that card we can remove those kinds of logs and we can remove this window right there we're going to render a card in this case and inside of that card we're immediately going to have a link component and that link is going to wrap the card media component that card media is going to be a self-closing tag which is going to have an image property and then inside of there we want to go into the snippet question mark dot thumbnails question mark dot hi question mark dot url i'm not sure how this card got there so once again it is snippet dot thumbnails dot hi dot card make sure to put these question marks before every dot because that way we're not going to get any errors it's just going to be undefined now if we do that we can immediately get some errors at least but that's fine and if we now go to errors you can notice that sometimes we're getting some undefineds it looks like the above error occurred in the link component okay so our link definitely needs a 2 property so we can say 2 and that's going to be equal to if video id exists then we want to go to forward slash video forward slash and then video id if it doesn't exist then we want to go to demo video url there we go do we have that right there well it looks like we do but i misspelled it so now if we save that we still cannot see those images but that's because we have to apply some styles to that card media tag so let's put this into a couple of rows expand this just a bit and now our card media is going to have an image property but it's also going to have an alt property so we can say alt is equal to that is going to be snippet question mark dot title and then most importantly we can give it an sx property where we can give it a width equal to 358 pixels and then height is going to be equal to 180 pixels and if we save that we should be able to get all of these thumbnails for these videos that is great if we switch to js mastery you can see our great thumbnails as well we're working on a lot of different project-based courses such as building e-commerce stores dashboard tick-tock clones or fitness and gym applications with that said we're now showing our card media but now we're going to move to the actual card content which is the title and then the channel that posted that video below our link containing the card media we can create the card content that is another material ui component that card content is going to have an sx property of background color and that's going to be equal to hash one e one e one e and we're also going to have a height equal to one hundred and six pixels there we go so now if we close this properly and save it we can see that this looks a bit more like a card now we can properly open up this tag and then inside of there we're going to have one more link this link is going to be almost the same as the initial one so we can simply copy this link pointing to the video id and we can close it right there inside of this link we're going to have a typography so let's create a new typography and this typography is going to render the snippet question mark dot title and then dot slice from 0 to 60 characters because some titles are going to be a bit too long so now we can see this dark text right there if the title doesn't exist we can render the demo video title and then say dot slice from 0 to 60 as well there we go now let's make this a bit bigger by giving it a variant of subtitle 1 let's also give it a font weight equal to bold and finally caller is equal to fff and now we have a proper title now we can essentially duplicate this entire link and the typography down below and instead of pointing to the video id we're going to point to the channel id so let's say if snippet question mark dot channel id if it exists we're going to point to channel forward slash and then that's going to be snippet question mark dot channel id there we go or we're going to render the demo channel url there we go and of course now we don't want to simply render the title two times for the second time instead of the video title we want to render the channel title so we can say snippet dot channel title or that's going to be demo channel title there we go javascript mastery right there but in this case we want to also give it a variant of subtitle 2 to make it a bit smaller and also set a color to gray to make it a bit less pronounced and let's also give it an icon by saying check circle and then we want to give it an sx prop which is going to be font size is equal to 12 color is going to be set to gray and then finally margin left is going to be set to 5. in this case we'll have to render this as 5 pixels if we save that this is now looking more like it but the card definitely expands a bit more than it should so let's apply some class names to our wrapper card component we can give it an sx property equal to width now we can open that as a new dynamic object inside of there on medium devices it can have 320 pixels of width but on extra small devices it can have 100 of the width now if we save this is going to look more like it because we can see two cards per row now and also we want to give it another property of box shadow is going to be set to none as well as border radius is going to be set to none as well there we go so now we have these great looking cards and it looks like the border radius remained a bit right here so instead of none let's change it to zero there we go so now we have a proper card right there now let's expand this and just enjoy a bit to see how great this is looking as you can see we have different cards right there and our videos are rendering all of these are from js mastery but since we already implemented the data fetching logic we can now switch to coding we can switch to next years for example as well as music education podcast movies and more so this is working perfectly now it just looks like this first card has some space right there so we have to check what that empty space is for and i think that is going to be because there is a channel card appearing right there so let's go ahead and focus on that channel card right away we can do that by going to our videos let's expand this just a bit so we can see two per row and let's uncomment this channel card now if we go to the channel card you can see that the text is right there but of course let's go ahead and actually implement it so that we show this great looking profile picture to start with our channel card we can first import a couple of components from mui these being the box we're also going to get card content card media typography and all of that is coming from add mui forward slash material we're also going to import the check circle which is an icon coming from that's going to be add mui forward slash icons material we also need to get the link component coming from react router dom and we're also going to get the demo profile picture and that is coming from dot slash utils forward slash constants now keep in mind we're passing from our videos the channel detail to our channel card component so right here through props we can get our channel detail for each channel let's automatically return and that's going to be a box element so instead of a div we want to return a box right here that box is going to have quite a few styles so let's create a new sx property to properly style it it's going to have a box shadow equal to none it's also going to have a border radius equal to 20 pixels so let's do 20. now if we save this we cannot yet see anything but bear with me we'll have to add something inside of it to actually be able to style it so let's start immediately by wrapping everything inside of our box with a link component because when somebody clicks right there we want to link to that channel so that link is going to have a two property two dynamic forward slash channel forward slash channel detail question mark dot id question mark dot channel id inside of there we want to render a card content that card content is going to have an sx property equal to display is set to flex flex direction is set to column justify content is set to center text align is set to center as well and then color is going to be set to hash fff there we go now we are ready to add the card media so if we go back we should finally be able to see something right here so let's add that card media it's going to be a self-closing component and we can give it an image property equal to channel detail question mark dot snippet question mark dot thumbnails question mark dot hi and then question mark dot url that is where our url is hidden and in case we cannot fetch the profile photo we can also say or demo profile photo or in this case it's going to be picture now if we save it it's not going to show up yet because we have to give it some styles so let's first set the alt tag to be equal to channel detail question mark dot snippet question mark dot title and finally for the styles we can give it an sx property that's going to be set to border radius of 50 which makes it a circle we can give it a height equal to 180 pixels as well as width equal to 180 pixels if we now save this you should finally be able to see this image again make sure you are on the js mastery because this is the search term for the actual channel if you are new there is no youtube channels to show but here there is a specific one which matches this search term with that said let's also give it a margin bottom of two so that's just going to be mb is equal to two and let's also give it a border of one pixel solid and then we can do a grayish color like e3 e3 e3 there we go finally below the card media we can render a typography that typography is going to have a variant equal to h6 and then inside of there we can render a channel detail question mark dot snippet question mark dot title now if we save this we can see javascript mastery right there and we can also render that icon which is right here inside of the typography we can even copy that from the video card that is going to be the check circle icon so let's copy it and let's paste it right here below the title there we go let's make it a bit bigger by setting the font size to 14 and then everything else can remain as it was there we go now we're going to make this component dynamic which means that later on we're going to use it on the profile page as well reusing that same component that is great now unfortunately right now we are not getting the amount of subscribers that the channel has but on the profile page we will be getting it so let's just make our component future proof by immediately specifying that detail below this typography we want to check if channel detail question mark dot statistics which is something you only get on the profile page dot subscriber count so only if that exists we want to render another typography component that component is going to say parse int so parse an integer and then we're going to pass the channel detail question mark that statistics question mark dot subscriber count and we want to say dot to locale string so this is going to give us a human readable number something like 379 thousand usually it would just be a number string and what we can say is subscribers again this is not something that's going to show up here because we don't have access to the statistics object but we will have it later on once we call it from the channel page with that said if we now expand this we can see that it is almost looking good but it is just not aligning properly it's still just a bit far off from what we have right there if we expand this you can see that it fits nicely right there so let's try to see where is the difference we can see that it's taking less space right here so that's most likely going to be our box so let's properly style our box component by applying a couple more styles let's give it a display is equal to flex a justify content is equal to center as well as align items is equal to center let's give it a width that's going to be dynamic on extra small devices it's going to be 356 pixels but of course make sure to put that in a string and save pixels otherwise it's going to be on medium devices 320 pixels as soon as we change this it did get more width and it's looking closer to what we have on the final design finally let's also specify the height which is going to be set to 326 pixels finally we can give it a margin set to auto now if we save this you can see it is almost exactly the same and now if we expand this there we go our feed is looking perfect we have our new page where we only have the thumbnails of all the videos and then we can switch between all of these different channels to check out different technologies music education sport and a lot more if you go to a category that has a channel included we can also see that channel right there now that we have the video cards and as well as the channel card done we are ready to move on to the channel page which looks like this we will list all of the videos from that specific channel or we can move to the video detail page where we can actually play that video and get all videos related to that video isn't that exciting so in this case let's go ahead and build the profile page first that's going to be once we click on this link we're going to be re-navigated to forward slash channel forward slash the id of that channel and let's get ready to implement that i'm going to collapse this right here and now we can close all of the currently open files because we do have quite a few open and we want to move to the channel detail component so that's inside of the app channel detail you can control click it and we are ready to start developing it to start coding out our great channel detail page we of course first have to import a couple of things let's get the use state and use effect hooks let's also get the use params so we can say import use params coming from react router dom let's also import the box component coming from you know it mui material and now comes the best part we are also going to import the videos component as well as the channel card component coming from dot slash these are the components that we have already created and i'm going to teach you how to make them reusable this means that the channel detail component will be incredibly simple to develop keeping in mind that we'll just reuse the components that we have created before of course we'll have to make some minor adjustments but overall the fact that we created reusable components is going to pay off handsomely so let's start by first wrapping everything in a box now keep in mind you can come to the profile detail page by going to js mastery and then clicking the profile right there now you can notice that we are on forward slash channel forward slash channel id so how do we get access to that id from inside of our code well that's exactly what we use the use params for so we can say const these structure the id and that is equal to use params now if we try printing that out right here we can render the id right now it is hidden right there but you do see that we got back an id that's all that we needed now based off of that id we can create a new use effect hook that's going to render as soon as our component opens that use effect is going to re-render whenever the id changes so we can pass the id into the dependency array and there we can make two different function calls we're first going to call our fetch from api function again make sure to import it at the top import fetch from api from that slash utils forward slash fetch from api we can call it but this time we're going to provide a different url to it so let's say channels question mark part is equal to snippet and id is equal to id like so now we can say that then we want to get the data and then the only thing we want to do is we want to set the channel detail page so let's create a use state for that use state that's going to be channel detail set channel detail and at the start it's going to be set to null now we can say set channel detail it's going to be equal to data question mark dot items and then the first channel in the list like that now we have access to all of the channel details and we can even go ahead and console log them so console log channel detail if we now open inspect element and then the console we can go to our info tab and we do see an object containing all channel details including the statistics that we talked about earlier subscriber count video count and the total view count now we want to fetch something else as well if you think about it we need to fetch the videos belonging to that channel so let's simply copy this entire fetch from api function and again this is another thing that we made entirely reusable we can recall this function and just change the part of the url to get different data so instead of channel we want to set the search question mark and then we want to get the channel id is equal to and then we pass in the id then you want to say and part is equal to snippet right there i had a mistake so it's just part is equal to snippet and then it looks like i have the double id here which we don't really need the only thing we do need is and order is going to be set to date so now it's going to even order it then we get back the videos inside of the data but now we're not going to set them into the channel detail what we are going to do is create a new use state called videos and set videos and at the start we can set them to be an empty array now instead of setting the channel detail we can delete that part and say set videos which is equal to data question mark dot items there we go now alongside the channel detail let's console lock the videos now if we go back we can see that we get back undefined for some reason interesting let's check our query we have a question mark where we set the channel id and that's going to be equal to id and part is equal to snippet and then and order is equal to data so this is looking good to me i noticed a small typo instead of order is equal to data it should have been order is equal to date now if we save that and go back we do get back all the 50 videos related to our channel great so now we know that data is coming back and we're storing it in the state now you might have noticed that we've had a lot of issues actually fetching this data and that's because we had small typos and errors here and there and thankfully we solved this in a couple of minutes but errors like these can take hours or even days to fix that's why there is the rapid api extension which allows you to test your apis let me show you how we could have avoided all of the errors we've had previously you just have to click rapid api here go to the project selection and then create a new project in this case we can keep it local and the name is going to be youtube we can copy the url we want to call straight from here so in this case let's do search as we were doing it and let's go ahead and copy the url right here now you can paste it right here under the get request and we can also add the query parameters right here as key and value pairs so by looking at the docs we know that we need to pass a couple of params such as a queue which is a query and then a part region code results and so on but we can also see that the only required ones are query and then part all the other ones are optional so let's go ahead and pass those parameters right here let's say part is going to be equal to snippet and let's also pass the order by date there we go and finally we also have to provide our api headers and finally we'll also have to pass our auth headers so let's go back to our rapid api we can see right here that we have the x rapid api key and then the host so let's go ahead and copy the name and add the value and finally we have the host right there so we can also copy and paste the value there we go now we have everything we need to start playing with the data that we're getting back from the api in this case since we're working with a search let's try to pass a queue as in query and in this case let's try to search for react js we have the query we have the headers let's just change the name right here to youtube api search and let's click send as you can see we got 200 okay and if you collapse this you can see that we get a json text and we get a couple of different items all of these are video ids and containing the video snippet data and in here you can check the data raw json text json3 even so you can see it in this format and what we can also do is do some filtering so let's try to go into items and then snip it and then title so that's going to be dollar sign dot items dot snippet or we have to do 0 on the items dot snippet and then dot title now if you search for it you can see the title of the first video we got and we can keep changing this for all other videos this is great now we can keep changing the query changing the part changing the headers and make sure that your api request is alright once you make sure that everything is great we can generate a new call right from inside of our visual studio code by clicking this code button right here you can see it creates the response it has the headers it has the response okay and it just gives you back the data but that's what we've done before so we don't have to repeat that with that said i just showed you the way in which you can save all the trouble that we've had before by not using this extension so always make sure to test your apis now let's go back to the development finally let's render it out as i've said that's going to be the easy part what we can do is wrap everything with a box that box is going to have a min height equal to 95 vh that's going to make it take the entire screen now we also want to wrap it with one more box and that box is going to contain a self-closing div this is the div that's going to serve the purpose of this gradient right there to create that gradient you can go to cssgradient.io you can mess with the colors a bit and then you can copy this line right there that's the only thing we need so let's say style is equal to and you can then paste that line but just make sure that you wrap everything in a string because we are writing css in js right there let's also give it a z index of 10 to appear above our profile image and let's give it a height of 300 pixels now if we save this and go back you can see that we have this beautiful css gradient now below that we want to render the channel card to that channel card we can provide the channel detail is equal to and that's going to be channel detail if we save that you're gonna see that something doesn't work and that's because we put it right here before the self-closing div we have to put it below if we do that we have our beautiful profile page and with just one line of code we reuse this card that we previously used in our feed isn't that great and now we even have the subscribers right there but there's just one small difference we want to make if you check out this page you can notice that it is shifted a bit above so it appears over the css gradient and here it doesn't to achieve that look what we have to do is go into the channel card and then we have to give it some negative margin top to do that we can simply say margin top is equal to and then let's do minus 93 pixels if we save that you can notice that it instantly shifts up and it looks great but of course now we have the issue where right here it also shifts up so how are we going to make this component reusable in all instances and this right here is something that you're going to learn right now in this video and you'll be able to use it with all your other reusable components whenever components have similar things like right here and right there there's an image there's a title that's it then you can write everything inside of the component but if something is different for example that margin then you can pass that part through props so right here when calling the channel card we can pass the margin top property equal to minus 93 pixels and now we can go inside of the channel card we can get that prop of margin top and we can say margin top is equal to margin top or just for short you can omit the ladder now this means that it's only going to be used when you actually pass that prop when calling this component from our grid or rather from our feed should i say we're not passing that prop so that's being called from videos if i'm not mistaken you can see we're calling the channel card we're not passing that prop but now if we go back to our video detail right here we are passing that prop so if we go there the styles actually work and now that i'm looking at it we can bump that up to 110. great so you just learned something create reusable components now we can go outside of that box we can show one more box that's going to have a display is equal to flex and p-2 for padding inside of that box we're going to have just one more box that box is going to have an sx prop where we're going to update the margin right but only on small devices and larger to 100 pixels so 100 pixels of margin right is not going to be applied to extra small devices only to small and higher and inside of there we can render our videos component and we can pass in the videos is equal to videos now this time our videos are related to the videos belonging to this channel now if we expand this would you look at that it's looking great but it looks like it is missing those 100 pixels off margin right so let's check what's up with that margin right on small devices 100 pixels and then we are rendering the videos well the reason for that is that this box right here should be a self-closing tag appearing before the videos the videos shouldn't be wrapped in it so if we make that simple change like this and save that you can now see that it all looks great and with just a couple of lines of code we have a custom profile page with the channel card component this new gradient and with the list of all of the channel related videos isn't that great and check this out we made that happen with about 10 lines of code because we used reusable components tricks like these are better explained in my js mastery.pro courses so if you want to learn react skills in depth you can do that by checking out the filmpire or the nft marketplace courses there i teach many tips just like this one on how to create these reusable components with that said we can go back to the home page we are now done with the feed we are done with the video cards we're done with the channel detail card and the last two things we have to implement are going to be the search so right here you can search for any kind of channels or videos and they're going to be populated right here in the feed and finally the video detail page so if you click on a video it's going to show up right here to start creating our search we can collapse and close all the files besides the app and then we can see that our search is reached by going to forward slash search forward slash and then we have to enter the search term there we are rendering the search feed component so let's control click it and go right inside of it this component is going to be almost exactly the same as our regular feed if you think about it the only difference is going to be the data for the videos that we want to show so what we can do is go back to app.js go into the feed and for now let's simply ctrl a and then ctrl c to take the entire code of this file copy it go back into the search feed and then paste it this is going to be our starting point to implement the search feed so let's first check out if we have all the imports that we need we're going to use the use state and the use effect and then we're going to use the box and also the typography in this case we won't be needing a stack we need to fetch the data from api and then in this case we won't be needing the sidebar the only thing we need are going to be the videos so this entire thing regarding the sidebar we can entirely delete the only thing we need is this box right there so let's copy this box with padding 2 containing the videos and then let's remove this entire stack right there because once we search for something we don't want to show the sidebar we only want to show the actual videos and if you think about it the videos are right here where we're rendering the videos component now let's indent everything properly there we go and let's also remove the selected category state because we won't be needing it and we can also remove the selected category from here and here because again we don't need it in this case we can rename this to search feed instead of simply feed there we go and the last thing we need to do is just figure out how can we fetch the data regarding our searched videos so if we go to rapid api and look for search that's almost exactly what we were already doing for the selected categories the only thing we have to do is just pass the right query under queue right there so let's do exactly that we of course have to get our search term so let's quickly fix this by removing that part and let's also remove the selected category from here and say search results 4 and then later on we'll be able to render the search term right here so now the main question is how can we get the search query that we are going for well let's go to our deployed application and let's quickly see how it works let's search for build and deploy react.js and press enter as you can notice we have a couple of videos right there but more importantly we were re-navigated to forward slash search forward slash and then build and deploy react.js that means that we should be pulling the data or the query from our parameters in the browser so to do that we can import something known as use params coming from react router dom and then we need to go into our app and see how did we call this parameter right there we called it search term so what we can do is say const search term is going to be equal to use params and now that's going to get populated to whatever we enter in the url bar after the forward slash search once we actually get that search query the only thing we need to do is pass it over right here to our api request and also to our use effect so that it gets updated every time we search for something everything else is going to be the same we get the data we pass over the videos and then we say search results for and then we can inside of the span say search term so search results for search term and then after the span videos there we go now to be able to test it out we can now go back and let's try typing something but of course that's not yet going to work because we didn't implement the navbar functionality so let's close this up and let's go to our navbar right here we actually have to go one more step into the search bar and this is the place where we're going to make this input work what we have to do is create a new use state field right here at the top so we can say use state that's going to be search term set search term and at the start it's going to be set to an empty string then we want to update that search term every time that we type something so we get a key press event and then we can say set search term is equal to e dot target dot value that is where the value of a key press is stored in and the value of course of that input is going to be search term this is going to allow us to actually type something in but now the question is how do we pass that over to our url to our query and we can do that by adding a handle submit function so right here on submit we want to call a handle submit function which we are yet to create so let's say const handle submit that is going to be just a regular function that's going to accept an event in that case that's going to be a submit event with every react application you have to say e dot prevent default because when you submit a form usually it reloads the page in reactions we don't want to do that and since that is the default behavior of the browser you have to say e dot prevent default now we want to check if the search term exists meaning if something has been typed in and then if that is the case we can use the use navigate hook given to us by react router dom we first have to initialize it by saying const navigate is equal to use navigate we call it as a function and then inside of here if we fix this typo we can say navigate and then we can pass a dynamic template string two forward slash search forward slash and then we pass in the search term of course at the end we want to reset the search term to an empty string so we're going to use this navigate to navigate us to that specific url once we get re-navigated then we go to this route this search term gets populated inside of the search feed we can read that search term we can recall our api to give us the search videos and then finally we can render those videos out by using our already built in videos component isn't that great now let's actually test it out i'm going to go back right here and i'm going to search for something like let's do build and deploy a chat application okay search results for build and deploy a chat application videos and there we go we can see many different videos from many different channels this is looking great we can also search for terms that contain channels so if you search for javascript mastery that's going to bring us our regular javascript mastery video search including even the link to the channel we can collapse this and we are ready to move to the final part of our application which is being able to actually watch the videos that we're looking at right now so to do that we can close our search feed and we can go to the route for slash video id and in our case that is the video detail component let's start off by importing the use state as well as the use effect hooks coming from react we can also import the link component and the use params hook coming from react dash router dash dom we can also import a react player coming from fiat dash player this is a dependency that we're going to use to showcase our video then we're going to import a typography a box and finally a stack coming from add mui forward slash material and finally we're going to import that check circle which is going to be coming from add mui forward slash icons dash material and then when it comes to our local imports we can import the video component coming from dot slash we can also import the fetch from api function from dot slash utils forward slash fetch from api great with that we have everything we need so let's get started by creating the layout for our video detail component let's open up our finalized application and let's open up one of the videos it's going to look like this we're going to have a big video on the left side then we're going to have a title and a channel name the number of views and likes that the video received and then you can scroll through all of these similar videos so let's collapse that again and let's get started well first of all we can focus on creating the layout and then we're going to focus on pulling the actual video data we can start by wrapping everything in a box now if we save this and go to our current application and click on a video for example this one you can notice that everything is just white but if we give this box a min height equal to 95 vh it's going to turn dark now we can have a stack component right inside of that box and that stack not stack is going to have a direction property that is going to be dynamic on extra small devices it's going to be column and then on medium devices and higher it's going to be row inside of there we can have one more box that's going to have a flex property set to 1. now inside of that box we can have another box this box is going to wrap our left side of the video meaning the actual video the title channel name views and likes this box is going to have an sx property equal to width is 100 position is going to be set to sticky and then the top property is going to be set to 86 pixels inside of that box we can immediately render the react player a react player is a self-closing component that accepts a url so since we already have to pass the url to it it might be the best idea to immediately fetch the data we need and then later on continue with the layout so what we can do is first we need to get the id of the video we want to fetch the data for and we already learned how to do that we just have to say const id is equal to use params and now we can use a use effect hook to immediately fetch the data as soon as our component loads there we can pass the id as well the first thing we need to do is call our fetch from api function there we can pass a dynamic url searching for videos question mark part is equal to snippet comma statistics and then we need to pass the id so we can say and id is equal to dollar sign and curly braces and then the id this is going to give us our video detailed data then we can say dot then we get that data and then we want to set that into a new state field so let's create it we can say use state that's going to be equal to video detail set video detail and at the start it's going to be set to null then we can say set video detail and then we pass the data dot items and then zero meaning only the first video great so now we have the video detailed data and we can use that to render this react player so we're going to pass a url to it which is going to be dynamic we need to say https colon for slash forward slash www.youtube.com forward slash watch question mark v is equal to and then we pass in the id that we want to see so now if we save this and in here we have a video from food theory great we can also pass in the class name equal to react dash player so now if you reload you're gonna see that it's gonna get a bit bigger and we can also give it a controls property so now if you reload and once you play it you'll be able to actually navigate and control through the video great now below that react player we can show a typography component this typography is going to simply render the video title but now the question is where is the title coming from well all of our data is contained inside of our video detail so we can say video detail dot snippet and then dot title if we save this and hover right here there we go we can see the title but let's style this typography just a bit that is going to be color is equal to hash fff we also want to give it a variant is equal to h5 and font weight is equal to bold let's also give it a padding equal to 2. now if we save this we can see the title but just so we don't have to every time say videodetail.snippet.title and then videodetail.snippet.description let's destructure all of the values from the video detail we can do that by saying const we can get the snippet is equal to video detail this is called object destructuring we took the snippet property out of the video detail so now we can simply say snippet.detail and it's still going to work but we can take this a step further so we can do column and then we can extract the title straight from the snippet with this we can simply specify the title right here and everything is still going to work so while we're there let's also destructure all of the other properties that we're going to use throughout this video that's going to be channel id and channel title now we're going to go outside of the snippet but we can go into the statistics and from there we can take the view count as well as the like count and that's going to be it so now we can continue below our typography we can render a stack component this stack is going to have a direction equal to row it's going to have a justify content equal to space between we can also give it an sx property where we're going to set the color to be equal to fff let's also give it a padding y equal to 1 and then padding x equal to 2. inside of there we want to show a link there we go and this link is going to point to that's going to be forward slash channel and then forward slash dollar sign curly braces channel id that's going to be typography and inside of the typography we can render the channel title now it looks like our app broke so if i open up the inspect element and go to console we can see that cannot read properties of null reading snippet so it's possible that sometimes the snippet doesn't have all the necessary data and the reason for that is that maybe the data hasn't loaded yet so to fix that let's add an if statement right here and say if no video detail question mark dot snippet then return a string that's going to say loading there we go now if we save this and go back we can successfully see our video great now let's continue styling our typography it's going to have a variant equal to it's going to be dynamic on small sizes it's going to be subtitle 1 and then on bigger sizes medium or larger it's going to be h6 and let's also give it a caller equal to fff and there we go we have the channel name right there we also want to render that channel icon so that's going to be check circle let's give it an sx property of font size is equal to 12 pixels color is going to be equal to gray and then margin left is going to be 5 pixels if we save this you can see it right there so this is looking good and now below this link we can render the last thing on the left side of the video detail page and that's going to be a stack this stack is going to render two different typographies so let's start with the first one typography in this case we can say variant is equal to body one and we can set the sx prop to opacity is 0.7 to make it just a bit less noticeable in there we can render that's going to be view count and then views now if we save that we can see right here 98 552 views now if we were talking about millions it would be really hard to see what this number was so there's a neat little trick that we can do we can say parse int pass in the view count and then say dot to locale string and then call it as a function this is going to add the necessary comma and dots so this is more easily readable if we were talking about hundreds of millions you'll be able to immediately say what it was with that said let's duplicate this and instead of the view count let's render the like count and then we can say likes if we save this they're going to appear one on top of another but we can add a direction is equal to row to our stack a gap is going to be equal to 20 pixels and finally align items is going to be equal to center this is already looking better now if we expand this we have a great looking video which already is taking the full screen right here and this guy created a really cool thumbnail but we now have the video thumbnail we have the title we have the channel name as well as the number of likes and views with that said we can now move creating the right side of the video detailed page which is the list of recommended videos so let's collapse this and let's focus on first fetching those videos so to fetch the videos we can go right here inside of our use effect and we can make a second fetch from api function call there we want to pass in the search query say part is equal to snippet and we want to get related to video id is equal to and then we can say id and type is equal to video this means that we want to get all videos related to the video id with the following id and then we only want to get videos not related channels once we get that we can say then we get the data and then we want to say set videos is equal to data dot items of course this videos is a state field which we haven't yet created so we can create it by saying use state and then that's going to be videos set videos and at the start they're going to be set to null now we have all the necessary video data we can go back to our app let's go to some kind of a javascript mastery video like this one there we go and now we can try rendering those videos right here we want to go above one last box so right here below the stack above the box and there we're going to render one more box that box is going to have a padding x of 2 padding y is going to be on medium devices 1 and then on extra small devices 5. we can also give it a justify content equal to center and align items equal to center as well inside of there we want to render the videos component which we have already created that videos component accepts one prop which is videos let's see if we properly imported it that's coming from right here i was missing an s at the top and if we save this the videos are now appearing in a row let's say yep as you can see right there so there is one neat little trick that we can do to change that and make them appear on the right side we're going to pass an extra prop so let's say the erection is going to be equal to column we can go inside of that video and there we can accept that prop right here direction and instead of having the direction hard coded right here to row we can make it dynamic and say direction or row meaning first we want to check if there is a specific direction passed in and use that one if it hasn't been passed then then used row if we pass this now they're going to appear right here which is exactly what we wanted now as you can see they are appearing below the video and that's because i made one little mistake this box containing the videos was supposed to go inside of the stack so put it just one element above still inside of the stack so that we have the videos and then closing box closing stack and then one more closing box now we can go to a video and it looks like something breaks again so let's check it out and see what it is it looks like it's saying cannot read properties of map inside of the videos so it looks like sometimes it's getting the videos passed in as null let's go into the videos and maybe right there we also have to add a loader so let's say if no videos dot length but we have to add a question mark right here then return a string that's going to say loading now if we save this there we go this is working perfectly let's expand our browser and there we go let's open up some other video let's go to js mastery and let's go for this dashboard right here so we have a great looking thumbnail we have the video which we can play and then we have the title of that video we have the channel name which we can click to go to that channel we have the number of views and the likes and then we can scroll through all of these videos that are related to the video we're currently watching isn't that great at the same time we have the search at the top so we can still search for some new channels go check them out and then navigate to the channel page research some videos watch them and go about our day so this is looking perfect and that brings us to the end of the phenomenal video where you learned how to build a fully fledged youtube clone application congrats now before we go ahead and deploy our great application let's first fix just a couple of small errors that we have or rather just some styling inconsistencies if we right click and then click inspect and then go to let's do iphone 12 pro you can notice that there's a bit of extra space right there but also if we go to a small mobile still there's space if we go to a large one then this white line keeps appearing right here if we go to tablet it is even worse so let's go ahead and fix the size of the card on mobile devices to do that we can go to the video card and then right here we can change the width of the card let's first put the xs property at the start because it is extra small on the left side and then as it grows it goes to small medium and so on so now we have extra small right there now with that what we also have to change is the width of the card right there right now it is always 358 pixels now let's expand that let's turn it into an object and let's say on extra small devices the width of the image is going to be 100 percent like this and then as it grows to small devices it's going to be 358 pixels like this what we can also do is add another property right here as small 358 pixels with this we're making sure the size of the card and the size of the image inside of that card will always be the same we can also change right here medium to 320 pixels now the image and the actual card will always be the same so let's check it out right now going back to the browser we can see that now we have two cards per row if we go to iphone 12 pro we have one card and this is looking good if we go to a larger device it's looking good as well and tablets are looking great as well and with that our application is now ready to be deployed let's go ahead and deploy it so that everybody on the internet can see it you can put it on your portfolio and show it to your friends or potential employers to deploy this great application we'll be using netlify a free tool that allows you to easily and quickly deploy your react applications so let's go ahead and click login after you log in you can go to sites and then you can scroll all the way down this is where you can drag and drop your react build folder now to create that react build folder we can close all of our files open up the file tree and collapse everything before we create our build there's one more thing we have to do open up the public folder and in there create a new file called underscore redirects without a file extension instead of this file you can type forward slash star forward slash index.html and then 200. this file is used to fix one issue with netlify and the react so just make sure to include this and now you can create an optimized production build we can go to view and then terminal press ctrl c to stop it from running and then y clear it and then run npm run build this is going to initialize an optimized production build this process usually takes about a minute so let's give it some time and i'll be right back and there we go in about a minute our application built so now we can go right here right click the build folder and click reveal in file explorer or open in finder if you're on mac you can then go back to the browser and then simply drag and drop the build folder right into here the upload process usually takes just a couple of seconds so while i'm speaking it should be updated right now there we go so this was really quick with netlify you're going to get this random url right there if you want to use this website professionally show it in your portfolio with a dedicated domain name and fast servers i would definitely recommend hostinger i've been using them for a long time now and to everybody that needs ssl certificate free domain name and email i definitely cannot recommend anything else netlify is great for simple sites but if you need something professional go for hostinger the link is going to be down in the description with that said let's go ahead and check out our deployed site this is not something that usually happens but when i clicked the link it said deceptive site ahead interesting now if we click details and then click visit this unsaved site you can still proceed and there we go our website is right here i'm not quite sure why google triggered it as a deceptive site that is definitely something we would have to look into with that said our website is now online we can check it out it is working exactly as it did on our local host we can watch the videos straight from inside of our newly created youtube clone application isn't this great with that said we've came to the end of this great video huge thanks to rapid api not only for sponsoring this video but also for creating their phenomenal rapid api hub where you can find tens of thousands of different apis which you can use to create interesting applications if you want me to use some other api to create a video in the future let me know down in the comments with that said that's going to be it for this one thank you so much for watching and for coming to the end of this video and i'll see you in the next one have a wonderful day [Music]

Channel: JavaScript Mastery

Views: 368,805

Keywords: javascript, javascript mastery, js mastery, master javascript, react youtube clone, youtube clone react, material ui react, material ui react tutorial, material ui tutorial, material ui v5 tutorial, material ui v5 project, rapidapi, rapid api tutorial, rapid api react, react api project, build a youtube clone application using react, react application project, react application project from scratch, youtube clone app

Id: FHTbsZEJspU

Length: 141min 39sec (8499 seconds)

Published: Fri Aug 26 2022