Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023)

[@mikerobin8410]

As a backend dev, frontend devs have my respect...

[@codewithantonio]

Thank you!

[@AndrewLowery-fq1nh]

Interestingly enough i feel that way about back end developers Mike. So you surely have my respect.

[@mikerobin8410]

@@AndrewLowery-fq1nh Thanks Andrew ...

[@kobrasoft-yx9vr]

@@AndrewLowery-fq1nh Tooshay!

[@jacobforsbergg]

@@AndrewLowery-fq1nhI feel the same, backend devs have my respect

[@thealejars]

I just want to say thank you to Antonio for the awesome tutorial you made for the Netflix clone project. I was able to finish it and refactor it using the latest Next.js 14, which was an awesome experience. I managed to fix the build error with prisma generate and next build. I also added deactivate account 😄 I successfully deployed it and am still polishing a lot of stuff like handling flickering, proper loading UI, etc. I didn't follow the exact UI because I had a problem accessing the repo (it was private), so I made my own. I'm sharing this big milestone with you guys. I'm excited to build my next project after this. Happy Coding :)

[@microhum1956]

I love the way you say "amazing, amazing job."

[@illmatic08]

For tailwind you don't have to write the bg opacity and bg color separately or any text color for that matter. e.g. bg-zinc-900/70 is same as bg-zinc-900 bg-opacity-70 or text-zinc-900/90 etc. Great video btw Antonio!

[@codewithantonio]

Thank you so much for the tip, I didn’t know that! Thanks for the nice comment!

[@netsaosa4973]

🤔

[@sukritsaha5632]

Good Tip 👍

[@srandlee4014]

Nice tip👍

[@kimbapslayer1995]

Always best to use the former format too because opacity makes content opaque as well.

[@shorts_faceless]

Just a tip for future videos: VS code has a keybind that toggles automatic line-wrapping of your code so that you see everything in your editor regardless of window size (as opposed to having one really long line of code). Useful especially when working with tailwindcss so that you don't have to manually put all those class attributes in separate lines. For me, this keybind is ALT+Z (US keyboard layout).

[@shorts_faceless]

Also, whenver working with react icons, since you can change their color with classes like 'text-white', you can also change their size with 'text-2xl' or similar (as opposed to size={30}).

[@codewithantonio]

Thank you so much for all of these tips, I will use them in the next tutorial!

[@andrewulloa4832]

Ah this is a game changer!!!

[@mart1d4]

Alt-Z is great. Although, I'd rather put those classes on different lines as I think it makes it more easily readable

[@lowEndAppsAndGames]

@@codewithantonio hey Antonio what might be the issue Vs code says bad authentication when trying to connect with mongodb.

[@arielelias2413]

We need more projects like this. Because is real, from real life, and a client could ask us something like this. Bravo! You have my support.

[@codewithantonio]

Glad you like it, thank you!

[@talantasanov4973]

Do developers write code in their products like in this video?

[@drunkprogrammer7786]

@@talantasanov4973 What do you mean?

[@jefferymuter4659]

Using this to get a better understanding of nextjs/TS/Tailwind. I really love this stack so far. Although I do my best to stay away from tutorials, this one seemed so educational I couldn't help it, so I can take what we do here and start making some stuff using Next/TS on my own.

[@codewithantonio]

Very happy to hear you found this helpful!

[@HellaSmooveMike]

Why do you stay away from tutorials?

[@jefferymuter4659]

@@HellaSmooveMike Because there's a world of difference between a website you develop and design yourself from scratch, and one you 'follow along'. As someone interested in hiring you based off of your ability to take a layout and design it yourself, or a written description of a product with a list of written requirements, 'tutorial followers' would have no clue what to do without a tutorial to follow. I speak from personal experience on that as well as working with other devs who were horrible at developing despite superb portfolios and resumes.

[@binfuwong8859]

Thanks Antonio for the amazing and interesting tutorial! I like your straight-to-the-point method of coaching and thanks for showing many advanced and practical React techniques. Looking forward to learning more from you!

[@codewithantonio]

Thank you for the nice comment!

[@tolashobowale2277]

hello i cannot seem to fix the pages/api/auth/...nextauth.ts issue. i am really stuck and its a little bit frustrating. the register works but to login does not work. it returns error @@codewithantonio

[@alphashortss]

that is so aesthetic, now we need one for ecommerce or maybe a booking functionality

[@codewithantonio]

Thanks for the suggestions!!

[@youcube291]

I've been looking for a tutorial like this for ages. Thank you!

[@codewithantonio]

Glad you found it useful!

[@davronmaxmudov3972]

Amazing video, good luck bro💥

[@codewithantonio]

Thank you a lot!

[@jordanbienvenue468]

REALLY a great content for Fullstack learning, thanks for the effort you put in it. Appreciate ❤

[@codewithantonio]

Glad you like it!

[@NicolasPena-ds5xt]

What a great opportunity to practice and learn! It's a very well-explained project with excellent presentation. Thank you for sharing your knowledge!

[@codewithantonio]

Glad you enjoyed it!

[@sagarmahbub964]

This is a goldmine. Thanks a lot for bringing this up

[@codewithantonio]

Thank you for watching!

[@zemiguel2550]

By the way, you can add a JSON collection to a table instead of inserting every field of an element by itself. On the right of view, there's a {} symbol and you can simply click it, add the object underneath the id and you're good to go. Boom! Collection added. 2:29:30

[@codewithantonio]

Thanks a lot! I wasn't sure what was the best way to seed the data that people with various familiarity of Mongo will understand, so I choose the field-by-field option :D

[@johntrieseverything]

thanks for this. I was like.. there has to be an easier way to do this haha

[@user-yt5ky7jp7o]

@@codewithantonio How to add data to MongoDB? In their we interface? your movies.json file in root folder is only as example of data?

[@RichReflectionz]

This is amazing, will be spending the weekend going through this. You got a new subscriber 😊

[@codewithantonio]

Thank you so much!

[@abdullahsiam7609]

Your voice is clean. no extra distracting sound. keep up the good work bro.

[@codewithantonio]

Thank you a lot!

[@godloveinaction]

I was the 1000th subscriber, gud content bruh

[@codewithantonio]

Thank you so much! ❤️

[@godloveinaction]

@@codewithantonio ur welcome

[@RifkiJones]

Excellent tutorial, best I've seen on NextJS

[@codewithantonio]

Thank you so much!

[@dalestewart]

Another top notch professional application.

[@codewithantonio]

Thank you!

[@ze2411]

THANK YOU FOR THIS BRO @CodeWithAntonio. No amount of CS degrees could have taught me this much.

[@codewithantonio]

Happy I helped!

[@ze2411]

@@codewithantonio would be cool if you do a DevOps tutorial, deploying these applications on cloud servers using dockers etc.

[@sellimenes]

Thank you for this great video, Antonio! I hope you will continue to share such videos. 😇❤️

[@codewithantonio]

Thank you!

[@nubian_goat]

Wow this is legit. thanks man. love your videos.😎😇😇

[@codewithantonio]

Thank you very much, glad you like the videos!

[@luunger]

I loved the project, even though I'm Brazilian and I don't know much English, I ended up learning a lot of useful things

[@codewithantonio]

Glad you managed to work with this video! Thank you!

[@tflixtuto64]

stumbled on your channel today and wow am impressed You very good Antonio

[@codewithantonio]

Thank you a lot!

[@tflixtuto64]

@@codewithantonio most welcome

[@learncode5110]

Awesome! literally learned a lot from you bring more such real time web app projects 😇

[@codewithantonio]

Glad you like the video! :)

[@learncode5110]

@@codewithantonio A lot looking forward to learn more☺

[@aliyazc3052]

@@codewithantonio it is so impressive video Antonio thank you, but I think you shouldn't change frameworks video by video, because it may be so complex.

[@shayanmahnam]

Best tutorial I have ever seen on youtube!!!! Well Doneee🤩

[@codewithantonio]

Thank you!

Brilliant, exactly what I was looking for ! Thanks

[@codewithantonio]

Thank you a lot! Glad it helped you!

[@mohdazkar8315]

I appreciate your hard work , such a great project ♥ ♥

[@codewithantonio]

Thank you!

[@ChouaibNemri]

Good job Antonio, for those interested, I am rewriting this whole app using the brand new NextJS App router. I'll be sharing the code soon!

[@hockeyjock164]

I am interested

[@MatheusQF]

Your adaptation is really interesting, I was checking the code. If you allow me to give some feedback, the only problem is related to the login by google, that is not working on your project 😕

[@khalnayak1018]

Where is the code @@MatheusQF

[@s8x.]

Thank you for this tutorial. I hope to learn from this

[@codewithantonio]

Glad it was helpful!

[@trburaktr16]

Now that it's back, it's time for Udemy Clone 🎉🎉

[@user-hx6fs1sg1d]

You're so awesome Antonio, great work here! Until now I thought it's just Javascript Mastery, now I know there's even better, you earned my sub

[@tarkovarg]

Hey Antonio! thanks for your experience. Im from Argentina and this video is really helping me, hope to learn more from you. Keep up

[@codewithantonio]

Happy to hear that!

[@youcube291]

This video was so informative! Thanks for sharing your knowledge

[@codewithantonio]

Glad you like it!

[@naylord5]

Sweet baby Jesus, you don't have an idea of how convenient this is for a personal project. Thank you very much! ♥ Please consider for a next video a multi file uploads DnD CRUD and/or RBAC (like for custom what menus or modules a user can see or actions than can do). Thanks in advance!

[@codewithantonio]

Thank you so much for the comment and all the suggestions! I Will explore the things you requested!

[@taunado]

Thanks, really enjoyed your pace and that you didn't add unnessary distractions, such as music and live commenting. Looking forward to more, especially to learn more TS.

[@codewithantonio]

Glad you enjoyed it!

[@zeeshan4341]

excellent stuff. keep it up man ❤ hoping for more stuff like this.

[@codewithantonio]

Thank you a lot! New video is coming soon!

[@andrea.possidente]

Congratulations, nice video

[@codewithantonio]

Thank you!

[@praveen_sinnur]

We are with you 💪🏻

[@fern_lpz]

Muy valioso aporte, saludos desde Argentina, sos crack!

[@codewithantonio]

Thank you!

[@razibulhossen9680]

Thanks for this amazing video

[@codewithantonio]

Glad you like it!

[@GoogleUser-nx3wp]

Thank you man whenever i start earning I'll make sure to donate to you

[@matheusescobozo3478]

This first section of the video where you teach the Auth Screen UI was so good for me to train useState concepts ! Looking foward to finish this project. Greetings from Brazil, mate!

[@nehalpradhan2229]

did you finish the project? were there any errors? i want to do this project but some old ones don't work properly.

[@devZone7]

Thank you so much Antonio, I'm a beginer in React but when see your videos it makes me feeling motivated again !

[@piyuminadeesha7812]

hi @devzone7 is it ok to beginner. did you face any strugle

[@achillesoliveira8882]

Thank you very much, your videos have helped me a lot, this was the best tutorial I've ever watched.

[@kodekorp2064]

Ngl surprised to see Prisma not die off. At one point it was questionable if they were still going to be around.

[@akmalsulaymonov2414]

Antonio, thanks for amazing course.

[@gray5881]

Awesome 😎 stuff man, hope to see more from you

[@codewithantonio]

Thank you a lot!

[@ofekashkenazi6643]

amazing video ty very much antonio :)

[@codewithantonio]

My pleasure!

[@unfalldead]

thank you for this tutorial ! Instant follow

[@codewithantonio]

Thank you!

[@DiamondSaberYT]

Looks pretty impressive. I haven’t really been using that newest tech as much, so this will be a fun project to make to learn newest frontend I guess!

[@codewithantonio]

Hope you enjoy it!

[@nicowiranata7711]

its awesome man,just finished the whole thing, its my first time trying typescript and also nextJs, learn a lot from this althoug im not really sure i understand them all

[@codewithantonio]

Great job on finishing it! Thank you for watching!

[@jagansaravanan4601]

Excellent stuff !!! Thank you

[@codewithantonio]

Glad you like it!

[@mfion1]

one new subscriber earned,lovely content

[@codewithantonio]

Very happy to hear that! Thank you!

[@mohamedyoussef8835]

Thanks Antonio for the amazing tutorial 🙂

[@codewithantonio]

Thank you for watching! :)

[@octavieploye]

Thanks a lot for your great work! it's been really worth to follow your tutorial ! Keep Well

[@codewithantonio]

Thank you! Glad to hear that!

[@munawirulhadi2864]

nice thanks, i will follow your video once i have free time

[@codewithantonio]

Thank you!

[@HuyNguyen-bh8tq]

This wonderful tutorial is help me improve my skills. Thank you!

[@codewithantonio]

Glad you like it!

[@densz93]

Your cursor animation is dope...

[@codewithantonio]

Thank you, I believe you can find an easy tutorial by googling "smooth VSCode animation" but I dont want to share unfamiliar links in comments because I might get a community guideline strike if its a weird URL :)

[@densz93]

@@codewithantonio Oh Thank you very much, googled it and found the tips, it works great :)

[@meheraabarvy4134]

Thanks for your effort.

[@codewithantonio]

Glad you like the video!

[@srandlee4014]

That's absolutely what I'm looking for! I have tried several times to find a tutorial like this to build Netflix, but failed. Thanks a lot for your effort and sharing!

[@codewithantonio]

Glad it helped you!

[@najafsikander8760]

I just completed the tutorial. Amazing work. Keep up the good work bro

[@arjuno7058]

Hello there. I'm having problem with register. It says bad request. Could you help me with that?

[@alexandershubert573]

Absolutely amazing! Thank you so much

[@codewithantonio]

Glad you like it! Thank you!

[@giannifed]

Great Tutorial. Thank you

[@codewithantonio]

Glad it was helpful!

[@juanantoniogomezgil1314]

Best tutorial ever!

[@codewithantonio]

Thank you!

[@ranaatito9328]

thanks for the tutorial and amazing tools u used

[@codewithantonio]

Glad you like it!

[@jeanweb93]

Almost done, TY !

[@codewithantonio]

Well done!!

[@sukritsaha5632]

This is probably a very small suggestion, but in Tailwind, you can write p-16 instead of px-16 and py-16. Will save few seconds I guess 😂.

[@codewithantonio]

Yeah sometimes Im not 100% sure whether I want the padding to be the same, so I split it and then forgot to change jt to p-16 before the tutorial 😄

[@sukritsaha5632]

@@codewithantonio oh yes, that makes sense 😯

[@avel1537]

nice video dude

[@codewithantonio]

Glad you enjoyed it!

[@trying-code3726]

thanks for creating this video

[@codewithantonio]

It's my pleasure

[@tusharkutre188]

Sweet ❤️🔥⚡

[@codewithantonio]

Glad you like it!

[@juicyberg]

THANK YOU FOR THIS

[@codewithantonio]

Glad you like it!

[@booksstore2823]

Best KZbinr in the World!

[@codewithantonio]

Glad you think so!

[@alexandersobolev2091]

Bravo! 💥

[@codewithantonio]

Thank you!

[@1godfrey]

this is amazing pls make more bro

[@codewithantonio]

Thank you!

[@_yllw6155]

it's literally refreshing now to see a code video without "ChatGPT" in the title

[@codewithantonio]

hahaha glad you like it!

[@shubhammittal3176]

WTF, I thought, I am the only one who uses yellow as profile pic.

[@ilyas8523]

We're making out of the entry-level jobs with this one. But seriously, thanks for all your hard work. As soon as I can afford your courses, I'll be sure to support you financially bc you've EARNED it

[@pratyakshparashar2623]

do we have to learn these technologies first so as to follow this course. or what?

[@ilyas8523]

​@@pratyakshparashar2623 For me I learn throught practice. I could spend months reading books and learning the foundations, but I'll have a hard time applying it. My learning style is to dive right into battle by practicing and working on big projects. You can learn Typescript and all the technology he uses here just by following along. Keep coding and you'll eventually get it!

[@zsoltdemeter9300]

Great video and great content! Really helps me out. Keep up the good work! Can't wait to check your other projects also. Cheers!🍻

[@codewithantonio]

Glad you like it! Thank you!

[@nirmesh44]

Best tutorial ever 🙂

[@codewithantonio]

Glad you like it!

[@Deus-lo-Vuilt]

Thanks Antonio 🎉

[@RiccardoOrtelli]

grande antonio, il numero uno

[@codewithantonio]

Thank you!

[@soothingmusic9783]

Hurray the video is back!

[@codewithantonio]

woohooooo

[@codewithyogapratama]

Hi Antonio, thank very much

[@codewithantonio]

Glad you like it!

[@labhamjain3915]

nice keep it up

[@codewithantonio]

Thank you a lot!

[@jufri17]

really love it ❤ it could be better if you can explain the tailwind classes. and type the classes after the jsx. so we can see the classes affect.

[@codewithantonio]

Noted!

[@mounzrulislamsobuj3327]

Great 👍

[@codewithantonio]

Thank you a lot!

[@bilegtsdf5776]

yoo bro i love it

[@codewithantonio]

Thank you!

[@FelipeCandian]

Perfect!

[@codewithantonio]

Glad you like it!

[@user-pm2re1qj7f]

thank you

[@codewithantonio]

Welcome!

[@ChillNaChiku]

great job bro

[@codewithantonio]

Thank you a lot!

[@comaecod]

I just finished building this project, and it feels like such a relief! There were so many new things for me to learn, particularly using TailwindCSS and Prisma. I faced some initial bugs, but I slowly got the hang of the project and ended up loving it. However, I have noticed a few small things that could be improved. For instance, when we mark a movie as a favorite, it takes about 4-5 seconds to appear in the favorites section. I'm not entirely sure why this is happening, but it could be because they are rendered on the server-side, causing a delay in updating the page. Perhaps we could use a feature that React provides to update the front-end instantaneously and asynchronously update the back-end? The same issue applies to the modal, the content takes a while to load. Also, when a user logs in using a Google account, let's say, he can't login via his Github account or vice versa. Is there a way to allow this kinda login and associate it to the same person by checking it against his email_id? Overall, I enjoyed working on this Next 13 Project and feel like I learned a lot about current development practices. Thank you, Antonio, for providing such a great tutorial, and I look forward to catching up on more of your content in the future!

[@thisbevibhor]

could you be able to help me? At 39:50 while creating global.d.ts Antonio says that TS should recognize "prismadb" as global object(basically remove the squiggly lines from under that word) but I am not able to do that, I have tried everything.

[@comaecod]

@@thisbevibhor Yes. I can try. Are you still facing the issue?

[@vijayyyyyyyy6yyyyyyyy]

Right now, I have no idea about Prisma. Should I start this project or not?..

[@comaecod]

@@vijayyyyyyyy6yyyyyyyy Yes, you can, he does give a brief on how Prisma works, also if you have any prior experience with any ORM tool like Spring JPA(Hibernate), you'll be able to understand easily.

[@Garcica]

Hey bro, have you figured out how to speed up marking movies as favorites and deleting them from favorites by any chance? The delay is kinda bugging me... Thanks!

[@ImamNurArifinHA]

thanks,, this is great video,, 👍

[@codewithantonio]

Thank you so much!

[@techlifejournal]

Looks great, small suggestion zoom your font

[@codewithantonio]

Thank you a lot, will improve font size in the future videos!

[@lrafaelgoncalves]

awesome 😀

[@codewithantonio]

Glad you like it!

[@helloworld2747]

you are so amazing

[@codewithantonio]

Thank you friend!

[@ToumaRenshi]

Wow.. it works anyway. you have best way of coding. it makes much easier. it was my first time that i have finished a clone project. great job. :)

[@codewithantonio]

Glad to hear that!

[@nelsoncarter8323]

were you able to install bcrypt

[@ToumaRenshi]

@@nelsoncarter8323 yes, of course!

[@Maskybot01]

Am having problems on my register is not saving my register file it send back 400 bad results

[@edwintorres717]

bro very very thanks, awesome job 👏

[@codewithantonio]

Glad to help!

[@sylvesterfernandes5652]

TYSM Master.

[@codewithantonio]

Glad you like it!

[@alexanderpoker6655]

Hi from Russia! Great job! I'll take this for my portfolio. Thank you so match!