๐Ÿ”ด Letโ€™s build Booking.com 2.0 with NEXT.JS 14! (Scrape Data w/ Oxylabs, React, Shadcn, Tailwind, TS)

60,081
0
Published 2023-12-01
โ—๏ธ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-source-code

๐Ÿšจ 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/universityofcode

๐ŸŽต 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