Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5 | RapidAPI
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 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 TH-cam Clone App!
⭐RapidAPI Extension - marketplace.vi...
⭐RapidAPI TH-cam 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 TH-cam 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.
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 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
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?
My luckiest day when I discovered this channel.
Thanks Adrian. Love from India
Greetings to India!
And here comes my most favourite line after completing my project, "Hi, there and welcome to a project video".🔥🔥🔥🔥
Mine too!
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
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
no words to express how amazing this work is.
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
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
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
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! :)
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.
I've been waiting a long time for this video, Building App using Material ui ♥️
It's finally here!
TBH, IDK why this channel has not got 10m subscribers. Thanks a million time.
Thank you!
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
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 👆
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
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
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.
Best programming TH-cam channel to exist right now
Thank you soo much!
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
@@abhishekbhure-e1e 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?
Just bought FilmPire. I'm excited for what I will be learning. Thanks
Enjoy! 😊
"Wow, this TH-cam 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 TH-cam clone project. Keep up the great work! 👏✨
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
Your talk(codding)boom boom...no better youtuber than u that i currently find on TH-cam 🔥🔥
Thank you! 🔥
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?
This is the best youtube channel on js . I dont know why this is underrated
I love you JavaScript Mastery ❤️❤️
❤️❤️
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!
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
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!
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.
Best youtube channel better than many paid courses.. Keep growing.. God Bless you...
Just for your teaching qualities
I have purchased js mastery pro 😁
You are just awesome 🤩
Thank you so much, I appreciate it!
Why there is no Footer in your Application Adrian.Please Answer !!.You are awesome bro to build new fledged,modern ui/ux design & responsive website.Keep up a Good Work to inspire many developer like me !!Thank you to upgrade my skills in React,NextJS & TypeScript.I am following your video regular since last 1 year!!
Thank you so much!
You voice is perfect ✅💙💙 i love that
💙💙
Thanks a lot Adrian! You're teaching me a lot more than Uni did
I love your content! Thanks for sharing your knowledge with the world!!
Glad you enjoy it!
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)
Aaaah the new project from this magnificent channel!!!🤩🤩🤩😱😱😱
Glad you like it! :)
Thank you so much, Sir. Again a perfect project for learning MUI 5.
Thank you! 😊
Thank you JS Mastery for such beautiful content here on TH-cam for free , appreciate it.
Waiting for project focused on back-end, secured routes and Smart database management.
Absolutely loved your content. Can you please make a complete MERN stack project on Automated College Placement System?
Cool idea!
wow, my weekend is going to be excited!!
Good luck!!
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.
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.
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!
I don't understand how and why you are writing 'videos?part=snippet,statistics' and 'search?part=snippet&relatedToVideoId=' ?????
I'd love to commend you for dropping such informative and educative content for free here on TH-cam, 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!
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
When i see a new video on channel, i say yeeeeeees that's awesome 😍
Thank you! 😊
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?
what ever I think of is already uploaded on your channel.
thank you so much dude.
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.
This is a great tutorial. Since I found your channel, your videos is my number one go to.
Let's get to 20k likes guys
This man is unstoppable 💯🔥 Love you JSM ❤️
Thank you!
@@javascriptmastery brother, what is SX SX meaning. And videos not change in categories
API is not working
Your always lunch premium course 🔥🔥
Even though I don't understand, but I really enjoy every second of the minutes of the lessons given
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. 👍🙌
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 🤣
a good way for watching youtube videos without ads
Alot of people here find it difficult to setup the .env file in Reactjs
Can u work on a tutorial based on how to setup a .env file on Reactjs because it doesn't just work based on this particular even it worked on your own...
Highly appreciate it...
Thank you been following you for ages now
Correct. I'm also having hard time making it 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 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..
this Guy really explain, maximum respect man
Thank you!
The first 10 seconds is literally almost exactly how my TH-cam looks
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.
The way you teach is amazing, loved it💓,...concepts as well as best practices
watching later liking it now so the content upload and motivation for adrian continues.
I appreciate that
you are a very good teacher in the wold 😍😍
The legend the myth is back already liked video before Playing it ❤️
Thank you!
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!
and today I did my first full production build project. Thanks alot❤❤
Hey is the api working??
Ur content is mindbliwing i wish ur the most subs youtuber in the world
Thank you so much! :)
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
Hey brother I'm one of your biggest fan ❤️ I have a suggestion can you please make a project video without material ui ??It's okay if the project is small. Many of your viewers get confused because of the material ui but still ur videos are so fine
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 :)
I really like your channel. If you could make a series on responsive design using Material UI or antd, that would be great.
No words for this Video, just 🙏🙏🙏🙏 Thank you, it helps so much
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 TH-cam clone looks great. I learned so much. ❤
Wow...such is Amazing.... Never dreamt of this amazing project....
All thanks to Javascript Mastries...
I have always wanted to make a request...
Is there a way out to help us with a student portal or School management system?
I'll see what I can do. Thank you :)
@@javascriptmastery Thanks dear. Can't wait to see it in action
I know what Ill be doing this weekend, thanks Adrian u da man!!!
Thank you!
Oo my favorite chanel posted a new video!
I'm glad to hear that! :)
I love your content and teaching style, JSM. Thank you!
This is awesome! I was looking for something like this for ages.
Cara, você é incrível!!!!! 😱
Sou brasileiro e virei seu fã!!!! 👏👏👏👏👏👏👏😎
This is the best video on TH-cam 👑👑👑
Thank you!
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
Wanting to start learning API's and this tutorial came in. Thanks a lot 🙏
Thanks for the Valuable Content you post.
Always welcome
Cool project, gonna do this next after the gym app
Excellent video!!! Could you do one on Ionic React? Specifically, taking an existing React project and converting it to an Ionic React and making it truly multi platform (web, ios, android, desktop).