🔴 Let’s build Airbnb 2.0 with NEXT.JS! (ReactJS, Tailwind CSS, Mapbox, Calendar & Date Picker)

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

Join me as I build the AIRBNB 2.0 CLONE with NEXT.JS. You’ll learn how to do the following in this build:

👉 How to build a beautiful Date and Calendar Functionality where you can book a listing just like Airbnb!
👉 How to build a Search Functionality that instantly displays all the listings with the speed of Next.js!
👉 How to use Tailwind CSS to build a beautiful carasoul, loading bars and lots of of good UI / UX design implementations!
👉 How to use Mapbox to display the exact location of all the listings!
👉 How to finally deploy the final build on Vercel!

+ SO MUCH MORE!

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

👇🏻FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
Newsletter: https://links.papareact.com/newsletter

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://links.papareact.com/merch

🕐 TIMESTAMPS:
00:00 Introduction
01:04 Build Tech Stack
02:04 Build Showcase
05:03 Setting up Next.js with Tailwind CSS
10:33 Starting the Build
13:56 Explaining Tailwind CSS
15:37 Planning Out the Build
18:57 Creating the Header Component
23:53 Building the Left Side of the Header
37:12 Building the Search Bar (1/2)
38:13 Implementing Heroicons
42:09 Building the Search Bar (2/2)
50:08 Building the Right Side of the Header
56:22 Building the Banner Component
1:12:28 Explaining Server Side Rendering in Next.js
1:13:46 Implementing Server Side Rendering
1:23:54 Creating the Small Card Component
1:27:30 Building the Left Side of the Small Card Component
1:28:45 Building the Right Side of the Small Card Component
1:36:49 Building the Medium Card Component
1:43:50 Hiding the Scrollbar using Tailwind CSS
1:47:04 Building the Large Card Component
1:54:46 Building the Footer Component
2:00:31 Deploying to Vercel (1/2)
2:04:39 Implementing the Date & Calendar Functionality
2:40:32 Building the Search Functionality & Page
3:27:23 Building the Info Card Component
3:43:25 Implementing the Loading Bar
3:49:48 Implementing Mapbox Functionality
4:36:43 Deploying to Vercel (2/2)
4:40:57 Final Build Demo
4:41:37 Outro

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Airbnb and its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.

#reactjs #nextjs #airbnb