Рет қаралды 62,016
❗️Save a Massive 50% for Oxylabs Proxies using our special link 👉 bit.ly/3GqoBsm
💻 Get the CODE for this build for FREE: www.papareact.com/booking-app...
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🔴 LOOKING FOR THE CODE FOR ALL OF MY BUILDS? 🛠️
links.papareact.com/github
Join me as show you how to build a Booking.com Clone with Next.js 14. You'll learn the following in this build:
👉 How to leverage the power of Server components inside of Next.js 14 and when to use Client components (With Examples!)
👉 How to Scrape Real Data from the Booking.com website to get real Hotel Booking Details via the Oxylabs Web Scraper API!
👉 Create a Beautiful UI & UX for our Booking.com clone using the highly Popular Shadcn!
👉 How to use Skeleton Loaders with Next.js 14 to show Beautiful loading screens whilst the results are being fetched!
👉 How to build a fully responsive site with Tailwind CSS!
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!
📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: www.papareact.com/dailycoding...
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
🕐 TIMESTAMPS
00:00 Introduction
00:21 Build Showcase & Tech
02:13 Oxylabs Sponsorship
06:26 Initialising the Build
11:20 Implementing Shadcn/ui
13:32 Building the Header Component
35:16 Building the Rest of the Page
41:01 Building the Search Functionality (Search Form Component)
1:09:12 Building the Search Page
1:12:54 Implementing Oxylabs Web Scraper API
1:19:15 Scraping Data from Booking.com using Oxylabs
1:32:35 Setting Up Type Definitions
1:34:24 Testing the Search Functionality
1:35:58 Implementing Skeleton Loaders
1:40:33 Building the Search Results Page
1:46:06 Final Build Demo
1:47:56 Deploying to Vercel
1:54:41 Final Deployed Build Demo
1:56:53 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Booking.com and/or any of 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 education purposes.
#reactjs #nextjs #scraper #webscraping #javascript #tailwindcss #tutorial #reactjstutorial #webdevelopment #coding #tutorial #beginner