Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth.

Timestamps
00:00 Intro
02:21 Environment setup
09:30 Navbar UI
34:30 Auth UI
01:35:20 Register functionality, MongoDB, Prisma setup
02:09:27 Login functionality
02:28:04 Social Login (Google and Github)
02:44:36 Categories UI
03:11:34 Listing creation step 1 (Category selection)
03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete)
04:06:40 Listing creation step 3 (Counter components)
04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN)
04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route)
04:49:00 Fetching listings with server components (Listing card component, direct server action)
05:23:12 Favoriting functionality
05:39:27 Individual Listing View
06:16:57 Listing reservation component
06:42:33 Reservation functionality (routes, logic)
06:55:05 Trips screen (Loading trips with server component)
07:10:59 Reservations screen (Loading guest reservations with server component)
07:33:13 Favorites screen (Loading favorites with server component)
07:42:35 Properties screen (Loading your listings with server component)
07:53:39 Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages)
08:37:48 Vercel deploy & wrap up

[SushilKumar-ybou]

Being in the IT industry for 19+ years I have never seen someone so organized and really have the mindset of a true developer. Hats off!

[chihhaolin]

.env setting temp note:
1:36:40 DATABASE_URL from mongoDB
2:32:59 social login for github
2:38:01 socail login for google
4:19:12 upload_images

[SimPwear]

I have never been so hyped over a tutorial. This looks very cool and I probably spend the rest of the weekend on my laptop coding along.

[abdelrahman.abdelaal]

Wow, what an amazing video! Antonio, you really have a gift for explaining complex topics in a way that's easy to understand. I learned so much. However, while it's tempting to just copy what Antonio does in the video, it's important to remember that true learning comes from actually working with the frameworks and tools yourself, so don't just rely on this video as a crutch. Thank you, Antonio, for the incredible tutorial and for inspiring us to take our skills to the next level!

[snivels]

What an incredible course. You are an amazing teacher! Please keep doing what you're doing, it's hard to find this kind of quality content, even in paid format.

[dongyuexu]

This full stack app is really comprehensive and functional, and includes the final deployment! Thank you so much Antonio! Keep making great tutorials like this!

[_Bence]

I've just stumbled upon your video and got completely blown! Very great explanation, I have never worked with these technologies yet but you explained it so easy but detailed that I've decided to switch my current frontend app from Angular. Thank you very much!

[jackhuang]

I am highly impressed with the clean code architecture that you have utilized in your coding. Despite using quite some third-party libraries (which are necessary), you have customized most of the components, even small ones like buttons, from scratch based on the specific project requirements. I particularly appreciate how you have abstracted commonly used components and utilized them throughout the entire application. Your code reflects the true fundamental concepts of React which shows how beautiful it can be. Thank you for sharing your valuable content and appreciate your great effort!

[janekostov]

The main reason I started to work with Next.js is YOU Antonio. You are so well organized and smooth with the your skills to make this brilliant project. Najveci pozdrav iz Makedonije, prijatelju. Produzi sa ovaj brilijantan posao !

[otaviobarros]

Your content is awesome Antonio. Thanks for all the knowledge acquired, best ever development channel. So complete and easy to learn along. Also, greetings from Brazil

[webdevnav]

Excellent work! Learning so much from you. It's rare to see such full fledged apps built with professional standards. Hope to see more apps from you soon!

[sebastiancastillo]

Wow!!, Antonio, I have no words to thank how incredibly valuable your tutorials are. This project has a ton of useful knowledge that I haven't seen in other courses, your way of programming is so clean, I really enjoyed it! I'm about 5 hours away and the app works wonderfully. I am very grateful!!👏👏👏👍

[mikedev]

The most impressive project I have seen on Youtube, liked your coding and teaching style! gave me inspiration to try create some website clone myself.

[machezadzabala]

This is hands down the best code along video I've ever come across. 3 days in and I've learned so much. Excellent work! 🔥🔥🔥🔥🔥🔥

[pikusionexio]

Thank you Antonio for the tutorial, just finished it having done bits and bobs here and there for a week - it was my first large scale project from a youtube video and I can finally see why it's so helpful.
I've never even heard of some of the React hooks like Callback and Memo but it forced me to readup about it. You made everything so simple, thank you for that - I'm excited to integrate some of these into some of my future projects!

[alinaberens]

Just finished your course. It taught me a lot of new things about Next.js 13! Very inspiring and useful video. Great, great job!🙂

[abdullahkarahan]

I've been improving myself by watching and doing project videos for a long time. I've learned a lot of new things.
But Antonio you're amazing man. You've taken me to a higher level and opened my vision.
Please continue with your projects and briefly explain every step you take.

[MikeBertelsenDK]

I have not watched the video but the almost 9 hour tutorial for free is amazing.
Kudos to you Antonio for the work behind all of this. I hope you'll live a long healthy life.

[mikejakusz]

Awesome video! I learned a lot, I'll probably have to rewatch this later and try to build this on my own. This is a beast of a project. Thank you for taking the time to build it, you are a legend!

[agustinfodrini]

Hi Antonio I started this build a few days ago and so far am loving it! Learning A LOT. As a suggestion for a future video, I'd really love to see your take on a Letterboxd clone (as much as you can of course, I am aware that it is a very complex and vastly functional site). I feel like a build like that would add massive learning value to the community. Cheers man have a wonderful blessed day and thank you so much for everything you do you have no idea how life-changing these videos are.