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

Sdílet
Vložit
  • čas přidán 7. 09. 2024

Komentáře • 233

  • @GreatStackDev
    @GreatStackDev  Před 4 měsíci +8

    👉 Live Preview: vidtube-sable.vercel.app/
    👉 Source code: greatstack.dev/go/youtube

  • @user-em6zb5tl9c
    @user-em6zb5tl9c Před 6 měsíci +30

    This video was recommended as soon as I opened CZcams. What an exciting tutorial it is.

  • @user-dr4yt3mt6n
    @user-dr4yt3mt6n Před 6 měsíci +9

    you are amazing i remember when you used to make small projects videos now your making clones for big apps this 10x more amazing keep posting we want series for big apps like this long videos

  • @RahulGavada-g2w
    @RahulGavada-g2w Před 5 hodinami

    Finally completed the CZcams clone project, Thank you so much , it was really awesome!!!.

  • @Lakshitanand
    @Lakshitanand Před 6 měsíci +8

    I just completed this React JS project. Thank you for this CZcams clone. It really helped me a lot. Best CZcams channel to learn and build projects. Keep creating more like this. ❤

    • @amarkumarsbg
      @amarkumarsbg Před 6 měsíci

      Can you help me I am not getting some issue in Play video.jsx file
      Not able to fetch the video title

    • @bsharsirhan9046
      @bsharsirhan9046 Před 3 měsíci

      asdfw

    • @Learn2CodeWithMe
      @Learn2CodeWithMe Před 3 měsíci

      ​@@amarkumarsbg i am facing a problem in the recommended. Jsx

    • @SanchuVlogs-su6fl
      @SanchuVlogs-su6fl Před 2 měsíci

      Could any one please help me I'm not getting show code code for getting API link?

    • @prakharprakashsingh2931
      @prakharprakashsingh2931 Před měsícem

      @@SanchuVlogs-su6fl just click on expand button of APIs Explorer you will get option of show code :)

  • @ajiteshmishra0005
    @ajiteshmishra0005 Před 6 měsíci +6

    Please create one video on JWT authentication in ReactJS or NodeJS in such a way that any beginner can understand and can get a full explanation from scratch to advanced.
    You can explain using any project also.

  • @POK_Samrat
    @POK_Samrat Před 6 měsíci +6

    Congratulations on your efforts and making such informative videos.
    ❤❤❤

  • @rifatmunna
    @rifatmunna Před 6 měsíci +36

    bro, Can you make a paid website video . I mean a website that have best SEO ,smooth search ,better Code with MERN

  • @ozibryan
    @ozibryan Před 21 dnem +2

    I appear to be missing the Thumnail images from the Asset folder ? Ive just copied some revelant ones dow but worth a mention :-)

  • @iftyrahman2239
    @iftyrahman2239 Před 6 měsíci +4

    Thank you sir....Very very greatful for this tutorial. ❤

  • @gabrielkingori3375
    @gabrielkingori3375 Před 6 měsíci +1

    Hello, my best lecture on you tube that i have ever meet, that is an amazing tutorial. I recommend you make a tutorial on how to host a website online. Thanks for you great effort to share your knowledge with us 👍👍

  • @rivaldodsilva2926
    @rivaldodsilva2926 Před 6 měsíci +3

    I think you need to add functionality to the search bar too, seems pretty straight forward, but you may have missed on it

    • @rossjames4765
      @rossjames4765 Před 6 měsíci

      Just ignore this and continue following the tutorial because the actual API calls work from the app. Its just giving 403 errors in youtube api page on google console

    • @rivaldodsilva2926
      @rivaldodsilva2926 Před 6 měsíci

      @@rossjames4765the entire application works for me, i just found it weird to have a non functional searchbar 😅

  • @Sanju-gp4ch
    @Sanju-gp4ch Před 3 měsíci +3

    Could you please use any css frame work instead of raw css so it will be helpful!

    • @GreatStackDev
      @GreatStackDev  Před 3 měsíci

      Sure.. Will do projects with Tailwind CSS.

  • @Singh34773
    @Singh34773 Před 6 měsíci +2

    Nice bro your video is more impactful as compared to others

  • @kanu-luyika
    @kanu-luyika Před 5 měsíci

    Çok teşekürler videonu 3 defa dikatle izledim ve 2. izlememde projeyi bende yapmaya başladım anlamadım tekrar tekrar izledim (2) şuanda bende yaptım çok mutluyum 14 yaşındaydım ve arkadaşlarıma hava atıyorum senin sayende ben hindistanlıları hep kötü bilirdim ama senin konuşmandan belli iyi biri olduğun kanalına abone oldum ve şuanda tüm videolarına like atmaya başladım. (konuştuğum dil türkçe benim)

  • @simaokane
    @simaokane Před 6 měsíci +1

    Thank you brother for this exceptional work. Can you make a video on the deployment of a website?

  • @TheMarketingMan4U
    @TheMarketingMan4U Před 2 měsíci +2

    Hi,
    Why did you create so many folders ? its really confusing..One more thing. Just for adding functionality into sidebar.. i got confused how many times I have used {sidebar} and where. I didn't get the flow and logic. Can you explain please ?

  • @arif5268
    @arif5268 Před 2 měsíci +5

    00:02 Building a CZcams clone using ReactJS for learning key web development features.
    02:44 Creating a responsive CZcams clone using React JS
    09:06 Setting up folder structure for CZcams clone in React JS
    12:26 Create and style Navbar component in React JS
    19:34 Adding CSS Properties for Navigation Bar
    22:38 Adding CSS properties for navigation menu
    28:54 Setting up routes for homepage and video page
    31:51 Adding sidebar with shortcut links and icons.
    38:16 Adding CSS properties for elements in the sidebar
    41:13 Setting up sidebar functionality in CZcams clone using React JS
    47:17 Adding CSS properties for sidebar HR tag
    50:07 Creating Feed Component in React JS
    55:48 Styling video elements with CSS properties.
    58:40 Adding elements to the video page
    1:04:59 Creating and customizing different components for the CZcams clone
    1:08:05 Creating a comment section with user interaction components
    1:14:31 Adding CSS properties for various elements
    1:17:27 Adding CSS properties for subscribe button and description text.
    1:23:14 Create recommended video sidebar with thumbnails and titles
    1:26:15 Adding channel name and total views to video thumbnail
    1:32:16 Setting up API key for CZcams Clone
    1:35:27 Setting up category state and handling API response
    1:41:17 Styling the sidebar with CSS properties
    1:44:16 Setting up video list URL with category ID and API key in React JS
    1:49:54 Using fetched data to update and display cards on the webpage.
    1:52:55 Updating video details using API data
    1:59:06 Integrate moment package for date formatting
    2:02:03 Implementing category functionality and video player in React JS.
    2:08:08 Implementing CSS properties and updating data using API
    2:11:13 Setting up video details URL and implementing fetch API
    2:17:04 Adding API data for view count and time display
    2:20:16 Manipulating API data and updating video details
    2:26:08 Fetching channel data using API in React JS
    2:29:10 Fetch and save channel data
    2:34:56 Construct CZcams API URL and fetch comments using React
    2:37:50 Store and display comments using React state
    2:44:07 Setting up display for 50 comments and creating recommended video section in React JS
    2:46:58 Construct API URL using constants and template literals
    2:53:02 Updating video details using CZcams API data
    2:56:22 Update view count and add video player functionality
    3:01:54 Implement responsive design for CZcams clone using CSS media queries
    3:04:30 Make video pages responsive for small screens

  • @goodgirl9484
    @goodgirl9484 Před 6 měsíci

    hi, just a suggestion, i think it's better if you also include the browser in your screen beside your editor while you code so we can see the updates and changes :)

  • @julianvelez6563
    @julianvelez6563 Před 6 měsíci +3

    awesome work bro

  • @mangowithcheese3536
    @mangowithcheese3536 Před 6 měsíci +2

    Thank you for these tutorials

  • @silentstar2760
    @silentstar2760 Před 6 měsíci +1

    Thank you sir always grateful 🙏

  • @Lorenzo01179
    @Lorenzo01179 Před 2 měsíci

    I dont know why, but i dont get tired while watching your videos

  • @AyeshaShahbaz013
    @AyeshaShahbaz013 Před 6 měsíci +2

    Great Video❤👍👍

  • @FullSTACKDev16
    @FullSTACKDev16 Před 2 měsíci

    PERFECT TUTORIAL

  • @suryar6137
    @suryar6137 Před 5 měsíci +1

    Thank you so much sir

  • @Hindutvavadi2
    @Hindutvavadi2 Před 5 měsíci

    Thanks this projects help me alot.. Keep going..

  • @Amateur2CombaT
    @Amateur2CombaT Před měsícem

    Thank you so much , great video.

  • @user-dn9qv5wi1c
    @user-dn9qv5wi1c Před 6 měsíci

    It will great pleasure for us or me
    If we get c++ language learning video in your channel.
    I hope you will upload a video for learning c language.
    Especially i am fully satisfied and great understanding from your video

  • @ghader5547
    @ghader5547 Před 6 měsíci +2

    Gooood❤❤

  • @Men_To_Millionaire
    @Men_To_Millionaire Před 3 měsíci +1

    Bhai Hats off to you.

  • @unnikuttan9637
    @unnikuttan9637 Před 3 měsíci +1

    very helpful 👏👏👏👏👏 nice work

    • @GreatStackDev
      @GreatStackDev  Před 3 měsíci

      You're welcome. Thank You. 😊

    • @Learn2CodeWithMe
      @Learn2CodeWithMe Před 3 měsíci

      Can you provide the source code of feed jsx I am facing api problem.

  • @user-ee6gk9eh7j
    @user-ee6gk9eh7j Před 6 měsíci +1

    Thank you Sir

  • @syeddillawarrazabukhari1656
    @syeddillawarrazabukhari1656 Před 6 měsíci

    missing sub button , search and navbar on small screen is not toggle navbar upload video uncomplete just i have little confusion about and on the other hand all the tutorial is superb

  • @SriGanesh-u4e
    @SriGanesh-u4e Před měsícem

    thanks for tutorial

  • @idevkr
    @idevkr Před 6 měsíci

    Best tutorial to create CZcams clone using react js and CZcams data api

  • @ShubhamKumar-lu3fm
    @ShubhamKumar-lu3fm Před 5 měsíci +1

    nice video

  • @CHANCHAL-Baghel
    @CHANCHAL-Baghel Před 6 měsíci +1

    Can you plz make a video on add to cart in e-commerce website

  • @mahadevsunil3967
    @mahadevsunil3967 Před 4 měsíci

    Mission accomplished. Thankyou ❤

    • @soostroy
      @soostroy Před 3 měsíci

      Hello bro,
      If you may share the code cause am stuck at 1:02:28 and I can’t find the fix
      It would help me a lot, much appreciated

    • @Learn2CodeWithMe
      @Learn2CodeWithMe Před 3 měsíci

      ​@@soostroyhave your problem resolved?

    • @soostroy
      @soostroy Před 3 měsíci +1

      @@Learn2CodeWithMe yes thanks a lot a lot for asking tho

    • @Learn2CodeWithMe
      @Learn2CodeWithMe Před 3 měsíci +1

      @@soostroy 👍

    • @Learn2CodeWithMe
      @Learn2CodeWithMe Před 3 měsíci

      I'm stuck in the recommended. Jsx file when I switch the video it fails can you provide the source code. I am trying to figure out but could not find . Can you help ?

  • @wellington18m
    @wellington18m Před 6 měsíci

    Hello, thanks for the video. Could you make one also using Nextjs.

  • @PalekJRam
    @PalekJRam Před 2 měsíci

    Good :) but u have to make your css cleaner
    Also stop copying stuff and leaving them for 1 second then going back to the jsx it’s annoying and I have to go back 10s so much times

  • @NguyenVanDuy2003
    @NguyenVanDuy2003 Před 2 měsíci

    Thanks

  • @iftyrahman2239
    @iftyrahman2239 Před 2 měsíci +2

    1:43:31 Can someone please help me? I can't find the show code button at this point of the video. I would really appreciate your help ❤

    • @ooofrg4492
      @ooofrg4492 Před měsícem +1

      click on fullscreen logo(it will be on upper-right part) to get code.

  • @CreativeMinds100
    @CreativeMinds100 Před 6 měsíci +3

    1:00:39 play video jsx file import all video1 and like, dislike, dhare , save , jack , user_profile .but it not showing another page video why . anyone please answer to me

    • @anjalipal9911
      @anjalipal9911 Před 6 měsíci

      same here

    • @karthikg7698
      @karthikg7698 Před 6 měsíci

      In your JSX code and specifcy component rendering, state management, and routing. This will help diagnose the issue effectively and also for to={ dont provide any space}

  • @drexk6569
    @drexk6569 Před 6 měsíci

    thank you, please dedicate the video on how to deploy your website have really struggled with netlify but getting 404 error

  • @ashmitbastola1388
    @ashmitbastola1388 Před 6 měsíci

    Please bring Some videos on Typescript too I am finding it difficult to implement it with react

  • @whrlds
    @whrlds Před 6 měsíci +3

    Hey GreatStack I have a problem regarding the E-commerce website tutorial you have uploaded and it has to do with the images being too big and that has made the website look very different to what you shown in the video is there any way of fixing this thanks

    • @GreatStackDev
      @GreatStackDev  Před 6 měsíci +1

      Hi, there might be some issue. Just message me on Instagram, Will help you to fix it.
      instagram.com/greatstackdev/

  • @felipegomez3047
    @felipegomez3047 Před 6 měsíci

    Which UI library is being used in this video? BTW thank you for sharing this content.

  • @KRPahadiStatus
    @KRPahadiStatus Před 2 měsíci +1

    Please create music website using mern stack with admin .

  • @theeewebdev
    @theeewebdev Před 4 měsíci +2

    i am not getting show code option when i logged in youtube api data url, to get that fetching url.. how can i get it, pls help me

    • @user-od5hg3hc3w
      @user-od5hg3hc3w Před 4 měsíci +1

      same problem , but if you see on the top right of api explorer there is full screen option by clicking on that it show you the code .Hope it helps!

    • @CoderSingh
      @CoderSingh Před měsícem

      @@user-od5hg3hc3w Thanks, I was also trying to figure out the same problem. Thanks for helping

  • @user-mu1yg3ne7c
    @user-mu1yg3ne7c Před 6 měsíci +3

    Sir, when i want to add Commentthread API it shows 403 forbidden and says API limit exceeds , how can i fetch the comment api ??

  • @anchalsehgal7779
    @anchalsehgal7779 Před 2 dny

    why are you using asyn await and then together async await is another way of handling promises u dont need to use them tpgether

  • @sandeepsonu7330
    @sandeepsonu7330 Před 6 měsíci

    Bro can u upload react js project based tutorial udemy or utube it will helpful for all

  • @akshay_chougule..
    @akshay_chougule.. Před 6 měsíci

    Love you sir ❤

  • @adchanel7889
    @adchanel7889 Před 3 měsíci +2

    2:31:11
    I am facing a problem : Cannot read of properties of null (reading 'snippet')
    If anyone know please give me reply

    • @CoderSingh
      @CoderSingh Před měsícem

      hi @adchanel7889 did you got data using video id successfully at 2:17:00 ?

    • @sudocyberghost
      @sudocyberghost Před 29 dny

      @@CoderSingh make sure the path inside App.jsx is same as props u give for example path="/video/:categoryId/:videoId" props must be videoId

  • @tejasvaidya8464
    @tejasvaidya8464 Před 6 měsíci

    please do make a video on how to deploy this project on vercel

  • @Vampire_robux69
    @Vampire_robux69 Před 6 měsíci

    Good job

  • @Amith-fitness
    @Amith-fitness Před 6 měsíci

    bro please make an video on ai project that generate title , description and tags for youtube video in react js

  • @JOKERASHGAMING
    @JOKERASHGAMING Před 6 měsíci +1

    can we upload video ? if not please make so we can upload video and store it in firebase storage

  • @ashokpartel9488
    @ashokpartel9488 Před 6 měsíci

    ❤❤❤ from nepal

  • @channeltv424
    @channeltv424 Před 6 měsíci

    Thanks! I had built 🎉. Can I host this project by using firebase Does it work?. can anyone answer

  • @lookthisisaddy
    @lookthisisaddy Před 6 měsíci

    Hey could you please tell me how are you able to see hint(suggestion) in same line when you write any thing in editor or terminal?

  • @SanchuVlogs-su6fl
    @SanchuVlogs-su6fl Před 2 měsíci +2

    Hi sir,this video duration 1:44 im not able to get that video list API url.. its only shows execute. Can anyone please help me?

    • @Lorenzo01179
      @Lorenzo01179 Před 2 měsíci

      You probably found out already but just click full screen

  • @blackbackgroundpunjabisong1373

    it will more interesting if search bar is active

  • @algodius
    @algodius Před 6 měsíci

    Why use normal css instead of module css ?
    Should I try to do this using module css ?

  • @yashjetwani9192
    @yashjetwani9192 Před 5 měsíci

    How to decide which dependencies should be mentioned in useeffect?

  • @anchalsehgal7779
    @anchalsehgal7779 Před 5 dny

    pls isme firebase add krke or fuctional bnado

  • @lecoleludique2499
    @lecoleludique2499 Před 6 měsíci

    c'est plus simple : setSidebar(prev => !prev)} src={menu_icon} alt="" />Dans cette version, prev est inversé directement en utilisant !prev, ce qui signifie que si prev est true, alors !prev sera false, et vice versa. Cela simplifie la logique de basculement de la barre latérale.

  • @AnshGupta-dm8du
    @AnshGupta-dm8du Před dnem

    1:51:24 missing key prop for element in iterator please help

  • @DEBUGENTITY
    @DEBUGENTITY Před 6 měsíci

    Bro make react projects using tailwind css too.

  • @leeting4tamil
    @leeting4tamil Před 2 měsíci +1

    35:05

  • @vishalbirla-hp1zk
    @vishalbirla-hp1zk Před 2 měsíci

    completed

  • @user-ls3gq1qv8j
    @user-ls3gq1qv8j Před 4 měsíci

    when I was studying a CZcams clone as in the video some of the links in API in CZcams API were incorrect despite some of them being correct what should I do sir

  • @brijeshbhuva6743
    @brijeshbhuva6743 Před 3 měsíci

    In this CZcams clone how to apply search functionality because in medium device We have no sidebar for change category so if we have search functionality we can search video by category and Channel Title.

    • @ooofrg4492
      @ooofrg4492 Před měsícem

      Same question.if u got any related videos for this please paste link here

  • @Vampire_robux69
    @Vampire_robux69 Před 6 měsíci

    how can i add search functionality of youtube when we search something in response youtube send data

  • @Rushika-bk1jf
    @Rushika-bk1jf Před 7 dny

    Output is not showing on vite+react webpage

  • @atangacheboh8634
    @atangacheboh8634 Před 5 měsíci +1

    why is the video not playing after I put videoId ?

    • @taranimalayala1895
      @taranimalayala1895 Před 5 měsíci

      Yes same problem I am getting an error occured. Please try again later

    • @atangacheboh8634
      @atangacheboh8634 Před 5 měsíci

      @@taranimalayala1895 go back to your app file on the route remove all the spaces

  • @gamingriders904
    @gamingriders904 Před 6 měsíci +4

    Why you are not using css frameworks

  • @drexk6569
    @drexk6569 Před 6 měsíci

    please create video on how to use context in react am getting confused

  • @saadustu7808
    @saadustu7808 Před 6 měsíci

    This is great but I wish it was in MERN stack

  • @minahumar2720
    @minahumar2720 Před 17 dny

    i don't have any basic knowledge of react js can i do this ??

  • @PowerMusic697
    @PowerMusic697 Před 6 měsíci

    Hello Sir please can you do the same with angular?? thanks

  • @waisyt2425
    @waisyt2425 Před 5 měsíci

    Hello can I ask about your Extensions which Extension are you using for typing for example rafce is bringing reactArrowFunction

  • @danielgathogo1892
    @danielgathogo1892 Před 6 měsíci

    please provide a video on how to deploy on vercel

  • @tahabilici7688
    @tahabilici7688 Před 6 měsíci

    You are my love 🥺

  • @tirthsondagar1646
    @tirthsondagar1646 Před 2 měsíci +1

    hello in youtube api video section show code is not visible how can i do it please solve my bug or error

    • @Waniii_
      @Waniii_ Před měsícem

      Go to full screen in APIs Explorer sidebar on right side of your screen, you will see HTTP link there.

  • @sejalkhamar5271
    @sejalkhamar5271 Před 6 měsíci

    Sir please make project with redux-tool kit

  • @akshay_chougule..
    @akshay_chougule.. Před 6 měsíci

    Yes sir

  • @ujjawalpugalia2123
    @ujjawalpugalia2123 Před 6 měsíci +1

    Spotify full fledged clone

  • @ITRMohankumarP
    @ITRMohankumarP Před 5 měsíci

    Bro when I click the list in CZcams data api it is always remains with the string in the APIs Explorer how can I change IT

  • @anjalipal9911
    @anjalipal9911 Před 6 měsíci +1

    1:00:39 play video jsx file import all video1 and like, dislike, dhare , save , jack , user_profile .but it not showing another page video why . how can we solve this problem

    • @anjalipal9911
      @anjalipal9911 Před 6 měsíci

      @@karthikg7698 I am not getting your point
      history.ts:501 No routes matched location "/video/15/4521" this is the error in console

    • @anjalipal9911
      @anjalipal9911 Před 6 měsíci

      Thanku

  • @prajwalshaw9217
    @prajwalshaw9217 Před 6 měsíci

    Hi there. Can you also bring some basic backend projects using nodejs, express and mongodb...in the near future.Thank u

  • @Rakibul-Islam-Sumon
    @Rakibul-Islam-Sumon Před 6 měsíci

    Please start on React js tutorial

  • @PradeepWorld
    @PradeepWorld Před 4 měsíci

    How to upload it online brother? Like hostinger and github pages

  • @urs_fifa-god
    @urs_fifa-god Před 3 měsíci

    Bro in vs code i create react app by vite latest in terminal shows react language but today it show preact it's update or not

  • @kietvu2545
    @kietvu2545 Před 4 měsíci

    When I minimize the screen, the Feed section will encroach inside the sidebar. Can anyone explain?

  • @Glorian692
    @Glorian692 Před 6 měsíci

    please make a couese on how to deploy

  • @saisharn8229
    @saisharn8229 Před měsícem

    IN 2024 Still you are using prop drliing ? atleast if u cant use redux then use context API.

  • @aarushigarg1613
    @aarushigarg1613 Před měsícem

    Sir, there is no option of show code in video category.what should i do?

  • @jitendrapanigrahi4752
    @jitendrapanigrahi4752 Před měsícem

    not getting the show code options in most popular video category