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

Поделиться
HTML-код
  • Опубликовано: 11 фев 2024
  • Learn How to crate RUclips clone using React JS and RUclips Data API. Build website like RUclips with React JS. React JS project for beginners.
    👉 Live Preview: vidtube-sable.vercel.app/
    👉 Source code: greatstack.dev/go/youtube
    ❤️ Get project completion certificate: quiz.greatstack.dev/ytcl
    SUBSCRIBE: @GreatStackDev
    ❤️ Complete JavaScript Course with Certification:
    👉 greatstack.dev/go/javascript-...
    ✔️ Beginner + Advance + ES6 + Notes
    ✔️ 30 Project With Source Code
    ✔️ React Beginner course with project
    ✔️ Course Completion certificate
    ✔️ Chat Support
    In this tutorial we will make a RUclips clone web app project using React JS. In this react JS project we will use RUclips data API to get the RUclips video list and real time statistics of the RUclips videos. #reactjs #reactproject #webdevelopment #GreatStack
    Download Assets: drive.google.com/file/d/1T1Um...
    Full Stack E-commerce Website tutorial:
    👉 • How To Create Full Sta...
    -----------------------------------------
    Suggested Course:
    Complete JavaScript course with 30 projects:
    👉 greatstack.dev/go/javascript-...
    Complete HTML and CSS with 8 projects:
    👉 easytutorialspro.com/go/course/
    -------------------------------------
    Recommended Videos:
    Beginner's HTML and CSS tutorial:
    ► • HTML And CSS Tutorial ...
    Beginner's JavaScript tutorial:
    ► • JavaScript Full Course...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make fitness website design using HTML CSS:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make a Job Portal website design with HTML & CSS:
    ► • How To Make Website Us...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------------------------
    Connect with me:
    👉 linktr.ee/iamavinashkr
    Connect with GreatStack:
    Instagram: / greatstackdev
    Twitter: / greatstackdev
    Facebook: / greatstack

Комментарии • 143

  • @GreatStackDev
    @GreatStackDev  13 дней назад +1

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

  • @user-em6zb5tl9c
    @user-em6zb5tl9c 3 месяца назад +16

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

  • @user-dr4yt3mt6n
    @user-dr4yt3mt6n 2 месяца назад +5

    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

  • @iftyrahman2239
    @iftyrahman2239 3 месяца назад +2

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

  • @SamratTripathyChannel
    @SamratTripathyChannel 3 месяца назад +6

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

  • @gabrielkingori3375
    @gabrielkingori3375 3 месяца назад +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 👍👍

  • @ajiteshmishra0005
    @ajiteshmishra0005 2 месяца назад +3

    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.

  • @mangowithcheese3536
    @mangowithcheese3536 3 месяца назад +2

    Thank you for these tutorials

  • @Lakshitanand
    @Lakshitanand 3 месяца назад +7

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

    • @amarkumarsbg
      @amarkumarsbg 3 месяца назад

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

  • @Singh34773
    @Singh34773 3 месяца назад +2

    Nice bro your video is more impactful as compared to others

  • @silentstar2760
    @silentstar2760 2 месяца назад +1

    Thank you sir always grateful 🙏

  • @ghader5547
    @ghader5547 3 месяца назад +2

    Gooood❤❤

  • @AyeshaShahbaz013
    @AyeshaShahbaz013 3 месяца назад +2

    Great Video❤👍👍

  • @julianvelez6563
    @julianvelez6563 3 месяца назад +3

    awesome work bro

  • @Hindutvavadi2
    @Hindutvavadi2 Месяц назад

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

  • @user-ee6gk9eh7j
    @user-ee6gk9eh7j 3 месяца назад +1

    Thank you Sir

  • @simaokane
    @simaokane 3 месяца назад +1

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

  • @rifatmunna
    @rifatmunna 3 месяца назад +23

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

  • @goodgirl9484
    @goodgirl9484 2 месяца назад

    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 :)

  • @akshay_chougule..
    @akshay_chougule.. 2 месяца назад

    Love you sir ❤

  • @user-dn9qv5wi1c
    @user-dn9qv5wi1c 3 месяца назад

    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

  • @Vampire_robux69
    @Vampire_robux69 3 месяца назад

    Good job

  • @shah4304
    @shah4304 3 месяца назад

    Thank you sr

  • @wellington18m
    @wellington18m 2 месяца назад

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

  • @mahadevsunil3967
    @mahadevsunil3967 24 дня назад

    Mission accomplished. Thankyou ❤

    • @soostroy
      @soostroy 8 дней назад

      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

  • @ShubhamKumar-lu3fm
    @ShubhamKumar-lu3fm 2 месяца назад +1

    nice video

  • @Hamza_ksrci
    @Hamza_ksrci Месяц назад

    Ç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)

  • @idevkr
    @idevkr 3 месяца назад

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

  • @syeddillawarrazabukhari1656
    @syeddillawarrazabukhari1656 2 месяца назад

    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

  • @rivaldodsilva2926
    @rivaldodsilva2926 3 месяца назад +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 2 месяца назад

      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 2 месяца назад

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

  • @ashokpartel9488
    @ashokpartel9488 3 месяца назад

    ❤❤❤ from nepal

  • @akshay_chougule..
    @akshay_chougule.. 2 месяца назад

    Yes sir

  • @prajwalshaw9217
    @prajwalshaw9217 3 месяца назад

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

  • @tejasvaidya8464
    @tejasvaidya8464 2 месяца назад

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

  • @lookthisisaddy
    @lookthisisaddy 2 месяца назад

    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?

  • @felipegomez3047
    @felipegomez3047 2 месяца назад

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

  • @CHANCHAL-Baghel
    @CHANCHAL-Baghel 3 месяца назад +1

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

  • @DEBUGENTITY
    @DEBUGENTITY 3 месяца назад

    Bro make react projects using tailwind css too.

  • @sandeepsonu7330
    @sandeepsonu7330 3 месяца назад

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

  • @user-mu1yg3ne7c
    @user-mu1yg3ne7c 3 месяца назад +2

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

  • @ashmitbastola1388
    @ashmitbastola1388 3 месяца назад

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

  • @algodius
    @algodius 2 месяца назад

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

  • @Amith-fitness
    @Amith-fitness 2 месяца назад

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

  • @danielgathogo1892
    @danielgathogo1892 3 месяца назад

    please provide a video on how to deploy on vercel

  • @Rakibul-Islam-Sumon
    @Rakibul-Islam-Sumon 3 месяца назад

    Please start on React js tutorial

  • @Glorian692
    @Glorian692 3 месяца назад

    please make a couese on how to deploy

  • @yashjetwani9192
    @yashjetwani9192 Месяц назад

    How to decide which dependencies should be mentioned in useeffect?

  • @gamingriders904
    @gamingriders904 3 месяца назад +3

    Why you are not using css frameworks

  • @Vampire_robux69
    @Vampire_robux69 2 месяца назад

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

  • @saadustu7808
    @saadustu7808 2 месяца назад

    This is great but I wish it was in MERN stack

  • @ITRMohankumarP
    @ITRMohankumarP Месяц назад

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

  • @JOKERASHGAMING
    @JOKERASHGAMING 3 месяца назад +1

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

  • @user-ls3gq1qv8j
    @user-ls3gq1qv8j 29 дней назад

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

  • @channeltv424
    @channeltv424 2 месяца назад

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

  • @sejalkhamar5271
    @sejalkhamar5271 3 месяца назад

    Sir please make project with redux-tool kit

  • @miracleabutu8607
    @miracleabutu8607 3 дня назад

    great tutorial but my app refused to run and its showing typeError: cannot read properties of undefined (reading 'map') typeError: cannot read properties of undefined (reading 'snippet'). please help!

  • @PowerMusic697
    @PowerMusic697 3 месяца назад

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

  • @ankitbalmik5552
    @ankitbalmik5552 Месяц назад

    It is with backend also??

  • @PradeepWorld
    @PradeepWorld 20 дней назад

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

  • @drexk6569
    @drexk6569 2 месяца назад

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

  • @tahabilici7688
    @tahabilici7688 2 месяца назад

    You are my love 🥺

  • @kietvu2545
    @kietvu2545 Месяц назад

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

  • @whrlds
    @whrlds 3 месяца назад +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  3 месяца назад +1

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

  • @CreativeMinds100
    @CreativeMinds100 3 месяца назад +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 2 месяца назад

      same here

    • @karthikg7698
      @karthikg7698 2 месяца назад

      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}

  • @telescope3801
    @telescope3801 3 месяца назад

    😍😍😍

  • @dipjaydas3825
    @dipjaydas3825 5 дней назад

    does not getting the request parameter from youtube api v3

  • @waisyt2425
    @waisyt2425 2 месяца назад

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

  • @drexk6569
    @drexk6569 3 месяца назад

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

    • @aatifkhan03
      @aatifkhan03 16 дней назад

      Make a build folder first

  • @ujjawalpugalia2123
    @ujjawalpugalia2123 2 месяца назад +1

    Spotify full fledged clone

  • @theeewebdev
    @theeewebdev Месяц назад

    i got 400 err while opening the video catogory sir, so what can i do for that

  • @raoufbakhti7786
    @raoufbakhti7786 3 месяца назад

    can you do this using nextjs

  • @ravindratambatkar6476
    @ravindratambatkar6476 3 месяца назад

    Could I put this project in my resume

  • @akshayumredkar6093
    @akshayumredkar6093 2 месяца назад

    please use word wrap

  • @coders_roadmap
    @coders_roadmap 2 месяца назад

    Sir It will showing error like 400 which is bad request will you provide any solution for this ❤

  • @mdtarique2891
    @mdtarique2891 2 месяца назад

    2:39:29 comments are not being added I am not getting what's wrong, any suggestions?

  • @spartondon3591
    @spartondon3591 17 дней назад

    26:42

  • @kent_calvin
    @kent_calvin 3 месяца назад

    How to deploy a project online

  • @ILoveMask
    @ILoveMask 2 месяца назад

    Hi can you copy the video player too ? :)

  • @sabinghimire8662
    @sabinghimire8662 3 месяца назад

    we need instagram clone also in reactjs

  • @taranimalayala1895
    @taranimalayala1895 Месяц назад

    1:56:27 can please anyone help me that i am not finding the viewcount in api

  • @theeewebdev
    @theeewebdev 27 дней назад +1

    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 11 дней назад

      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!

  • @bineshmaharana1989
    @bineshmaharana1989 Месяц назад

    hello on my site youtube API not working what to do

  • @ncswithgaming625
    @ncswithgaming625 19 дней назад

    can someone provide me the code if someone has i am stuck and cant figure out

  • @codePracticeId
    @codePracticeId 3 месяца назад

    2:26 video title, views , comments, channel name has not changed

  • @anjalipal9911
    @anjalipal9911 2 месяца назад +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 2 месяца назад

      @@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 2 месяца назад

      Thanku

  • @ryanranjith672
    @ryanranjith672 Месяц назад

    can anyone know how to make work search bar?

  • @The_Developer_
    @The_Developer_ 3 месяца назад

    bring a deployment video for us

  • @gullaksingh6428
    @gullaksingh6428 Месяц назад

    15:37

  • @dharmikjain5288
    @dharmikjain5288 3 месяца назад

    How to host that mern stack project online free

  • @atangacheboh8634
    @atangacheboh8634 Месяц назад +1

    why is the video not playing after I put videoId ?

    • @taranimalayala1895
      @taranimalayala1895 Месяц назад

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

    • @atangacheboh8634
      @atangacheboh8634 Месяц назад

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

  • @user-kr1zr3fx8z
    @user-kr1zr3fx8z 3 месяца назад

    👍👍👍👍👍👍👍👍👍👍👍👍👍

  • @amarjeetghosh3561
    @amarjeetghosh3561 3 месяца назад

    Are you building a UI clone of RUclips or a Website clone of RUclips?

  • @subedi_js
    @subedi_js 2 месяца назад

    1:48:39

  • @vineetapugalia619
    @vineetapugalia619 2 месяца назад

    The live preview isnt working😢😢

  • @deepakgoyal1643
    @deepakgoyal1643 Месяц назад

    if anyone complete this project then pls provid source code

  • @omisrivastava2435
    @omisrivastava2435 3 месяца назад +1

    Why not the api is working??
    It is showing some 403 error

  • @CreativeMinds100
    @CreativeMinds100 3 месяца назад

    Not showing png images sidebar ...jsx please anyone help me

    • @GreatStackDev
      @GreatStackDev  3 месяца назад

      use the import statement
      import home from '../../assets/home.png'
      after that add img tag in return div

    • @CreativeMinds100
      @CreativeMinds100 3 месяца назад

      ​@@GreatStackDevi used this import statement but not working ..

    • @taranimalayala1895
      @taranimalayala1895 Месяц назад

      I think u should check u are folder structure.

  • @ajaychoudhary8955
    @ajaychoudhary8955 3 месяца назад

    TIMESTAMPS

  • @not_amanullah
    @not_amanullah 3 месяца назад

    Where is amazon other parts 😢

    • @GreatStackDev
      @GreatStackDev  3 месяца назад +1

      I will make that, if more people are interested and comment on amazon clone tutorial

    • @iskokomianbouwy3275
      @iskokomianbouwy3275 3 месяца назад

      ​@@GreatStackDevyes please we want the other parts

    • @AyeshaShahbaz013
      @AyeshaShahbaz013 3 месяца назад

      @@GreatStackDev yes absolutely

  • @ajput0018
    @ajput0018 Месяц назад

    React ka kuchh pda leta poora Din bass isme lga Diya 😢