Create YouTube Clone Using React JS | Build Complete Website Like YouTube In React JS 2024

hi guys welcome back to another exciting tutorial of greatest stack in this tutorial we will learn how to make a YouTube clone website using reactjs now you might be wondering why a YouTube clone well building a clone of popular platform like YouTube is a fantastic way to sharpen your skill as a web developer it allows you to learn how to implement key features of a complex web application in this tutorial we will cover everything from the setting up our development environment to building a responsive user interface creating YouTube data API links and display realtime YouTube data and videos on our YouTube clone website so let's see the project overview that we are going to create in this tutorial so this is our YouTube clone website where you can see this navigation bar where we have the logo one search box and some icons in the right side of this navigation bar then we have the left side bar where you can see different categories and subscribed channel list and here we have the video list these video list are coming from the YouTube API here it is displaying the video list of all the categories and from the left side if I select the gaming category it will display the video from the gaming category only then if I click on Sports it will display videos related to the sports category let's click on the music now it is displaying videos related to the music category let's click on home now again it will display the videos from all the categories we can click on these video thumbnails so it will open the video play page if I open this video you can see this video will start playing automatically and here we have the video title number of views upload time then number of likes here we have the channel name and channel subscriber and here we have the video description after that you can see all the comments on this video in the right side you can see the recommended videos and if I click on this recommended video it will start playing that particular video you can see it opens that video and here we have the video information like title number of views and channel name let's open the homepage again and here we have the toggle menu let me click here so it will collapse the sidebar you can see in the sidebar now we have only icons and if I click again it will expand the sidebar so we can see the icon and text also this YouTube clone website is completely responsive for a small devices let's open it in small screen so you can see how it will display in the mobile phone devices so it is completely responsive for smaller screen devices this is the homepage and let me click on this video thumbnail so it will open the video page so this is how this video page is displaying in the smaller screen it is also responsive here we have have the video then video information then comments and at the end we have the recommended videos after creating this YouTube clone you can deploy it online for free and you will get the project live link that you can add in your resum or online portfolio it will add more values in your resume and help you to get the web development job by the way I have already uploaded it using verel you can find this link in the video description if you want to learn how to deploy your project online then let me know in the comment section I will make a separate tutorial for that also if you are absolute beginner in reactjs then I will highly recommend you to watch my complete JavaScript course where I have explained all the JavaScript Concepts that are required to learn reactjs I will provide the link in the description so if you are ready to level up your react jss skills make sure to smash that like button hit subscribe and let's get started let's come to desktop screen and here first we will create the react project for that we will open Terminal so right click and open in terminal and in this terminal we will type npm create V latest after that we will provide the name for our project that will be be YouTube clone and here we will select the framework react then select JavaScript here you can see our project folder has been created so let's close this terminal and open this folder with vs code editor so I will right click here so more option then open with code now this vs code editor is open here we will open the integrated terminal and here we will install some packages so to install the packages we will type npm install and the first package will be react router Dom press enter after installing this package next we will install one more package so we will type npm install and the package name is moment then press enter here we have installed two packages react router Dom and moment package we will use these packages in our YouTube clone application now we will run our react project to run the react project here we will use the command npm run Dev now our project is successfully running let's open this address in the browser so here our react project is running successfully in this web browser now we have to clean this default project for that we will come back to vs code editor and we will open the SRC folder then open this app.jsx file and clear it and here we will use rafc after adding this our app component will be cleared after that we will delete the app. CSS file then we will open index. CSS file and here we will clear all the codes and save the file now we will open this index.html file and in this title we will update the text so let's type YouTube clone and save the changes now open this assets folder and here we have the react. SVG file delete this one now the react project is clean now we will come back to the web browser you can see this web page is completely blank and here the title is YouTube clone after that we will add the Assets in this assets folder so on my desktop screen I have added this folder assets where we have some images and icons that I will be using on this project so let's copy all the images open this project folder here we will go to SRC and assets and paste all the images you can can find all these assets download link in the video description now we will close it and we will open the vs code editor in this assets folder you can see we have all the images now we will create the folder structure for our YouTube clone so in this SRC folder we will create a new folder and the folder name will be Pages if here we will create two pages that will be homepage and the video player page so to create two pages we will create two other folder in this Pages folder so let's create a new folder with the name home and in this Pages folder we will create another folder with the name video here we have created two fold folders for two pages in home folder we will create a new file and we will add the file name home. jsx and here we will use rafc for this page we will create one CSS file so in this home folder we will create a new file and the file name will be home. CS say now we have to link this CSS file with this jsx file so here we will add the import statement just type import then do/ home. CSS now the CSS file is linked with homepage similarly we will create files in this video folder so in this video folder we will create the first first file with the name video. jsx here we will use RFC and for this page we will create one CSS file so in this video folder we will create a new file that is video. CSS and import this CSS file at this jsx file so here we will type import do slash video. CSS now we will save this file so in this Pages folder we have the homepage and video page after that in this SRC folder we will create a new folder and the folder name will be components in this components folder we will create multiple components like sidebar Navar recommended video section and the video player section after that in this component folder let's create a folder and the folder name will be nabar and in this nabbar folder we will create a new file and the file name will be nabbar do jsx here we will use rafc and for this Navar component we will create the CSS file so in this nabar folder we will create a new file and the file name will be nabar do CSS now we have to import this CSS file in this Navar component here we will use UT do/ navbar do CSS so we have created the Navar component now we have to map this Navar component in the app component so in this app.jsx file we will type Navar select it from this snipet from this conference folder and close this tag after adding this this nabar component file will be imported automatically now we have mounted this nabar component after that we will add the HTML structure in this navbar component so we will open navb bar. jsx file here we will update this tag instead of this div we will use nav tag and and in this nav we will provide one class name so let's add the class name Flex div inside this nav tag we will create one div and in this div we will provide one class name nav left and with this we will add one more class name that is flex div inside this div we will create one IMG tag and in this image tag we will add the menu icon for that we have to import the menu icon so here we will use the import statement import menu icon [Music] from assets folder SL menu.png now we can provide this menu icon in this SRC so let's add curly Braes and type menu icon after this IMG tag we will create one more image tag and here we will provide the logo so first we have have to import that logo so we will use import a statement logo from assets folder and Slash the file name that is logo.png now in this SRC we can provide that logo we'll just add curly bres and Logo now in this first image we will add the class name that will be menu icon and in the second one we will add the class name that will be logo after this div we will create another div and the class name will be nav middle in this class name we will add one more class name that is flex div and in this one we will insert one input tag here we will provide the input type text and the placeholder will be search after this input field we will add one image tag and in this image SRC we have to provide this search icon so import this search icon here just add import search icon from assets folder slash search.png and here in this SRC we will provide search icon after this we will create another div and the class name will be nav right so we will add div nav write and in this div we will add one more class name that is flex div here we will use for IMG tag so just add IMG into for in these IMG tag we will provide the upload icon mode icon notification icon and profile icon for that we will import these images so here we will add the Importer statement upload icon from assets folder slash upload. PNG after that we will import the mode icon from s sets folder SL more.png after that we will import the notification icon from assets folder SL notification. PNG after that we will import the profile icon so we will type import and profile icon from assets folder slash jack. PNG now save the changes and we will use these icons in this images tag so in the first one we will put provide upload icon in the second one we will use mode icon in the third image tag we will use notification icon and in the fourth image we will use profile icon after that in this profile icon we will add one class name that is user icon after that we will save the file and we will come back to the web browser so on this web page you can see we have the menu icon logo search box and other images now we will add the CSS properties for this navigation bar so first we will open this index. CSS file and here we will add some CSS properties for complete project so for each element we will provide margin zero padding zero box sizing border box then we will add the font family it will be sensitive after that we will add the CSS properties for a tag so for this a we will add text decoration none and after that we will add color and we will add this color code after that we will add the property for image tag so for this image we will provide cursor pointer after that we will add the CSS properties for the flex div class name so let's add Flex div and in this one we will provide display Flex align item Center so here we have added some Global CSS properties now save this file now we will add the CSS properties for this navigation V so let's open this Navar do CSS file and let's copy the class name from this na. jsx file so we will use this nav tag so write this nap tag here in the CSS file and for this snaptag we will add these CSS properties we have provided padding then box Shadow then position sticky top zero and Z index so that this naap bar will be on top when we scroll the web page now we will add the CSS properties for this menu icon so here we will type dot nav left do menu icon and here we will provide the width and margin from the right after that we will add the CSS for this logo so here we will type naav lift. logo for this logo we will provide width after that in this nav middle we will create one div and we will provide one class name search box and in this search box we will add one more class name that is flex div and in this div we will place these input tag and IMG tag next we'll add the CSS properties for this search boox class name so in this CSS file we will type do nav middle dot search box here we will provide the Border margin right padding and Border radius after that in the left side we have the menu icon and logo and here we have the search box and in the right side we have some features icon and profile icon after that we will add the CSS properties for this input field so here we will type dot nav middle dot searchbox space input tag and in this one we will provide the width border outline and background transparent now the background is transparent for this input field now we will add the CSS properties for this search icon so here we will type do nav middle dot searchbox then IMG tag and here we will provide width 15 pixel now the search icon is looking good after that we will add the CSS properties for the images which is in the right side of this navigation bar so here we will type dot nav right IMG tag here we will provide the width and margin from the right side save the changes now the images in the right side has become small now we will add the CSS properties for this profile icon so here we will type navite do user icon here we will provide the width and Border radius 50% so that it will be circular now we will open the web page now this SAR component is completely ready now we will create the sidebar component to create this sidebar in this components folder we will create a new folder and let's add the folder name sidebar in this folder we will create a new file and the file name will be sidebar do jsx here we will use rafc snippet now for this component we will create one CSS file so in this sidebar folder we will create a new file and the file name will be sidebar. CSS now import this CSS file in this sidebar component so here we will type UT do/ sidebar. CSS now save this file we will use this sidebar component on our homepage for that first we will Mount this homepage and video page on our app component using the react router to implement the react router in our project we will use main. jsx file and here we will use browser router t tag here we will type opening Arrow browser router and in this browser router we will insert this app component now we have the support of react router in this app component let's open this app.jsx file and after this navbar we will create create the routes to create the route we will use the opening Arrow routes tag that is from react router down and within this routes tag we will create the douts so first we will create the route for our homepage here we will use opening Arrow Route tag then Path property the path will be slash and in the this path we will Mount the element that will be homepage here we will add opening Arrow home/ closing Arrow now just close this route tag also now we have created one route for our homepage that will be mounted on SL path after that we will create the route for the video page so here we will use opening arrow and here we will add route path in this path we will provide slash video slash and here we will use the parameters so we will use colum and here we will provide the category ID then we will provide one more slash and here we will use one more parameter that will be video ID so after this column we will add video ID and on this path we will Mount the element that will be our video page so just add video/ closing Arrow now close this route so we have created routes for the homepage and video page now in this homepage we will Mount the sidebar component so we will open home. jsx file and here remove this div and here we will use the fragment and in this fragment we will Mount the sidebar component for that here we will add opening Arrow sidebar SL closing Arrow now we have mounted the sidebar now we will Design the sidebar HTML structure so first we will import all the images used in this sidebar component so here first we will import home image then game Icon then automobiles image Sports image entertainment image Tech image music image blogs image news image Jack image Simon image Tom image Megan image camon image here we have imported all the images and icons now we will add the HTML elements for the sidebar component so first in this div we will add one class name and in this class name let's add sidebar after adding the sidebar class name within this div we will create one div and the class name will be shortcut links in this div we will create one div tag and in this one we will provide the class name site links so here we will type div do s side links in this div we will insert one image tag and in this image tag we will provide home image after that we will add one paragraph tag and in this P tag we will add home after that let's create the copy of this side link we will create total eight copy so just copy and paste after that we will add one HR tag so in the first one we have the home icon and the P tag is home after that we will update the image it is game Icon and here we will add the text in P tag that is gaming similarly we will update the next image that is Automobiles and in this P we will update the text automobiles then we will insert the sports image and here also we will type Sports here we will insert the entertainment image and here we will add the text entertainment then we will use the new image that is Tech and here in this P tag we will add technology then we will provide the music image and in this P tag we will provide music then in this image tag we will provide blogs and in this P tag we will type blogs in the last one we will add news image and in the P tag we will add news after that save the changes and you can see all these icons and text in the left side we have all the images home gaming automobile Sports entertainment technology music and blogs and news after this div we'll create one more div and we will provide the class name subscribed list in this div first we will use one S3 tag and here we will add the text that is subscribed after this S3 tag we will add one div and the class name will be side Link in this div we will add one IMG tag and in this SRC we will add profile image that is Jack that we have imported from the assets folder and after this image tag we will add one P tag and here we will type PewDiePie now we will create the copy of this div so just copy and paste it now we will update the image so let's add the image Simon and here we will add the text Mr Beast in the third image we will add Tom and here we will add the text just in Bieber then we will add another image Megan and here we will add the text 5 minutes craft after that we will add another image and here in this P tag we will add Nas Deli now save the changes and come back to the web page so in the left side we have the icons and after that we have the profile images and name now we will add the CSS properties for the sidebar component so first we will add the CSS property for this sidebar class name so let's copy it and come to sidebar. CSS file paste this class name here and here we will add the CSS properties background width height position fixed and padding from the left side and padding from the top save the changes and come back to the web page now it will be fixed in the left side now we will add the CSS properties for these images so let's use this class name shortcut links and paste it here and here we will type IMG tag here we will provide width and margin from the right side save the changes now come back to the web page so you can see the width for these icons has been updated after that we will add the CSS properties for this side link class name so let's copy it add it here here we will provide display align items margin from the bottom then width Flex wrap and cursor pointer now come back to the web page so you can see the alignment for these category links are looking good now we will add the CSS properties for the HR tag so here we will type dot sidebar HR tag here we will provide border zero height background and width now save the changes now this HR tag is ready now we will add the CSS properties for this S3 tag so here we will copy this class name subscribed list add it here in the CSS file and here we will provide S3 tag for this one we will provide font size margin and color now this text is ready after that we will add the CSS properties for this profile images so here we will type do subscribed list IMG tag here we will provide the CSS properties width border radius and margin from the right side save the changes now you can see the width has been updated for this profile icon now this complete sidebar is ready now we will add the functionality on this menu icon when we will click here it will collapse the sidebar and display only icons and when we click again it will expand the sidebar and we will see the icon and text to create this feature let's come back to the vs code editor and we will open app.jsx file before this return statement we will create one state variable so to create the state variable we will use const sidebar and the seter function name will be set sidebar equal to user State and intial it with true now we have to send this sidebar in this home using the props so here in this home we will type sidebar equal to sidebar and send this set sidebar function in this Navar so here we will type set sidebar equal to set sidebar now we will open this Navar component and here we will get that set sidebar function and we will use this set sidebar function in this menu icon so on this menu icon we will add onclick property and in this one we will pass one Aro function and here we we will use set site bar function and in this one first we will get the previous state and here we will use the turn operator so if the previous state is false then it will make it true so we will add question mark true and if it is not false then it will become false so this terity operator will work as a toggle function if the sideb is true it will become false and if it is false it will become true now save this component and we will open this home. jsx file and here we will d structure the sidebar so let's add sidebar and we will pass this sidebar state in this sidebar component using the props so we will type sidebar equal to sidebar now we will get the access of the sidebar in the sidebar. jsx file so open this file sidebar. Js X and here we will D structure the sidebar so we have added this sidebar State now we will use this sidebar state in this class name to provide the dynamic class name to provide the dynamic class name we will add it in the curly Braes and here we will use the back TI and after this sidebar class name we will use the template literal so let's add dollar sign curly bres and in this one we will check if the sidebar is true in that case we will provide empty string and if it is false in that case we will provide an string that will be a new class name so let's add small sidebar now save the changes now we'll come back to the web page and right click and click on inspect here we have the sidebar and if I click on on this menu icon here we have sidebar and a small sidebar Now using this small sidebar class we will hide these text and we will make this sidebar small so let's come back to the vs code editor and open this sidebar. CSS file here first we will add that class name small sidebar and here we will provide the width of 5% now save the changes and if I click here you can see the width is changing width becomes 5% after that we have to hide these text to hide that one here we will add dot small sidebar then P tag and here here we will provide display none save the changes so here you can see all text are hidden we have only icons and image and if I click again on this menu icon the text will be visible if I click again it will hide the text after that we will hide this text also in the small sidebar so let's come back to vs code editor and here we will type do small sidebar H3 tag and here also we will provide display none so that subscribed text is also hidden if I click here it will display this subscribed text again now we will add the CSS properties for this HR tag so let's add do small sidebar HR and in this one we will Pro wide width and margin from the bottom then save the changes and come back to the web page so here if I click on this menu icon we have the expanded sidebar if I click again we have the small sidebar where we have the icons and profile images after that we will create the multiple video cards on this web page to create that we will come back to the vs code editor in this components folder we will create a new folder and the name will be feed in this folder we will create a new file and the name will be feed. jsx here we will use our AFC for this component we will create one CSS file so in this feeds folder we will create a new file and the file name will be feed. CSS now we have to import this CSS file in this jsx file so in this feed. jsx file we will add import SL feed. CSS save the changes now we have to mount this compony on our homepage so let's open home. jsx file and after this sidebar we will create one div and in this one we will provide one class name and here we will use the dynamic class name so let's add the curly bres back tick and in this backtick we will add container and after that we'll use the template literal so let's add dollar sign curly presses and in this one we will use the turn operator so first we will check the sidebar if it is true in that case we will provide one empty string and if it is false in that case we will provide one new class name that is large container in this div we will Mount our feed component so here we will type opening Arrow Feed / closing Arrow so this feed component has been mounted in this div where we have the container class and if the side word is false in that case there will be one more class name large container now we will add the HTML elements in this feed component so first we will import the images that I will be using in this component we will import the images from the assets folder so let's type import thumbnail from assets thumbnail.png we have imported total eight thumbnails from 1 to 8 from the assets folder after that we will add the HTML structure for this feed component so in this div let's add a class name that is card so we will add class name card after that we will add one IMG tag in this image we will use the image that we have imported so let's use the first image thumbnail 1 then we will create one h2 tag and in this one we will display the video title so let's add one common title then we will add one S3 tag in this one we will provide the channel name so here we will will type greatest tack after that we will create one P tag in this P tag we will display total views and upload time so let's add 15K views then we will use one dot so here we'll add and bullet semicolon then we will add 2 days ago so here we have created the format for the card now come back to the web page it is looking like this so first in this return we will create one div and the class name will be feed and let's place this card inside this feed after that let's create another copy of this card so we will create total eight card so we have created Total eight cards now in the second one we will provide thumbnail 2 thumbnail 3 then thumbnail 4 then it is five it is six it is seven and the last one is thumbnail 8 so we have created Total eight card with eight image so here we have multiple cards now we will add the CSS properties for this feed component so first we will add the CSS properties for this feed class name so let's copy it and come to feed. CSS file write this class name here and here we will provide display grid grid template columns here we will add repeat autofit min max 250 pixel and one fraction after that we will add grid column Gap grid row Gap and margin from the top let's come back to the web browser so here it is looking like this so to fix this let's come back and in this home. jsx file here we have the container so for this container we will add the CSS properties so we will open home. CSS file and here we will type do container class name and here we will add the properties background and padding from the Left Right top and bottom then we will add the CSS properties for this large container so let's copy this and paste it here in this home. CSS file and here we will add padding from the left 7% That's it save this file and come back to the web browser now this feed is looking like this and if I click on this menu icon it will increase the width of this feed area because it is reducing the padding from the left and if I click again it will increase the padding from the left side and it will become small now we will add the CSS properties for these images so let's open the feed. CSS file and here we will add the class name do card then IMG tag for this image we will provide width and B radius save the changes so now you can see the thumbnail size is perfect and we have the Border radius also for this image now we will add the CSS properties for this title so here we will type do card then h2 tag where we have added the video title and here we will provide the font size font weight then color and margin now the size for this video title is good after that we will add the CSS properties for the channel name so here we will type Dot card H3 tag and here we will provide font size font weight color and margin save the changes so now this channel title is also looking good after that we will add the CSS properties for this text that display the number of views and upload time so let's add Dot card then P tag and for this P let's provide font size of 14 pixel save the changes now let's come back to the web page and you can see see this card is looking perfect now we will duplicate all the content in this card so that we will get more thumbnails so let's come back to the feed. jsx file and select all these card copy and paste again so now it will display total 16 cards and we can scroll this web page so when we are scrolling this you can see the navigation bar is fixed at the top and if I click on this Manu icon it will increase the width of this feed area and if I click again it will decrease the width now we will create our video page to create the video page let's come back to the vs code editor in this feed. jsx file in the first card we will replace this div with link tag this link tag is from react router Dom in this link tag we will use two property in this two property we will add the path of our video page so in this curly addes we will use the template literals so let's add back tis then we will go to video path slash category ID so let's add the random category ID 20 let's add slash and here we will add the video ID so for this video ID let's add any random ID for now and after that save the changes now if I click on the first card it will open the video page where you can see we have the navigation bar and this is the path SLV video/ category id/ video ID now we will add the elements on this video page so let's come back to the vs code editor and open this video. jsx file in this div we will add one class name property and here we will add the class name play container now we will create one component play video and we will mount it in the video page so in this component folder let's create a new folder and the name will be play video in this folder we will create one jsx file that is play video dot jsx and here we will use rafc snippit for this component we will create one CSS file so in this play video folder we will create a new file and let's add the file name play video. CSS now we will Mount this CSS file in this jsx file so we will add UT do/ playay video. CSS here we have created the play video component now we have to mount this component in the video page so in this div we will add play video component after that we will Design this component so let's open Play video. jsx file now in this component we will import the images and videos from our asset folder so first we will import one video file then we will import the like image dislike image share image save image then Jack image then user profile image now we have imported all the images and video now we will add the HTML elements so in this div we will add one class name property and here we will provide the class name play video here we will provide one video tag in this SRC we will add the video one that we have imported so let's add clys video one now save the changes so on this screen here we have one video this video is not playing to play this let's come back to the code file and in this video tag we will use controls attribute then we will add autop playay attribute then we will add muted now we will open the browser now if I reload the web page you can see this video is played automatically and here we have the control buttons to play or pause the video after this video here we will add one S3 tag and here we will paste one video title so the title is best YouTube channel to learn web development after that we will create one div and here we will provide the class name play video info in this div we will create one paragraph tag so here we will use the paragraph tag and in this P we will type some numbers that is number of views then we will add one dot and after this dot we will add 2 days ago after this P tag we will create one div in this div we will show likes dislikes and share and save so we will use the span tag and in this span we will use the IMG tag and in this image SRC we will provide the like image after this image tag we will add 125 now let's create the copy of this span so we will add total four Span in the second image we will add dislike and here we will add the data two similarly we will update the image for the third one it is Shar image and here we will add the text share and in the last image we will add save and here we will add the text save now save the changes and come back to the web page now here we have the video title views and upload time then we have the like button dislike button and shared icon then save icon after that we will display the channel details so after this div we will create one HR tag after this HR we will create one div with the class name publisher within this div first we will insert one image tag and here we will use the Jack image after this image we will create one div tag and in this div we will display the P tag and in this P tag we will add the text that will be channel name so let's add Greatest Tag after that here we will add the subscribers detail so we will use the span tag and in this span tag we will type 1 million subscribers after closing of this div we will create one button tag that will be the Subscribe button so let's add the button tag and here we will add the button text that is subscribe now save the changes so here we have the image channel name number of subscribers And subscribe button after that we will add the description section to create the description section after closing of this div here we will add one div and we will provide the class name vid description that is video description in this one we will insert the P tag and here we will add some text channel that makes Learning Easy and let's add another P tag and here we will add the text subscribe greatest tag to watch more tutorials on web development after that we will add one HR tag then we will add one H4 tag in this H4 tag we will mention total number of comments so let's add 130 comments then save the changes and come back to the web browser so here we have description text then horizontal line and comment count after that we will create some comments to create the comment after this H4 tag we will create one div and the class name will be comment in this div first we will insert one image tag so let's add the curit asss in this SRC and we will provide the user profile image after this image we will provide one div and in this div we will provide one S3 tag and here we will type username this is the name of the channel user who has commented on this video so let's add any name Jack Nicholson then we'll add one span tag and in this one we will mention the time so let's add 1 day ago go after this S3 tag we will insert the P tag and in this P tag we will provide the content that user has commented so let's paste this text after this comment We'll add one div with the class name comment ACC in this comment accent D we will add the like and dislike icon for that here we will use one image tag and here we will provide like image then we will add one span tag and here we will provide some number 244 after this aspan we will insert one image tag and here we will use dislike image after that we will create a copy of this comment div now save the changes and come back to the web browser so here we have multiple comments we have the name then time one day ago then comment text now we will add the CSS properties for this play video component so first we will add the CSS properties for this class name play video so let's copy this one and paste it here in this play video. CSS file here we will provide Flex vases 69% and save the changes after that we will add the CSS properties for this video tag so here we will type do play video video and here we will add width 100% save the changes now we have provided the width 100% for this video now we will add the CSS properties for this S3 tag so here we will type dot play video S3 tag and here we will provide margin from the top then font weight and font size after that we will add the CSS properties for the play video info class name so let's copy this class name add it here in the CSS file and here we will provide display align items justify content then Flex wrap some margin from top and font size and color then save the changes and come back to the web page now this views and time is in the left side and these action icons are on the right side which is like dislike after that we will add the properties for this image icons so let's add dot play video info IMG tag and for these images we will provide the width and margin from the right side save the changes now these icon size is perfect next we will add the properties for this a span tag so here we will type play video info a span tag and here we will provide display align items and Mar left now this text and images are inline next we will add the CSS properties for this HR tag so here we will type do playay video HR tag for this HR tag we will provide border height background and margin now this HR tag is also looking good next we'll add the CSS properties for this publisher so here we will copy this class name publisher and paste it in this CSS file here we will add display align items and margin from the top and save the changes now this image in the left side and in the right side we have the channel name number of subscribers And subscribe button after that we will add the CSS properties for this div so here we will type publisher div tag for this D we will provide flex and line height now we have the publisher image then publisher detail and this subscribe button is in the right side after that we will add the CSS properties for this image so here we will add do publisher then IMG and for this image we will provide width B radius and margin from the right side now the Channel logo is looking good and it is circular after that we will add the CSS properties for this P tag so here we will type dop publisher div P tag for this P let's add color font weight and font size now now this channel name is in bold font now we will add the CSS properties for this aspan tag where we have added the number of subscribers so we will addp publisher div and asan for this aspan we will provide font and color so we have decreased the font size of this text now this subscriber count is looking good next we will add the CSS properties for this subscribe button which is in the right side so here we will addp publisher and button tag in this button tag we will provide background then color then padding border outline zero border radius and cursor cursor will be pointer save these changes and come back to the web browser so you can see this subscribe button is looking good now we will add the CSS properties for this description text so we will copy this class name vid description and paste it here in this CSS file here we will provide padding from the left side then margin now we have added some space in the left side for this description next we'll add the CSS properties for this text which is in the description so here we will add do withd description then P tag and here we will provide font size margin from the bottom and color so the font size for this description text is looking good after that we will add the CSS properties for this comment text which is in the H4 tag so here we will type dot withd description then H4 tag here we will provide font size color and margin from Top now this comment count is looking good after that we will add the CSS properties for this comments so let's add the class name dot comment and here we will provide display align items and margin now in the left side we have the image and in the right side we have the comment content now we will add the CSS properties for this image tag so here we will add dot comment and IMG tag for this IMG tag we will provide width border radius and margin from the right side save the changes now this image is looking good after that we will add the CSS properties for this S3 tag so here we will type comment S3 tag and here we will provide font size and margin from the bottom then save the changes after that we will add the CSS properties for this a span tag where we have added the comment time so let's add do comment S3 and a span for this aspan we will apply font size color font weight and margin from left now the size for this time has been reduced after that we will add the CSS properties for this comment accent class name so just copy this paste it here for this comment X and we will provide display align items margin and font size after that we will add the CSS properties for these like and dislike icons so here we will add do comment action then IMG tag here we will provide border radius zero width and margin from the right side now these like and dislike icons are looking good after that we will add the CSS property for this aspan tag so here we will type do comment action then the span tag and here we will provide margin from the right and color then save the changes so here we have added some space after this number of likes now this play video complain is ready next we have to add the CSS properties in this video page so here we have added one class name play container so we will add this class name in the CSS file to add the CSS properties so just copy this and add it here in this video. CSS file here we will provide the background padding from the Left Right top and bottom then display justify content and flex wrap save the changes and come back to the web page now this play video component is displaying in the left side and it is using the width of 65% now in the right side we will add a sidebar where we will display the recommended video so let's come back and in this components folder we will create a new folder and provide the folder name recommended now in this recommended folder we will create one jsx file and CSS file so let's create the first file recommended. jsx and we will create another file recommended. CSS now open this recommended. jsx file here we will use rafc and here we will import this CSS file so we will add import SL recommended. CSS so here we have created one component with the name recommended and now we have to mount this component in the video page so open video. jsx file in this play container after this play video component we will add the recommended component close this tag after that we will add the HTML elements in this recommended component so first we will import all the images that will be used in this recommended component so we will import the thumbnails from asset folder so we have imported the eight images now in this div we will add a class name so let's add the class name recommended now within this div we will create one div and the class name will be side video list in this div we will insert one image tag and in this image SRC we will use the image that we have imported so let's use the first image thumbnail one after that we will add the div and in this div we will add the class name vid info in this div we will insert the H4 tag and in this H4 tag we will use video title so let's use one title best channel that helps you to be a web developer after that we will add a text in P tag where we will display the channel name so let's add Greatest Tag after that we will add one more P tag and here we will display the total views so let's add 199k views after that save the changes and we will come back to the web browser I scroll the web page and you can see this thumbnail image and then we have the title channel name and number of views now we will add the multiple copies of this side video list so let's select this div and copy and paste it multiple times now we will update the images so it will be thumbnail 2 3 4 it is 5 then six 7 and this is thumbnail 8 now save the changes and come back to the web browser so here we have total eight images now we will add the CSS properties for this recommended component so first we will add the CSS properties for this class name recommended so just copy this class name add it here in this file recommended. CSS in the play video we have added the flex basis 69% now we have the 30% remaining area in that one we will display our recommended videos so let's come back and here we will add Flex basis 30% and save the changes after providing the flex bases next we will add the CSS properties for this side video list class name so we will copy this and paste it here for the side video list let's add display justify content and margin from bottom after that we will add the CSS properties for this image tag so again we will use the same class name do side video list then IMG tag so for this image let's add CSS property Flex basis 49% and width 50% then save the changes and open the web browser so here in the right side we have the video thumbnail and video title channel name and number of views after that we will add the CSS properties for this vid info copy this vid info paste it here here also we will provide Flex basis 49% now we will add the CSS properties for this H4 tag so let's add dot withd info H4 tag and here we will provide font size and margin from bottom now our recommended section is complete complete and this complete video page is looking good now let's open our homepage now the front end of our YouTube clone is ready this is our homepage and if I click on this thumbnail it will open the video page next we will integrate the YouTube API using that we will update this data these data will be coming from the API so first we will create one API key to create the API key we will open new tab and here we will search for YouTube data API key open this link we already have a Google account we will go to Google developers console using this link open this link in new tab then click on this button create project here we will add a project name YouTube clone then click on this create button now our project has been created now we will click on enable apis and services and here in this search box we will type YouTube data API version 3 open this one now click on enable button now we have enabled the YouTube data API version 3 then click on create credentials and here we will select the API YouTube data API version 3 after that we'll click on this public data then click on next so here we have one API key let's copy this API key click on this done button now we will come back to the vs code editor in this SRC folder we will create a new file and the file name will be data.js in this file we will create one variable so let's add const API key equal to and here we will paste our API key after that we will export this API key so that we can use this API key in any component after exporting this API key we will come back to the web browser and here we will search for YouTube data API open this website then click on references and here we have this section in the sidebar using that we can access the YouTube's data so first we need the data for the homepage of our YouTube clone to make this YouTube clone functional we have to display this card data using the API so let's open the vs code editor and we will open home. jsx file and here before this return a statement we will add one state variable to create the state variable we will add const category and this Setter function name will be set C category equal to user State and we will initialize it with zero after that we will pass this category and set category in this sidebar using props so let's add category equal to curly bres category then we will pass the setup function set category equal to set category after that in this feed component also we will pass the props so in this one we will pass the category and here we will pass the category using the category props we can change this data when we click on the home it should display the mixed content if I click on the gaming it should display the gaming videos from the API for that we will use this category state so first we will make the side word so let's come to side word. jsx file here first we will D structure the props so here we will type category and set category after that in this div where we have the class name side link we will add the onclick property so let's select all these div with the class name side link and here we will add on click property and in this one we will pass add a function and here we will call the set category function and in this one we will pass the value zero so we have passed the category zero now we will come back to the browser and here we will open video category then click on list then click on this link list and then click on execute button I will select this account allow the permission now here you can see we have one re response where we have one aray and in this aray we have multiple objects so here you can see the ID is one and the title is film and animation here we have the id2 that is for autos and vehicles here we have so here we have different ID for different categories this is for music this is for pet and animals so now let's come back to the vs code editor and here we have to set the ID for this home we will set zero for this gaming we have find the ID from this response ID number 20 that is for the gaming you can see the title gaming so we will provide this ID here 20 similarly for this automobiles we will use ID number two after that in this Sports category we will set the ID 17 this will be 24 for the entertainment for technology it will be 28 category ID for the music category ID will be 10 for blogs it will be 22 and for news it will be 25 so here we have provided the different ID for different category after that we will convert this class name in Dynamic class name for that here we will add the curly Braes and we will convert it in the back Tex after that here we will add the template literal so let's add dollar sign curly bres and here we will check if our category is zero in that case here we will provide one class name so here we will check if our category is zero in that case we will add a class name that is active and if the category is not zero in that case after this column we will add empty string so if the category is zero in this class name it will add one more class name active now just copy this and paste it in other class name also remove it and paste it that we have added in the previous div here we will check the category is 20 then it will add the active class name in this div second div similarly we will update it in the third div and update the category 2 that we have provided here in the next one we will add category 17 similarly in the next one we will add the category 24 in the next one we will add the category 28 then in the next one we will add the category 10 in the next one let's add the category 22 and in the last one we will add the category 25 after that we will add the CSS properties for this active class name so we will copy this class name and we will open sidebar. CSS file here we will add dot s link and with this this one if it contains the active class name also then for this IMG tag we will add the CSS properties so here we will simply provide padding bottom and Border bottom then save the changes and we will come back to the web page so here we are on the homepage so here you can see one underline in the home icon if I click on this gaming now this border bottom is at the gaming icon so now we can highlight which category is active right now if I Collapse this sidebar still you can see this bottom line below the icon now our sidebar is ready let's close this file and now we will come back to the feed. jsx file and here first we will D structure the category prop after that here we will add the logic using that we can fetch the homepage data from this API for this homepage we need the video list to get the video list we will come to videos section and here we will click on list list after that we'll click on this list most popular videos after that in this charts we will select most popular and here scroll down in this video category ID we will provide the ID zero you can select the reason code I'm selecting us and in this Max result I will add 50 so that we will get the 50 videos detail after that we will click on this so code and then click on this HTTP after selecting it here we will get one link just copy this link after copying this link we will come back to the vs code editor and here we will create one function and the function name will be fetch data so let's add const fetch data equal to async Aro function after that in this function we will create one variable so here we will add const video list URL equal to and here we will use back tick after that we will paste the link that we have copied and here remove this HTTP 1.1 so this is our URL and in this URL we have added the video category ID zero we have manually added it but we will get this ID from this category props for that we will update this remove this zero and here we will use template literal so we will insert dollar sign craes and in this one we will provide the category prop similarly in this key we have to provide the API key so remove it and here we will use dollar sign curly bres and in this one we will use our API key that we have stored in this data.js file so we will use this API key in this feed. jsx file for that we have to import that API key so we will add import card lies and here we will type A API key so we have imported the API key from data file and we will add key equal to API key so we have created the URL for fetching the video list now we will use the fetch API so we will add await Fetch and in this F we will provide the video list URL after that we will create the state variable to store the data that will be coming from the API link so here we'll create one state variable just add const data and seter function name is set data equal to user State now now initialize this variable we will initialize it with empty array so we have created one state variable data and the type is one AR after running this fet we will get one response to check the response here we will click on this execute button and select the account and allow the permission so here we will get the response like this where we will get the aray and in this aray we have multiple objects all object contains the data for a video card as you can see here we have the published ad it will display the time when the video is uploaded this is the channel ID here we have the video title after that we have the description then we have thumbnails after that we have the channel title category ID and some other details like view counts like counts so we will use these details to use these details we will save this areay in our data state so let's come back so after this F statement here we will add dot then and and in this then we will use response we will add response. Json after this response. Json we will get another promise so again we will use do then in this then we will add data and from this data we will find this aray and store it in our data state so we will add set data function and in this set data function we will provide dat data dot items so after adding this from our response data do item property that is an array that will be stored in this state that is name as data now our fet data function is ready now to run this function we will use use effect and in this one we will pass one Arrow function and now I want this use effect to execute once when the function is loaded so here we will add comma and a square bracket in this function we will call fetch data so when we will load the component this use effect will be executed after that I want when the category ID gets up updated then also this fetch data will be executed so in that case in this braet we will add category so when we will select the category in that case it will update the category ID when the category will be updated it will update the category ID and we will get the updated data from the API that will be stored in this data State now in our data State we have the data from the API now we will use this data to display the card on the web page so first here we have the multiple cards let's remove it we will add only one card so now we have only one card with link tag here we will use one curly bres and we will use data are a that we are getting from the API on this one we will add the map method and in this map method we will add one Arrow function in this Arrow function we will pass individual item and index number after that we will use the return statement and in this return we will move this link tag then save the changes so here we have the same cards 50 time because in our data we have total 50 items after that we will find the thumbnails title from this data that is in the item array in this item we have the array and in this one we have the objects where we have the ID this is the ID then we have the category ID so in this link to instead of 20 we will add template literal and in this one we will provide item dot a snippit DOT category ID so here you can see in this is snipet we have this category ID and we have used it in this link tag similarly a shet of this video ID we will add the video ID from API so here we will add dollar sign curly bres then we will provide item do ID that will be the video ID now save the changes and we will open the web page now if I click on any thumbnail image it will open the video page on the URL you can see the category ID 24 and the video ID now let's come back to the homepage and here we have the image SRC so here we will use the thumbnails that are coming from API in this thumbnails we have the medium URL so here we will use item dot snippet Dot thumbnails do medium. URL after that save the changes and we will come back to the web browser so now you can see all the thumbnails has been updated these are coming from the API now we will display the video title from the API so we are getting the title in this snippet with the title property so remove this default text and here we will add CES then we will add item dot snippit dot title then save the changes and here we have the title for each videos after that we have to update this channel data so remove this text and here we will add curly brushes then here we have to add the channel name so in this response you can see we have the channel name with the property Channel title so here we will type item do snipet do Channel title now save the changes and open our web page now you can see the channel name has been updated on our web page you can see different channel name here Mr vist BBC news9 after that we will update the view count and the time when the video is uploaded so let's remove it and here we will add the curly bres so video views data is available here in this Statistics property and view count so let's add it here item do statistics Dot View count then save the changes so you can see it is displaying number of views but this view is displaying in complete number but we want it in the, and million so to convert it we will build one converter so in this data.js file we will create one Arrow function that will take the views data and convert it into to the thousand and million for that we will add con value converter equal to Arrow function and in this parameter we will add the value then here we will add if statement in this one we will check if our value is greater than 1 million so we will type value is greater than equal to 1 million in that case we will return value divided by 1 million after dividing we will get the value in decimal to to remove the decimal digit we will use math. FL so we will add math. Flo method after that from this data decimal points will be removed after that we will conat the string that will be M that means million after that if the value is less than this 1 million in that case we will add else if and here we will check if our value is greater than equal to 1,000 in that case we will return the same thing just copy and paste it here and here we will divide it by 1,000 and instead of M we will add K that means th000 if the value is less than 1,000 in that case we will simply add else condition and return that data so we will return value our function is ready now now we will export this function and save this file and now we will come back to the feed. jsx file and here we have added view count so remove it and we will use value converter function and in this one we have to provide the value that is coming from the API so just paste that one after after adding this let's come back to the web page now you can see we have the views in million and thousand format after that we have to display the time here when the video was uploaded so we will use the curly addes and here we will use this time from this API so here we have the published date that is in the snipet published add property so just add item. snipet then dot published at and save the changes so here it is displaying the date and time but we have to convert it in the format like 2 2 days ago 1 days ago 1 hour ago so for that we will use the moment package so in this package Json you can see moment that we have installed while installing the packages now we will use this package so let's remove this and here we will type moment and in this one just add this published at then we will add Dot from now then save the changes now it is calculating the day from today's date and published date and displaying the value here like 1 day ago 3 day ago after that if I click on this gaming section you can see all the videos has been updated and it is displaying the content related to game gaming similarly if I click on news now it is displaying the thumbnails and title related to news if I click on blogs you can see it is working fine all the categories are working if I go to music we have the music content if I come to technology we have the technology content if I come to entertainment we have the entertainment related videos then if I come to sports we have the sports related videos now this category functionality is successfully working if I click on any video thumbnail it will open the video page and on this page we have the data which is static data so we will update this data using this category ID and video ID using this video ID we will display the correct video here and we will display the related comments and channel details and using this category ID we will display the recommended videos in the sidebar so first we will add the video player functionality for that we will come to youtube.com and open any video here we have the video ID and this video is playing here similarly using this video ID we will play that particular video so let's right click on this video and click on copy embed code then close this and let's come back to our vs code editor Let's Open Play video. jsx file and remove this video tag or let's comment it and after that we will paste that embed code that we have copied from YouTube so here we have the iframe in this one we have the width height SRC in this SRC we have the video ID here we have the title and some other attributes so first let's remove this width height and remove this title also now what we have to do we will get the ID from the parameter and place it here for that we will use use padams for that let's come to video. jsx file and here we will type const clys we will type video ID then category ID we will get the video ID and category ID using use padams so from the URL video ID and category ID will be saved here now we will pass this video ID and category ID using props so in this play video component we will pass video ID equal to curly presses video ID then we will come here play video. jsx file and here we will D structure that video ID so we will add video ID after that we can use this video ID in this iframe SRC so remove this double quote and convert it into template literal first we will add the curly Braes then back tick and here we will use template literal so let's add dollar sign curly VES and we will place the video ID now save the changes after that we will come to homepage and if I click on this video this this particular video is added on this video page now I want this video to be autop playay when we open this video page for that let's come back to the vs code editor and after this curly bres we will add question mark and here we will add autop play equal to one then save the changes and come back back to the web browser now we have to set the homepage on this logo image so that when we will click on this logo it will open the homepage for that let's come back and come to Nabb bar. jsx file we will wrap this image tag using link tag so just add link move this image in this link tag and here we will add two property and we will provide the path slash save the changes and we will come back to the web browser and if I click on the logo it will open the homepage now if I open any other video that video is added here on this video page and it is automatically playing let's open another video you can see another video is added here now we will add the CSS properties for this I frame right now it is displaying very small so just come back and open this play video. CSS file and convert this video tag in the iframe after that here we will Define the height that will be 37 V ww then save the changes and come back to the web browser now our video size is perfect if I click here it will start playing the video and if I click again it will pause the video let's go to homepage let's open another video you can see another video is playing here after that we have to update these data that is video title views and upload time using the API data so first we will open this file play video. jsx here we will create one user State variable so let's add con API data set API data equal to user State and and initialize it with null after that we will create one function using that we can find the title description views time and the like data using this video ID so here we will add one Arrow function and the function name will be f video data so let's add const and write the function name fetch video data equal to and this will be one asnc Ado function here we will add one comment fetching videos data after that we will create one URL where we will pass the video ID and using that video ID we will get the data so here let's open this web page and click on videos then list and here we have the list by video ID let's click here after clicking here we will click on so code click on HTTP and copy this URL here we will create one variable so we will type const video details URL equal to and here we will insert the backtick and paste that URL after that instead of this ID we will use the template literal so just add dollar sign curly bres and here we will use the video ID so just paste it here video ID after that in this key we will use the API key that we have stored in this data.js file so remove this and here we will insert dollar sign cly bres and here we will provide API key after that our URL is ready next we will use the fetch API so let's add await Fetch and in in this fetch we have to use the video details URL after that we will get one response so let's see the response what we are getting let's click on this execute select the email ID and allow the permission so here in this response in the item property we will get one array in this array we have one object and in this object we have video ID published date Channel ID video title video description then thumbnails after that we have the tags channel name then we have view count like count and comment count so we will use these data and display it on our YouTube clone video page we will save this response data in our API data so after this page we will add 10 in this one we will get a response so just add response and for this response we will add response. Json after that we will get another promise so let's add then method and here we will get the part data so let's add data and from this [Music] data we will find the ad that is in this item property and in this are we have the object so we will store this object in our API data state so here we will type set API data and in this one we will provide data do items and here we will provide the index zero so it will provide this object in the API data state after that we will run this function for that we will use use effect so let's type use effect in this one we will pass one add function and here we will provide square bracket so that this function will be executed only once when the component is rendered so here we will call that function fetch video data then the function will be executed and the data coming from the API will be stored in this API data State now we will use this data to display the video title so remove this hardcoded title text and here we will provide curly bres and in this object we have a snippet and in this snipet we have title property so first we will check if our API data is available and that case we will type apid data. snippit do title if it is not available in that case here we will add one text title here then save the changes and we will come back to the web browser now if I go to home page open this video so you can see the title I spent 7 days days so let's open it and here we have the title I spent 7even days so now we'll display the number of views and time from the API data so here we have the number of views remove it and here we will add the cures here we will check if our API data is available so in that case we will display the value from this view count that is in the statistics property so let's add API data do statistics do view count after that if the API data is not available in that case here we will add the value 16k okay and save the changes here we will add s statistics save the changes now here you can see the view data is coming from the YouTube API now we will convert it in the million or thousand value using the converter function so here we will add value value converter and in this one we will paste this data now you can see the views in million it is 64 million next we will display the time so here we have added the manual time 2 days so remove it and here we will add moment and in this moment we will provide the API data do snippit Dot published at and after that we will add Dot from now and here we will import moment from moment to run this moment we will wrap it in the curly reses after that save the changes and open the web page so here we have the 3 days ago that is coming from the API so here we have used the moment and publish date from now here also first we will check if this API data is available in that case we will display this date and if this API data is not available in that case will will display one empty string save the changes and open any video so here we have the views and upload time after that we will update the like data here so here we have 125 remove it and here we will use curly presses then in this one first we will check for the API data if it is available in that case we will add API data. statistics do like count and if this API data is not available so in that case we will add colum and let's display 155 now save the changes and we will come back to the web browser so here we have the like data now we have to convert this using the value converter function so let's select this and we will wrap it and we will pass it in the value converter function save the changes now we have the 3 million likes that is coming from the API we are not getting any dislike data from the API in that case let's remove this to after that in this s snipet we have the description that is the video description so remove this hardcoded description and here we will add one paragraph tag in this one we will use the cly braces and here we will check if our API data is available in that case we will use API data do snippit dot description after that we will add colum if the API data is not available in that case we will show one a string where it will display description here save the changes and we will come back to the web browser so here we have the description this description is too long so we will make it a small for that here we will use this slice method and here we will provide 0 and 250 then save the changes now this description is small after that we have to update this number of comment so it is here in this comment count value so here remove this manual value and we will add Cur ass and we will check for the API data if it is available in that case we will add API data dot statistics Dot comment count and if the API data is not available in that case we will display 102 save the changes and here it is displaying number of commands we can convert this one also in Thousand or million using the value converter so let's add it in the value converter function and save the changes now it is displaying 59k commments after that we have to update the channel name so it is available in this data in this channel title so let's come back and in this P tag remove this text and we will add curly reses and here we will check API data and if the API data is available in that case we will use API data do snippit dot Channel title if the API data is not available in that case after this colon we will provide one empty string then save the changes so here we have the channel name so right now we have these information from this API that is title views time likes channel name description and comment count now other details like number of subscribers Channel logo we have to use another API link so we will go to channels then click on list and here we will open list by Channel ID then here we will open so code and here we will open HTTP and copy this URL after that we will come back to the vs code editor and here we will create one state and the state name will be Channel data and the seter function name will be set channel data equal to user State and we will initialize it with null after that we will create one Arrow function and the function name will be fetch other data so let's add const fch other data equal to and here we will create one asnc Aro function so just add asnc Aro function and in this one we will add one comment fetching Channel data after that we will construct one URL so let's add const Channel data URL equal to and here we will use back tick and we will paste the URL that we have copied now in this ID we have to provide the channel ID to provide the channel ID we will use the API data so remove it and here we will use template literal so let's add dollar sign curly bres and to get the channel ID of this video we will add apid data. snippit dot Channel ID after that in this key we will use our API key so we will add dollar sign curly addes and here we will provide the API key now we have constructed this URL after that we will use the fetch API so we will type await fetch in this one we will use Channel data URL after that we will get one response so let's see which type of response we will get let's click on this execute button select the account and allow the permission so we will get this type of response where in the items property we will get one aray and in this aray we have one object in that object we have the channel name Channel description Channel custom URL Channel creation date and here we have the channel logo so we will use this URL to display the Channel logo in our YouTube clone page and here we have the country details and here we have the subscriber count view count and video count so we will use the subscriber count so first we will save this response data in our Channel data state so let's add dot then and we will get the response so we will pass the response using Jon method then again we will get promise so we will use then and in this one we will get the part data that we will store in our Channel data state so let's add set channel data and in this one we will pass the data do items and in this items we will provide the index number zero so we will get the object which is here so this object will be saved in the channel data here we have used used the API data for getting the channel ID so I want this fetch video data to be executed first so that we will get the channel ID and after that it will execute this second function which is fetch other data for that here we will use one more use effect and in this one we will pass one Arrow function and here we will add the bracket and in this one we will provide the API data so when the API data will be updated this use effect function will be executed and in this one we will call the F other data function so when this API data will be updated then only this function will be executed after that in this channel data we will get the data about the channel information so we will use that data to display the Channel logo and subscriber so here in this SRC remove this image and here we will use Channel data first we'll check if the channel data is available in that case We'll add Channel data dot snippit dot thumbnail dot default do URL if the channel data is not available in that case here we will simply provide empty string if the channel data is available in that case we will get the Channel logo URL from the API and if it is not avilable in this SRC we will use empty string save the changes and we will open the web page so you can see the Channel logo here after that we have to update the subscriber count to display the subscriber count remove it that is 1 million and here we will add curly Braes and first we will check Channel data is available or not so if it is available in that case we will add Channel data. statistics do subscriber count and if the channel data is not available in that case here we will provide one string that is 1M save the changes and we will come back to the web browser so here it is displaying number of subscribers in the complete number format so we will convert it using the value converter so let's cut this one and we will use value converter function and pass that value that is subscriber count save the changes now you can see 225 million subscribers so using the channel data we have displayed the logo and number of subscriber after that we have to display the real comments from the API so to get the comment data let's open this page we'll click on comment threads click on list and we'll select list by video ID then click on so code then click on HTTP and copy this URL after that we will come to vs code editor and here we will add one comment fetching comment data and here we will create one URL that is const comment URL equal to back tick and in this one we will paste the URL that we have copied after that in this URL we have to provide the video ID so we will use the dollar sign curly bres and we will provide the video ID just add video ID that we have received using props and in this key we will provide the API key so just add dollar sign cures and here we will use API key now we have constructed the URL after that we will use the fetch API so we will use await Fetch and in this one we will provide the comment URL here we have to select the max result 50 uncheck this one and click on execute so we will get the response items and in this items we have the aray and in this aray we have multiple objects and each object has one comment and the username of the person who has commented and the profile image of that user so we will use these data to display the real comments on this video for that let's come back and open this code file we will store this data in one state variable so let's create one state variable con and the name will be comment data and the seter function name will be set comment data equal to user State and we will initialize it with one array after that here we will add dot then so we will pass this response using the Json method so we will add response do Json now again we will get one promise where we will get the parse data so let's add dot then data and we will store this pass data in our state variable that is comment data so we will use the setter function set comment data in this one we will add data do items now this comment data will be stored here in this state variable after that here we have the multiple commments so let's delete other commments we will keep only one comment so let's remove these comments here we have only one comment save the changes on this video page we have only one comment now we will use this comment format to display all the comments so first let's add a space here and here we will add curlys let's add command data. map method in this one we will pass one Arrow function here we will add the individual item and and we'll add the index after that we will return and in this return we will place this comment format so place it here in this return after that in this div we will add the key property in this one we will provide the index after that we will save the changes and we will come back to the web browser so here we have the multiple comments so it is around 20 commands now we will use this item data to display the real commands so first let's open this response and in this one we have snippet and in this snippet we have top level comment in this top level comments we have another snippit and there we have author profile image URL so we will use this URL to display these images so let's come back and in this image tag remove this user profile and here we will add item do snipet dot top level comment do snippet dot author profile image URL now save the changes now come back to the web browser now here it is displaying different users image who has commented on this video after that we will display the users's name so let's see this response data here we have author display name so we will use this one so here we will add curly Braes in this one we will add add item do snippit do top level comment do snippit and after that we will use author display name now save the changes now come back to the web browser so here it is displaying the username of each users who has commented on this video now we will display the real comment so we are getting the comment data in this text display where we have the comment so using this we can display the comment on our YouTube clone so remove this text from this P tag and here we will use the curly Braes in this one we will add the item do snippit dot top level comment dot snipet dot text display after that save the changes and now we will open the web browser so here we have comment of each users after that we will display the like data for this comment so in this API you can see we are getting the response like count so we will use this like count to display the number of likes so in this hardcoded data let's remove it and here we will add the data from the API so let's add item dot a snip it dot top level comment dot snippit dot like count then save the changes and here it is displaying updated like data that is coming from the API now here also we will use the value converter function so that it will be displayed in the thousand and million format so here we will we will use value converter and we will add it inside this bracket now save the changes now these comments are displaying in the Thousand format so right now here it is displaying 20 commands if you want to display more comments in this comment URL you can update the value so let's add and Max result is equal to 50 like this after that save the changes and come back to the web browser now it will display total 50 commments now we have created the play video component where we have the video then we have the video deleted details then we have the video related comments after that we have to create the recommended section where we will display the videos related to the main video which is playing on this web page for that we will come back to the vs code editor and we will open video. jsx file here we have the category ID that we have F from the URL so so we will pass this category ID in this recommended component using props so let's add category ID equal to category ID after that we will open this recommended. jsx file and here first we will D structure that category ID so let's add curly bres and we will add category ID after that we will use this category ID and we will fetch the video related to the category ID and we will display it in this recommended section for that first we will create one state variable where we will store the data that will be coming from the API so let's add const and the state variable name will be API data and the function name will be set API data after that here we will add equal to user State and we will initialize it with empty aray after that we will create one Arrow function where we will use the fetch API so let's add const fetch data equal to snc Arrow function and here we will construct the URL to construct the API URL we will add const and we will add the name related video URL equal to and here we will use the backtick in this one we have to provide the URL so let's come back to the browser and close this one and we will click on this video section in this videos we will click on list then click on this list most popular videos after clicking here in this field we have the video category ID in this one we will pass zero then click on so code and here we will click on HTTP and from here we will copy this URL after that we will paste this URL in this back tick and in this API key we will use our API key so let's add dollar sign curly and we will provide the API key after that here we have the video category ID so in this video category ID we will provide the category ID from this category ID that we have received using props so remove this zero and we will add template literal so just add dollar sign curly Braes and just add category ID now we have constructed the URL after that we will use the fet API so let's add await fetch in this one we will provide the URL that is related video URL then we will get one promise so we will use then method and we will get the response data so we have to pass that response data using Json method so let's add response and we will add response. Json so it will return another promise so we can use then method again and in this then method we will get the parts data and we will store that Parts data in the a state variable that is API data so first let's check in which format we are getting the data so let's execute this then allow and you can see this data is coming in the items property in this aray so we will store this aray in this API data so let's add the setter function set API data in this one we will provide data dot items so we have implemented the fet API now to call this function we will use use effect so let's add use effect in this one we will pass one Aro function now I want this function to be executed when this comp is rendered first time so let's add the square bracket and here we will call that function fit data now this API data will store the multiple videos data and we will display that in the sidebar so we will remove other recommended videos we will keep only first one so here we have multiple video list let's remove other video list and we will keep only first one here we have only first video that is displaying in the sidebar using this format we will display the data from the API that is stored in the API data in this div we will add the curly and here we will add apid data. map method in this one we will pass one Aro function and here we will add individual items and index number then we will use return and in this return we will return this format so place this HTML elements here after that in this dip we will add the key property and we will pass index now save the changes so here you can see in this result we have five data now if you want to display more data then let's come back in this URL we will add and Max result is equal to 45 now save the changes now in the right side you can see total 45 recommended videos will be displayed right now it is displaying all same images and title so using this API data we will update these thumbnails and video details like video title Channel details and Views so first we will display the thumbnails so remove this thumbnail and we will open this API data in this response you can see in this snippet we have thumbnails and here we have the medium and URL so we will use this medium URL to display the thumbnail so in this one we will type item dot snippit do thumbnails do medium. URL now save the changes and come back to the web page so you can see here we have the updated video thumbnails that is coming from the API after that we will display this title so here we have the title so let's remove it and here we will add the cly addes and we will get the title in this snippit in this title property so let's add item do snipet do title now save the changes and we will open the web page now here all the titles has been updated after that we have to display the channel name so here we have the channel name in this response data with the property Channel title so let's add cly addes we will use item do snip it do Channel title save the changes now it is displaying the updated channel name for this video list after that we have to display the views count so views data is available here in this Statistics view count property so we will use it to display the number of views in the recommended section so let's come back and here remove this manual value and we will use the curly press item do statistics Dot View count and save the changes and now you can see here we have the updated view count here also we will use the value converter so let's add value converter and wrap it in the bracket now we have to import this value converter so let's add import value converter after adding this let's remove these imported thumbnails we don't want this save the changes now you can see it is displaying The View count in millions now if I click here this video is not playing so next we have to add the functionality that when we click on any video from the recommended list that video should be displayed on this video page and the video details will be displayed below the video for that we will use the category ID and video ID so let's convert this div tag in the link tag after that this react router Dom will be imported after that here we will add two property in this one we will use template literal so we will add back tick and we will add SL video slash and we will provide the category ID so so we are getting the category ID in this snippet in the category ID property so we will add dollar sign curly bres we will add item do snippit dot category ID after that we will provide one slash and after that we will add video ID so we are getting the video ID directly in this object with the ID property so let's add dollar sign curly addes item do ID that's it after that save the changes and we will come back to the web browser and now if I click on any video in the recommended section that video will be played on this video page but here we don't have that particular video detail so what we have to do we have to display the video detail from this particular video for that let's come back to the play video. jsx file here we have the video ID remove it and we will take this video ID from the padams instead of props so let's add const video ID equal to use pams after that we will provide this video ID here so that when the video ID will be updated this F video data will be executed when this will be executed this will update the API data and when the API data will be updated it will call another function which is fetch other data now save the changes and we will come back to the web browser now let's go to homepage open this video so this video is playing here now from this recommended section let's open another video that video is playing here and here we have the updated video details so now we have created all the functionality in this YouTube clone where we can change the content based on the video category and we can collapse and expand the sidew then we can open the video by clicking on the thumbnail that video will be automatically played after making all these features next we have to make this project responsive for a smaller screen devices right now if I inspect this web page and change the screen size you can see it is not responsive so we have to make it responsive using the CSS media queries so let's come back to the vs code editor and here we will open the na. CSS file here we will add the media queries so we will type media and here we will provide the max width let's add 900 pixel here we will add dot menu icon and for this menu icon we will add display none so that it will be hidden for the smaller screen after that we will add dot nav right and IMG and here also we will provide display none so that it will hide all the icons that is in the right side so if I reduce the width under 900 pixel so you can see these icons are hidden now we have to display the profile icon that was added in the nabard so here we will add dot navite do user icon and for this one we will provide display block so that our image will be visible then we will add the width of 30 pixel save the changes and you can see this user profile icon is visible for small screen after that we will reduce the width of this logo for that here we will add the class name do logo and we will provide the width it will be 90 pixel now the logo size has been reduced for this small screen after that we have to add the CSS properties for this input field so let's add dot nav middle dot search boox input field and here we will provide the width that will be 100 pixel then save the changes and here you can see the search box is small after that let's come back and open sidebar. CSS file and here we will add the media queries so we will type media and Max width 900 pixel and and here we will provide the class name do sidebar and here we will add display none so that the sidebar will be hidden in a smaller screen let's click here to open the mobile view you can see the sidebar has been removed but here we have lots of a space in the left side so to fix this one let's come back and we will open this file home. CSS here also we will add the media queries so let's add media Max width 900 and here we will add the class name do large container and one more class name do container for both class name we will add the property that is padding left and padding right that will be 5% so it will be equal and small space from the left and right side so let's open the web page you can see this home page is looking perfect in a smaller screen now if I open any video it will open the video page so this is the video page and now we have to make this page responsive for small screen so let's open the video. CSS file and here we will add media we will provide the max width and it will be 900 pixel here we will use play container and for this one we will add the padding from the left side 5% and padding from the right side it will be 5% save the changes now here we have the padding of 5% from left and right side after that we will come back to the vs code editor and open Play video do CSS file scroll down and we will provide the media query here so let's add media Max width and it will be 900 pixel so for this page we will provide play video class name and we will provide the CSS properties Flex basis 100% then we will add the class name play video then iframe element so for this I frame let's provide width it will be 100% And we will provide the height of 50 VW after that here we will provide dot vid description and we will provide the padding from the left side that will be zero then we will provide the class name play video do play video info then a span tag and here we will use margin from the left side zero then margin right 15 pixel and margin from the top 15 pixel so here we have added the CSS properties for play video component then we will open recommended. CSS file and here we will add the media queries so let's add media then Max width it will be 900 pixel and here we will provide the recommended class name for this one we will provide the CSS properties Flex SP is 100% so it will also use 100% space in small screen now open the web page and this video is playing here and this page is completely responsive if I reduce the screen size you can see it looks perfect in a smaller screen if I scroll this web page you can see it is looking great if I open the homepage it is also looking good so now we have made our project completely responsive and we have created this YouTube clone project using reactjs I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel greatest tag to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 28,613

Keywords: youtube clone react js, youtube clone using react js, youtube clone in react js, react js full website project, react js project, react js project from scratch, react js website project, basic react js project, project using react js, react js tutorial, react js tutorial for beginners, react js beginner tutorial, react js full tutorial, web development, programming, react js, coding

Id: Zb1zVeXLUf8

Length: 188min 34sec (11314 seconds)

Published: Mon Feb 12 2024