WebKamal
  • Home
  • Web Dev
  • JavaScript
  • WordPress
  • Next.js
  • Laravel
  • Blog
No Result
View All Result
  • Home
  • Web Dev
  • JavaScript
  • WordPress
  • Next.js
  • Laravel
  • Blog
No Result
View All Result
WebKamal
No Result
View All Result

Full Stack Airbnb Clone with Next.js

webkamal by webkamal
March 16, 2025
in Next.js
0 0
0
Full Stack Airbnb Clone with Next.js
0
SHARES
6
VIEWS
Share on FacebookShare on Twitter

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

In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework.

The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 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 Next.js 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 Next.js 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

Previous Post

Web Developer Resume that guarantees Web Developer Job

Next Post

Build and Deploy: TWITTER clone with React

Next Post
Build and Deploy: TWITTER clone with React

Build and Deploy: TWITTER clone with React

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest posts

Building-and Sell Your First App

How to Come Up With, Build, and Sell Your First App (Even If You’re a Beginner)

July 3, 2025
empire of ai

Empire of AI: Karen Hao on Big Tech, Power, and AI’s Future

July 3, 2025
ai photo with desktop and workspace

The Fastest Way to Become a Front-End Developer in 2025 (Without Wasting Time)

July 3, 2025
  • Home
  • Web Dev
  • JavaScript
  • WordPress
  • Next.js
  • Laravel
  • Blog

© 2025 Web Kamal

No Result
View All Result
  • Home
  • Web Dev
  • JavaScript
  • WordPress
  • Next.js
  • Laravel
  • Blog

© 2025 Web Kamal

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In