Full Stack Airbnb Clone with 13 App Router React, Tailwind, Prisma, MongoDB, NextAuth 2023
Discord for any problems/errors/bugs:
Github & Live Website:
In this video, we will put a special emphasis on the 13 App Router, which is the latest addition to the framework.
The 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your applications. In this tutorial, we will use the 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience.
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.
This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with 13 App Router!
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
1 view
4298
1587
4 weeks ago 00:18:22 6
Фронтенд с нуля. Урок 14. Добавляем стили и типы элементам через джаваскрипт
4 weeks ago 00:14:05 3
Google has been ordered to sell Chrome
4 weeks ago 00:39:59 6
All of the Dumb Things People Said About My Product
4 weeks ago 00:10:02 3
AI Engineer NEW AI Software Engineer! Generate Full-Stack Apps EASILY!
4 weeks ago 00:20:35 3
[The Poplar Report] 🚨🚨Feds KILLED Her Pet Chickens At Gunpoint🚨🚨
4 weeks ago 00:29:08 6
An open source app we can all learn from
4 weeks ago 00:12:16 5
JavaScript in places you didn’t expect
4 weeks ago 00:18:14 1
React isn’t PHP (and that’s a good thing)
4 weeks ago 00:13:14 2
I Made The Fastest JS Framework (please don’t use it)
4 weeks ago 00:12:23 2
Need animations? Use this library.
4 weeks ago 01:20:28 1
I built the same app with 5 different stacks
4 weeks ago 00:13:00 5
React Blog App Full Tutorial (Infinite Scroll, User Roles, Filters) MERN Stack Blog Website - Part 3
4 weeks ago 02:59:53 2
React Blog App Full Tutorial (Infinite Scroll, User Roles, Filters) MERN Stack Blog Website - Part 2
4 weeks ago 03:00:06 14
React Blog App Full Tutorial (Infinite Scroll, User Roles, Filters) MERN Stack Blog Website - Part 1
4 weeks ago 00:09:00 1
Baidu’s NEW Full-Stack Developer, FREE Canvas, iRAG, Apps, and MORE!
4 weeks ago 00:00:39 2
RxdCompany
4 weeks ago 04:02:54 63
Попадём ли в финал? | The Finals
4 weeks ago 03:39:18 115
Red Dead Redemption 2 | Прохождение #3
4 weeks ago 00:26:54 13
Фронтенд с нуля. Урок 13. Оживляем сайт с помощью ванильного джаваскрипта
4 weeks ago 01:20:54 322
Дискуссия. Поговорим про аутстафф // Демо-занятие курса «CTO / Технический директор»