Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5 | RapidAPI
HTML-код
- Опубликовано: 5 сен 2024
- Master modern web development by building a responsive React JS application consisting of stunning video sections, custom categories, channel pages, and, most importantly, you can play videos straight from your RUclips Clone App!
⭐RapidAPI Extension - marketplace.vi...
⭐RapidAPI RUclips v3 - rapidapi.com/y...
⭐RapidAPI - rapidapi.com/?...
📙 Get the ultimate free resources, guides, and eBooks: www.jsmastery....
Showcase your dev skills with practical experience and land the coding career of your dreams:
💻 JS Mastery Pro - jsmastery.pro/...
✅ A unique RUclips discount code is automatically applied!
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adr...
GitHub Gist Code Snippets: gist.github.co...
Hosting - hostinger.com/j...
React.js, Material UI, and just a couple of other dependencies, you'll build everything else from scratch!
In this course, you'll learn:
- React functional components and their reusability
- React file and folder structure
- You'll achieve mastery using Material UI (version 5)
- Perfectly placed media queries for satisfactory responsiveness on all devices
- And most importantly, fetching data from unlimited sources using RapidAPI.
💻 Join JSM on Discord - / discord
🐦 Follow JSM on Twitter - / jsmasterypro
🖼️ Follow JSM Instagram - / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
👇 Time Stamps
00:14:55 - Layout
00:24:25 - Navbar
00:36:06 - Feed & Sidebar
00:50:02 - API Data fetching
01:04:00 - Videos
01:31:07 - Profile page
01:51:30 - Search
01:57:29 - Video Details
02:17:30 - Deployment
Thanks Adrian for the awesome video! 🙏
👇 Time Stamps
00:14:55 - Layout
00:24:25 - Navbar
00:36:06 - Feed & Sidebar
00:50:02 - API Data fetching
01:04:00 - Videos
01:31:07 - Profile page
01:51:30 - Search
01:57:29 - Video Details
02:17:30 - Deployment
This is the best place to learn to make React apps, master JS, learn React and what not. Crazy channel, crazy content, and absolutely mad respect to the instructor.
I discovered this channel 4 months ago and am amazed at the content quality. fine-made video. Thank you so much for this amazing project video, I learned so much.
Thank you so much! Glad you like it :)
Hey can u help me
I am facing some code issues
@@aseem4007 SURE 👍👍
@@SatyamWakchaure send ur no
My luckiest day when I discovered this channel.
Thanks Adrian. Love from India
Greetings to India!
Hey Adrian, I just wanted to thank you from the bottom of my heart for creating videos like this one, you are one of the people who helped me to get my first programming job and I feel the need to express grattitude to everyone who helped me along the way :) this includes Academind, Fireship, Traversy Media, Lama Dev, kudvenkat, Laith Academy, Jack Herrington, The Net Ninja, Web Dev Simplified, Bro Code, freecodecamp, IAmTimCorey, Theo - ping gg, Mosh, Ben Awad, Tech with Tim to name a few, I am very grateful for you guys!
HVALA TI PUNO!
ur full stack dev?
I like the pacing of these videos. Already followed like 3 or 4 projects. I put the MERN project in my resume. And use the same project structure to do the interview assessment test and got an offer. Don't know why I felt like telling this but keep them videos coming.
Hey, can I get a little help how did you get an offer & what was your approach in short?
@@tauhid8k I would love to hear that too!
@@tauhid8k I was an angular developer but it is hard to find angular jobs so I needed to learn react. I learn react by following vids like these. And added a mern stack app into my cv so that I qualify as a react dev. The rest is about finding opening positions and sending resume to their hr email everyday.
@@ZawCodes Okay that's how it is. Thank you. XD
Hey man. Great story. How many of these videos did you use btw? Also do you mind sharing your resume?
And here comes my most favourite line after completing my project, "Hi, there and welcome to a project video".🔥🔥🔥🔥
Mine too!
Is there any clone left on Earth, because Adrian is definitely gonna build an awesome web application out of it?
Haha, good one! :D
@@javascriptmastery movie booking app
Yes javascript mastery's own website is still left to clone. 🤣🤣🤣
@@gambomaster yeah bro😁
@@javascriptmastery
please Make a Clone of JavaScript Mastery Website🥺....
It Really Looks Awesome...
I love this due to the fact that it is a neat Material UI Project(because I do not like boring Material UI projects) . Thank you JSM, Guys let's pump his subscribers up to 1 million and more. Let's go.
Edit:
Thanks guys for the likes
Thank you so much!
@@javascriptmastery Yes Sir
Thank you so much Adrian.. Today I got land in my first tech job.. Just because of you and your excellent projects. Thank you so much
Finished this up today! Had a couple of random errors here or there, but otherwise it went pretty well. Definitely got some good practice in, this is my first time working with material ui, and there were some styling syntax that I was unfamiliar with. Need to look more into it, but otherwise, think it went well. Will need to check some other tuts and see what else I can learn from the channel!
Hi. At 57:30, Is this itinerary operator? Where does search, part, snippet and q come from?
@@minthantoo3509 it came from param in api dynamically
@@minthantoo3509 API Query Parameters
Heyy can you please tell if you got error 429 ?? What to do?
wait another day too many requests@@curious9208
I love your content. Can you please make a complete MERN stack project once? Looking forward to it with login handling authentication and authorization is something many people fail to understand correctly. Being able to see it in the form of a project will definitely help. Love from India
Yes, coming soon!
@@mohithguptakorangi1766 it's outdated so many errors but still we can do it by searching in Google but a new tutorial will be better
Using REDUX please!!!
@@javascriptmastery using Redux please!
Using redux toolkit. Appreciate
For the second time i was building this project and so glad to complete it also deploy it. thank you for this video i had learn how to send request on rapid api, how to use rapid api and how to fetch data
no words to express how amazing this work is.
TBH, IDK why this channel has not got 10m subscribers. Thanks a million time.
Thank you!
Ohhh It's here! This is AWESOME and Im hyped! I'll start coding right away. Thank you so much Adrain!!
Glad you like it! :)
Best programming RUclips channel to exist right now
Thank you soo much!
I love this detailed tutorial for react and mui and rapid api but the only issue i have with this is you don't go step by step in terms of the from 'scratch' aspect, meaning that the dependency selection and grunt work process/thought process is what would additionally be extremely helpful.
agreed, just by going to material ui website and copying the given npm package gives you the dependencies necassary. Also by just opening the youtube-clone folder in "open folder" already gives you the index dependecies
Helpline📲
Your Questions can come in.
Bro this is free 😃 learn and understand the things
Your talk(codding)boom boom...no better youtuber than u that i currently find on RUclips 🔥🔥
Thank you! 🔥
This is the best youtube channel on js . I dont know why this is underrated
The website itself looks fabulous, on top of that I love how everything is explained so well including the requirements, what we would learn from this and heaps of other things! Great video overall.
have you completed the project?
did you ran into any problems like API couldn't able to fetch data? kindly let me know
@@user-bq8fz5zp3n Nope, I was stuck on some part so I left it for later since I realised I needed more experience with Reactjs before finishing the project.
@@tahawahiddaw6259 Apologies for late response, yes I got the same issue as well and have left the project for later.
Do we have to pay for api or something?
Great video, for those who have an error in the Feed, Fetch Api brings with it the playlist in addition to the videos, it is necessary to filter the playlist and leave only the channel and video.
👆🔝 For help questions can come in 👆
I like the descriptive nature of this react. Anyone that watches this will be so impressed they will pause, like, suscribe and learn. Then letter learn and configure their own. This is the best 👌 I have seen. Thank you very much.
Thank you so much Donald!
"Wow, this RUclips clone tutorial video is top-notch! 🙌🎥 It's a fantastic guide that breaks down the process step by step, making it so much easier to understand and follow along. Kudos to you for creating such an informative and well-explained tutorial! I'm feeling inspired and motivated to dive into my own RUclips clone project. Keep up the great work! 👏✨
Just bought FilmPire. I'm excited for what I will be learning. Thanks
Enjoy! 😊
I've been waiting a long time for this video, Building App using Material ui ♥️
It's finally here!
Thank you JS Mastery for such beautiful content here on RUclips for free , appreciate it.
Waiting for project focused on back-end, secured routes and Smart database management.
I love you JavaScript Mastery ❤️❤️
❤️❤️
Please make a video on how to look through a huge codebase if we want to contribute to opensource and also on how to debug a project.
Thanks, you are doing a great work!
Great suggestion!
@@javascriptmastery We're waiting this video. Have you done it?
For anyone who is having extra space after the channel card and between video cards, its due to the playlists. Console log (videos) and check for the search results, you'll see channels are also present. Create a similar component for Playlists like the Video and Channel card.
So much informations to acquire, you are great and different in a good way,keep up the good work 👍
I just wanted to give a small feedback though:
I think it would have been so helpful to understand the different APIs used if you took us in a detailed journey into each and every api and explain it's params
I would also like to ask you if possible, to dedicate a tutorial on all about APIs
Thanks.
No need to Thank you! Purely Stunning Project! Everything was made Perfect!
Whew never thought there will be a tutorial like this on yt!
And ofc if it is it would be on this channel 4 sure!
Keep going with the great work
Thanks! Will do!
I am only five minutes through the video, and I already it's gonna be awesome!!!!......Thank you so much JSM, you are the best!
Thank you so much, Sir. Again a perfect project for learning MUI 5.
Thank you! 😊
This channel is literally my one stop for everything JavaScript 🙂.
I've really learnt a lot, without having to pay a dime for a udemy course 😒.
That's why I subscribed 😊
Keep up the good work. 👍🙌
For anyone stuck at videoId/channelId where the videos.map takes place, the structure of the array returned by the API has changed - it used to be item.id.videoId but now it is 0.item.id.videoId so you need to map video[0] (video[0].map(...) instead of video.map(...)). Hope this helps!
appreciated
This helps mate , cheers
can i see your code? i still get error
I am getting axios error
@@KazeChannelKC
I am getting axios error
Best youtube channel better than many paid courses.. Keep growing.. God Bless you...
Hi all. I have been following this tutorial and I added the dependencies. However, I was getting the following error (Error: Can't resolve 'react-router-dom'). This is because I needed to do npm install to update the tree. This was missed in the tutorial. If anyone does face this issue, please remember that if you update the package.json you will need to add the following command in the terminal. Great tutorial by the way. Am new to react and finding this really useful. Thanks
which command? can you please write?
@@ahmetkocak9086 if you change any of the dependencies you need to write “npm install” in your terminal (ensuring you are in the correct directory). This will update the dependencies and the error message will not appear. Hope this makes sense. HNY!
Have you had any problems with Cors? Because I get an error that Core is blocking my request. And I can't fix it
Anyone getting "403 strict-cross-origin-when-cross-origin" just leave the x-rapidapi-key in the fetchFromAPI file, don't put it in the .env file
Even though I don't understand, but I really enjoy every second of the minutes of the lessons given
You voice is perfect ✅💙💙 i love that
💙💙
Just for your teaching qualities
I have purchased js mastery pro 😁
You are just awesome 🤩
Thank you so much, I appreciate it!
Thanks a lot Adrian! You're teaching me a lot more than Uni did
Amazing video- really digging the app.
If anyone is currently having an axios error within browser console with a 403 status, it may be your axios version (00.27.1 being the version in question) I resolved this by changing the version number to "axios": "^0.26.2" in my package.json. Hopefully this will help.
Thank you so much for this!. I should just change the version then restart the application, yes?
@@ifeanyiorji3343 Save the new package.json with the correct version and you should be set. You may have to ctrl + c out in terminal and reinitiate an "npm start" but it worked immediately for me.
@@barton5787 Thank you so much!
yoo Thank you :>
Bro this solution is to fetch the video s in console i didn't get the data it shows array(0) for me in console
I just finished watching the video and finished making this app thanks to you 😃
Great 👍
Ahahaha that's impossible. He just did the upload 20min ago and you already watched and replicated the project ? Ahahaha
hahaha you got me there but im half way done
@@erickdamian9157 🤣
Tip: Si estas trabajando con typescript les recomendaria que en la parte del Sidebar cuando implementamos los iconos, en vez de que en el array pongan [ { name: name-icon , icon: }, etc...], mejor quitenle el tipado de componente de react (los "< />") y cuando lo vayan a usar en categoires.map, utilicen
Translation: "If you are working with typescript I would recommend that in the Sidebar part when we implement the icons, instead of putting [ { name: name-icon , icon: }, etc...] in the array, better remove it the component type of react (the "< />") and when you are going to use it in categories.map, use "
The above also applies if you are using Vite. Thanks, @fichamann1527, saved me a lot of headache
algun tip para no tener que pagar para usar las api? 🤣
@@facundodominguez1063 no queri nahh oeee xd
@@fichamann1527 jajsjsjd empecé re entusiasmado y cuando me di cuenta que tenía que pagar para usar la api dropee todo 🤣🤣
a? que yo recuerde, solo te creas una cuenta y enlazas el token de acceso para poder hacer peticiones a la api, pero es limitado onda, no mas de 100 peticiones por dia.
watching later liking it now so the content upload and motivation for adrian continues.
I appreciate that
I love your content! Thanks for sharing your knowledge with the world!!
Glad you enjoy it!
I'd love to commend you for dropping such informative and educative content for free here on RUclips, thank you so much, I really gained a lot from this tutorial though this is the very first tutorial of yours I'll be watching and it's really helpful but the only criticism I'll give this particular video is you were not as explicit as possible there are a lot of things you didn't explain explicitly. Personally, I will not recommend this tutorial to a beginner cause it's not that explanatory in the slightest(I'm talking subjectively now), you did a lot of things I personally did not know and you didn't explain what it does or why you did such thing
but nonetheless, it is an awesome content
Agreed, anyways you can use ai to explain what he did you didn't understand!
overall that was a really infromative and well structured project tutorial!
Absolutely loved your content. Can you please make a complete MERN stack project on Automated College Placement System?
Cool idea!
I learned Ant Design from one of your projects and I'm addicted to it, its the best library and very easy to use, with a lot flexibility
It would be much convenient if you make short playlists on every section rather than a whole 2 hrs video. It would help us to learn as an online course system such as Udemy. Btw YOU ARE AWESOME ❤❤🎉
lol. If you have short attention lifespan, then do something about it. but this is an educational video, so even 9 hours straight video is welcome.
This is a great tutorial. Since I found your channel, your videos is my number one go to.
You are the cleanest teacher I ever known , the voice, the video, the order, I really enjoy and learn with your videos, what a great channel.
In case other people face similar issues/warnings/questions (note: I am developing in Webstorm and I used Typescript):
- from what I saw "exact" is no longer allowed in a Route. So """ is correct. "" will not work
- in order for React to pickup your .env variables, you must prefix them with REACT_APP. Otherwise, you cannot access them with process.env
- The shorthand versions like "category.name === selectedCategory && "#COLOR"" will not work and I would argue that it is very questionable code. The result seems to be "false (boolean?)" if the first check fails which is then weird to assign it as background color. Therefore, I suggest to use the ternary operator to make it clearer and correctly return a string. Like: "category.name === selectedCategory ? "#COLOR" : undefined
- I am not sure why the author changes between async/await and then when working with Promises. He did not explain it. Anyway, if you want to also use async/await in your useEffect to be consistent, you can also do that e.g. via the IIFE format:
useEffect(() => {
(async () => {
const data = await fetchYtAPI(`search?part=snippet&q=${selectedCategory}`)
setVideos(data.items)
})()
}, [selectedCategory])
- CardMedia does not have an "alt" property it seems. Just remove it
Besides those small things, it is really a great video! Thank you :)
this help me alots tks
my ideal my teacher i am always waiting for your videos and my most favourite line "Hi, there and welcome to a project video"..... love you adrian😍😍
Hi! Can you please tell me where he copied the 'index.css' file from? I just started its at 13:55
Awesome job, Adrian. However I had a problem consuming the APIs. I'm quite new to this so i don't know what's wrong but i keep getting "localhost/:1 Uncaught (in promise) AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}" in my console. Can you please help out?
me too I have the same Error
any one find the solution
@@maimohammed817 i have tried many ways since 3 days ago to solve this problem
i need this 😒😒😒😒😒😒😒😒😒😒
I think the problem here is the constant js?..
@@amirsade5110 I discover that my problem is 'I forgot to make a subscribe in rapid api '
I m stuck at this problem also , I have literally check code many time and there is no error from there and I even created a rapid API key from difference account but it still doesn.t work.
Thankyou so much for this Adrian!! You are a saviour.❣️❣️ You provide all these amazing content, and that too, for free.! You are an angel!!
Thank you!
I don't understand how and why you are writing 'videos?part=snippet,statistics' and 'search?part=snippet&relatedToVideoId=' ?????
a good way for watching youtube videos without ads
Hey! Great content! I am facing an issue "Uncaught (in promise) AxiosError" 403 status error in receiving array of videos at 1:02:57 in your tutorial video
Try checking whether your API keys are coming through
@@javascriptmastery Yes, I just checked
Hi there, did you fix this issue? i am stucking with this right now....
nevermind i figured it out
@@shanli6502 How?
Aaaah the new project from this magnificent channel!!!🤩🤩🤩😱😱😱
Glad you like it! :)
Around 1:02:47, I get error code 404, even though I'm positive I typed in the right key. Tried both environment variable and typing directly. Any suggestions?
Hi. At 57:30, Is this itinerary operator? Where does search, part, snippet and q come from?
I have that same 403 problem, have you solve it?
@@KazeChannelKC Just remove optional chaining (?.) for thumbnail, banner, etc.
what ever I think of is already uploaded on your channel.
thank you so much dude.
If you get the problem about 403, like AxiosError, I deanl with it by click the button of a at the website API Documentation
i subsctibe but error still there 403 bad request
Thank you very much
API is not working
i just completed and deployed my project... thank you for the tutorial.
Hello i just learned reactjs i am looking to make projects can you please tell is it okay as a beginner to make this project. Also what was your approach to completing this tut and how much time it took you. I want to make at least 3-4 projects. I am getting confused which projects to make that i ashow in my portfolio. Thankyou
@@kartavyasharma6272 i believe it is a good project for a beginner and took steps as per. the video only when through material ui doc also, each things or logic that is used here is well explained.
Thankyou😃
@@Lanterns09 yess..
Let's get to 20k likes guys
I have been patiently been waiting for another React Native project, I build the first React Native project on this channel completely 🙌🏾💯🖤
Please do more React Native project
Might do some in the future :)
When i see a new video on channel, i say yeeeeeees that's awesome 😍
Thank you! 😊
Thanks for the fantastic video. You are a very good teach and explainer. I had a couple of errors here and there but figured it out. The RUclips clone looks great. I learned so much. ❤
wow, my weekend is going to be excited!!
Good luck!!
this Guy really explain, maximum respect man
Thank you!
you are a very good teacher in the wold 😍😍
and today I did my first full production build project. Thanks alot❤❤
Hey is the api working??
This man is unstoppable 💯🔥 Love you JSM ❤️
Thank you!
@@javascriptmastery brother, what is SX SX meaning. And videos not change in categories
woah, I'm watching this tutorial a year after it was released and the JSM channel went from 379,000 to 723,000 subscribers. That tells you something
Thanks!
Your always lunch premium course 🔥🔥
Amazing projects only JSM 👏👏
Thank you!
I really like your channel. If you could make a series on responsive design using Material UI or antd, that would be great.
Another amazing project JS mastery!! I am excited to join your course and create an AI netflix application. Thanks again
Great video ❤️, next a Google classroom clone and attendance system
I know what Ill be doing this weekend, thanks Adrian u da man!!!
Thank you!
The way you teach is amazing, loved it💓,...concepts as well as best practices
The legend the myth is back already liked video before Playing it ❤️
Thank you!
love u...now we want to learn whatsapp or messenger clone with react native
I love this project..Please create another project using Ant design
hello...did you get any CORS error?? if yes, how did you solve it??
Ur content is mindbliwing i wish ur the most subs youtuber in the world
Thank you so much! :)
No words for this Video, just 🙏🙏🙏🙏 Thank you, it helps so much
Wanting to start learning API's and this tutorial came in. Thanks a lot 🙏
I love your content and teaching style, JSM. Thank you!
tamaño de video, como se ajusta a diferentes dispositivos: 2:17:00
27:00 logos del sidebar
53:30 donde meter API Key
1:01:00 hacer que los botones pongan la mejor parte
1:50:50 search API
1:15:50 quitar el box gris con titulos del video
2:03:06 esto es lo que quieres(que no pngan mas damier)
2:10:35 esto quitalo todo
(simplemente quita el import de las .jsx del index.js final. no te las cargues completas porque todo va ligado con funciones)
You should get verified twice.I am learning react and this truly resourceful.
Thank you!
The first 10 seconds is literally almost exactly how my RUclips looks
Cool project, gonna do this next after the gym app
Oo my favorite chanel posted a new video!
I'm glad to hear that! :)
Thank you for this Adrian, works very elegantly, i had issues with assigning all of the api keys but i managed to work it out perfectly, Thank You and God Bless you my Good Man🙏🙏🙏
can you tell me how you fixed that . I am not able to access the data from api
I finished this project today. Thank you for your great tutorial. I helped me a lot. ♥️
is the api still fee?
@@AkashDas-qg4lb yes
Absolutely stunning tutorial . Learnt a lot from this also will learn alot ..soo much to learn from this video which is what all are craving for . Thank you ..❤