🔥 Build NETFLIX With React JS - Tailwind CSS - FIREBASE - Front-End Web Developer Project
Вставка
- Опубліковано 8 лип 2024
- Build a project in React JS that will get you a job as a front-end web developer. I want to give you an example of a project idea you can list on your portfolio if you are trying to get hired as a Jr. front-end web developer.
In this project follow along with me as I build a front-end Netflix clone with a Firebase back-end! We use the TMDB API for all of the data AND we will be using Firebase Authentication to give login functionality. We will be able to store user specific data with a React front-end and a Firebase back-end. We use Firestore which is cloud storage with Firebase to save data. The front-end is styled with Tailwind CSS - an incredible CSS framework to save time styling your apps. At the end of the build we deploy this LIVE with Firebase hosting. Thank you for watching!
Time Stamps
0:00 - Intro
02:15 - Create react app
03:08 - Install Tailwind CSS
04:05 - Install project dependencies
07:40 - Navbar component
14:15 - React router dom
15:20 - Home component
15:40 - Main component
16:30 - TMDB API key
17:30 - API Request end points
36:15 - Row component
51:16 - Movie Component
54:18 - Scroll functionality
01:01:55 - Firebase setup
01:08:21 - Authentication
01:48:10 - Firestore database (save user data)
02:16:46 - Hosting & Deploy 🚀🚀🚀
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
Github Repo 💻
github.com/fireclint/netflix-...
🔥 Connect with me on IG🔥
/ fireclint
TMDB API
www.themoviedb.org/documentat...
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
Google-Auth With Firebase
• Google Authentication ...
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj - Наука та технологія
Looks like I cut off part of the screen when we were doing out hosting 🤦🤦 Here are the commands to run:
-npm i -g firebase-tools
Firebase login
-Firebase init
-Select - hosting -configure
-existing-build
-Set to build folder (important)
-yarn run build
Firebase deploy
LIKE + SUB => Great Work TOP G
Friend, can you make a Firebase project with lots of different filters, like e-commerce sites have, I'm not able to find such tutorials on UA-cam.
I'm getting this Welcome Screen Message 'Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!, i followed all these steps, how to overcome this Please?
How can I fetch the director of the movie? seems to be no "director" objects in neither of these requests strings...
@@elmihaad6120 I too am getting this . Have you solved it ?
I can't stop doing your projects, helps me a lot to understand while coding and actually have something to see and to show, I'm really amazed about how great teacher and guide you are. Keep that kind of awesome content. Thanks a lot!
Thanks again Leandro! Much appreciated. I’m just happy to help someone out.
@@codecommerce You actually are helping me a lot. And thanks to you for your job!
This is an awesome video! I've been looking for code-along projects, not so much tutorials but more for practicing build projects to gain more experience. This hits the sweetspot perfectly. Thanks so much!
Thank you! I just want to share the things I work on and hopefully it helps others.
Amazing! The best part about this tutorial is that you are not assuming we know everything; a lot of instructors do that! 💯
Thank you Hassan, that’s how I always felt too!
Thank you so much!! I'am from Brazil and I'm learning a lot from your videos as I pursue my first job as a web jr.
Finally Completed the project of Netflix-clone app
Thank you so much
Bro, you are awesome. I'm getting the same vibe as from a personal trainer in a gym. :) I love going through your tutorials. Keep 'em coming.
The only thing I'd appreciate would be to make tags on the timeline for different sections in the video in case I'd need to come back to some of it and wouldn't have to scrub through the whole thing to find it. Otherwise it's perfection.
Thanks dude!! I’ll have to look and see how to do that - I am new to this! Haha I use to be a trainer :)
Absolutely way better than any Netflix Clone Videos I've watched earlier! Keep the tutorials coming and thanks!
Thank you Dee!! You’re awesome!
@@codecommerce No no Thank you for this!
Hi Clint! Thank you so much for this fantastic, amazing video! I added already to my portfolio.
I really appreciate this content, 10/10.
Cheers mate!
This is so good, I've watched so many tutorials but this one is the best!!
Literally, I can easily understand his explanation and the explanation is very detailed!
Thank you my friend?
This tutorial is nothing short of awesome. I really appreciate how well you communicate and teach. It was super easy to follow along and I learned a lot! I can't wait to check out your other content. Keep them coming!
You're very welcome!
This is such a great video and project. You really explained concepts in a clear and understandable manner. You are really a great tutor. Am rating this 100/100. I have truly learnt valid things here
Thank you so much!
Awesome project Clint Sir🔥😍
Please come with awesome projects like this
🔥🔥
i always follow your projects gets better every day !
Thanks man!
I'm 14, and the way that you explained it through out was just amazing ! Thanks a lot
Thanks!
Just Amazing .. a 100% underrated channel that deserves way more subscribers, just keep it on.
Thank you Mostafa
Thanks a lot, buddy! Great tutorial! I've learned a lot doing it! Great stuff!!!!!
For the people who have the account page black when you just create the account, I've found that you must to Sign up, log out, and then login in order to the account creation actually impacts in firebase cloud and you can save your shows and get display at your account. (At least I'm having this issue, and solved like that). Amazing video, and very helpful experience! I'm waiting for more of your content sensei!
Thank you Leandro!
Thank you very much😭😭
My very own first react project is live
I’m so happy😁
That’s awesome! 🙌
Just finished the tutorial. I have been coding for around 15 weeks now trying to build out my portfolio and learn more along the way.
This tutorial was incredibly easy to follow, well made and structured. I learned many new things about react, tailwind CSS and firebase. The result is an incredibly sleek and well functioning react app that is now part of my portfolio - considerably better than my previous projects in quality.
I highly recommend this tutorial for anyone looking for portfolio projects, looking to improve React skills or just looking to try something new!
Thank you Code Commerce, really appreciate it.
Thank you Linden- that’s incredible!
merci beaucoup bro, pour ce moment d'apprentissage
You are a good presenter, teaching with very good understanding . Also explaining those shortcut and snippets wherever used, which other presenters feels lazy for telling😂
Thank you! That always frustrated me when I saw people do that and didn’t explain.
One of the best react tutorial i've seen. Thank you sir for sharing.
Wow, thanks!
Dominic Toretto teaching me to build a netflix clone😃😃
by clicking video are they woking (play)?????
Thank you so much 🎉
Can't believe this was free
Excellent tutorial. I learned so much from it. You are a great teacher. I loved how explained the finer nuances in detail. Those fine points really mean a lot to me.
Thank you!!
You explained very nicely. Thank you so much 🙏.
Perfect master, keep it going. You're making life easy, big dude.
Thank you dude!
You rock man. Love it thanks and very good job 👏🏻
Thanks dude!
Thanks for this video. I decided to try it on my own first without watching this video. Which lead me to peek at it whenever i got stuck( plenty of times over 2 weeks). I also did it with Nextjs which lead to it be a lil more complicated, But i felt like i learn more rather then just copying everything
That’s the key right there man! That’s awesome dude. Next js is slightly more complicated just dealing with the image component but that’s how we learn!
Very helpful videos... i like the flow of the course and how you build them step by step... Love the Tailwind CSS flow and Styles .... this is very Awesome ...... Thank you Briley !!!!
Awesome Project and very well explained, built and deployed. Thank you so much for this amazing tutorial.❤
bro can you please help me to find the apis becuase i checked the way he taught in tutorials but cant find the api
still watching it, but I have to thank you already lol I've learned way more w this video than taking a course at coursera... great content !
I will definitely build and add this to my portfolio.
Amazing tutorial! just WOW
Great video! Thank you, man!
Thank you Ali!
Great tutorial! Feedback: React part was great and understandable, Firebase part was a little bit fast and hard to follow, Would be better if you could explain the code while you write it or drop a firebase video! Great video!!
its amazing tuff work thanks alot!
Hey dude ... That's exactly what I was looking for ... I really enjoyed this tutorial n Yuh explained each n everything so nicely ... Stay blessed ...❤❤❤
Thank you dude! 🙏
it is very amazing..Thank Youu!!!!!!
I love your tutorials they are beginner friendly tutorials. Thanks for the Educative Tutorials, God Bless you
much love!
So coooool, glad to know this channel. You got a new subscriber
Thanks man!
amazing man, thank you so much😍🥰
My pleasure!
Thanks for the awesome vid!
Thank you man!
Nice tutorial!! Enjoying this video a lot!...
Thank you sir!
Thanks Bro❣ , The Way You Explained the Each Portion is Very Cool. Keep it up.. 💖
Such projects really help. Seems like a full-stack build for me. Thanks.
Thanks my friend!
bro in the section Horror there are many photos not showing ? any help
Thanks Clint !
Any time!
This is amazing. I have subscribed.
Thank you dude!
Thanks man Nice tutorial 😍
Thank you sir!
Thanks a lot for such amazing content!!
Thank you!
Great job mate 👍
Thank you Christian!
thanks man... subscribed!
Awesome dude thank you!
You're really great to teach junior. I am really helpful with your content. Thanks a lot dude. Awesome.
Thanks Andi! I don’t consider myself a teacher- just sharing my projects :):)
@@codecommerce thank you for reply my comment.
Thank you, I will develop a Netflix clone on my own but I am stuck when I refresh everything will go, and this Build solve that issue.
Great projects ! Keep going
Thank you Tiago!
Learnt a lot! Thankssss 😎🤝
Thank you June!
You are the best sir💥
This is super duper amazing ❤️
Thanks bro!!!
I am in : i will rate it after the accomplishement:
Man I'm in love with you and tailwind :D
Tailwind is so awesome!
Thanks for this amazing project sir!
Thank you Shravan
Whoa thanks a lot bro!
Thank you!
you project is very helpful , easy to understand and good usecase
Much appreciated!
Super Awesome!!! TQVM!!
Awesome!!
you are the best sir
Your videos are awesome man keep it up! My only suggestion is to remove the background music during the tutorial, it just muddies up your voiceover more than anything.
Other than that, excellent work ~ keep grinding!
Thank you Jeremiah - I wanted to test it out. I’m glad you gave that feedback.
@@codecommerce I like the music, it makes me full focus
@@aligunlu6523 it is like salt , it is better not to add so later people who likes it with music can add a background music of their choice , people who dont like it dont, it is better without
Learning from this channel will get me a job I know it
Thank you so much!
Thank you so much
Hey man, thanks for the video. at around 1:00:00, you could have easily used useRef() instead of using vanilla js and you wouldnt have needed to pass unique ids to each row.
for example: const slider = useRef();
add ref={slider} instead of id="slider" to the parent div.
const slideLeft = () => {
slider.current.scrollLeft = slider.current.scrollLeft - 500;
};
Have a good day
Thank you Chris- learning something every day!
keep going, bro
My brother, continue to provide this content and this type of video, especially Tailwind CSS. Thanks to your videos, I was able to learn many things as a front-end developer and now I work in a company as a front-end engineer. keep going brooo😍❤️ Thanks so much!
Wow! thats great to hear, i am a front End dev too, can i have your number pls?
WhatsApp no.
Thanks my dude!!
you are my new mentor , i like it
Thank you Aysun - you're awesome!!
This was a great clone video with React and Tailwind CSS / Firebase!!! I am so looking forward to more of your ReactJS projects!!! (ReactJS with Typescript, also with Next.js, and with Framer Animation?) 🔥 You are awesome!!!
Awesome! I have a nextjs/tailwind coming soon!
@@codecommerce That will be a great one too!! Looking forward to it! Thank you. 👍🏻
I really like how to simplified Reacts useContext capability and used it with firebase. It was stupid easy to follow and understand. This project would be EVEN easier if useContext wasn't used, due to the simplicity of the project. Super big kudos. Thanks a lot D:
*updaate*
I'm not sure why, but I was cruising along, and I keep coming across a onSnapShot error when fetching our saved movies.
I had to opt-in for the getDoc firebase method according to the docs. Idk why though. Kept getting an index error with onSnapShot method
Thanks obby! Not sure what was going on there. Yes, I could’ve done this without Context - I was using context on another project and enjoy the repetition and practice.
It's amazing
firstly, thank you so much for this video and it was a very good video to improve on software
Thanks!
Thank you!
Thank you jack!
You are the best man
Thanks man!
Man your content is freaking amazing. It's sad that I had to go to the 5th page to find this video
I appreciate that dude!
Very cool video. Learned a lot from you. Trying to figure out how to do it with flexbox or grid CSS . Because I just started to study, wanted to do the same project with react but flexbox or grid css. Thank you so mach for such a cool tutorial.
Thank you!
I love this guy💯
Thanks dude!
Thank you for this Video Underrated content really helped me a lot
Is this project fully responsive or not?
@@hafizehtisham7534 i had some issues but i fixed it. ya it is responsive
Glad to hear it!
awesome video
Awesome project video. Currently watching and I’m a little lost on the whole AuthContext file probably because I have never used fire base before now. I could use a little more explanation if there’s a video I can learn more about it or a somewhere I can read about it please recommend
thankyou so much sir for your guidance
Thank you my friend
hype video man.
Thank you dude!
Your video is cool man, As a react beginner this taught me a lot. Thank you so much for that. And one suggestion, please slow down your pace. Sometimes it's hard to catch up your language and explain a bit more of each thing. Keep going ahead and waiting for new tutorials😃. After all I found this tutorial very useful .
Thank you so much for the feedback Jackson. I’ll try and slow it down a bit!
nice project
Wow thank you
Thank you dude!
Thanks!
Thank you Oscar?
Can't get the Users data to show up in the Cloud Firestore, my code is the same as the videos and have tried some other methods but still cant get the Data. is it a Firebase issue?
clint u rock mate
Thank you so much!
nice tutorial. i complete, but i think i really play thats movies in the page jaja new subs ! thx
Thank you nano!!
Another professional tutorial. Smash the thumbs up👍
Thanks dale
Thanks man
Awesome
Thank you josphat
Wao 😍 dude u're awesome and your work is really appreciatable 💕
Thank you so much Kumari!
@@codecommerce plz continue ur video .
I'm waiting for your videos so much eagerly 🥰
I had watched ur all videos ☺️
This is an awesome video ++++++++++++++++++ 😃😃😃
53:56 "SMASHH THAT LIKE BUTTON woah.. smash that like button you guys" this shit had me rolling
Haha smash that shit! 💪
@@codecommerce haha awesome project man!
bro it is a greate project i loved it and also i love your explanation on react . bwd this is my first react project which is completed firstly and it is also successfully hosted and from the bottom of my heart i thanx you a lot, and love from india... :) :) :)
Thank you so much dude! Keep building cool stuff!
Hey bro. Did you host it on firebase only? and did it get hosted instantly? I'm getting a blank screen after successful deploy :(