πŸ”΄ Let’s build Booking.com 2.0 with NEXT.JS 14! (Scrape Data w/ Oxylabs, React, Shadcn, Tailwind, TS)
Sonny Sangha Sonny Sangha
260K subscribers
60,952 views
0

 Published On Premiered Dec 1, 2023

❗️Save a Massive 50% for Oxylabs Proxies using our special link πŸ‘‰ https://bit.ly/3GqoBsm

πŸ’» Get the CODE for this build for FREE: https://www.papareact.com/booking-app...

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

πŸ”΄ LOOKING FOR THE CODE FOR ALL OF MY BUILDS? πŸ› οΈ
https://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: https://www.papareact.com/universityo...

🎡 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here πŸ‘‰ https://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

show more

Share/Embed