🔴 Let’s build Booking.com 2.0 with NEXT.JS 14! (Scrape Data w/ Oxylabs, React, Shadcn, Tailwind, TS)

❗️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

Пікірлер: 76

  • @ethanbinnie4663
    @ethanbinnie46633 ай бұрын

    This is my first time watching your videos and I got through the whole thing so fast. You've helped me understand so much more about React and helped me learn and use typescript, tailwind, and how to scrape data with Oxylabs. Can't tell you how grateful I am for how easy you made it for me to learn and use these skills in such an awesome project. Would love more of these kinds of videos!!

  • @NewAwesomeTech
    @NewAwesomeTech5 ай бұрын

    Great Job Sonny. Tutorials like this gives me enough strength to do mine.

  • @motamott
    @motamott5 ай бұрын

    Love these type of videos, even tho I still enjoy the live this explain in way more detailed way and more focused on the main idea behind the tech, hopefully we get more in detailed basi to intermediate projects with every part explained and being walked through

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thank you for being an amazing supporter!

  • @oladipupoakorede
    @oladipupoakorede5 ай бұрын

    Sonny you do you remember that dude from Nigeria , who went from being a student at a coding cohort to cohort teacher , guess what Sonny , I launched my startup (Ordermart) an online marketplace app this august and got it registered as a private company limited by shares the same august , I'm back to say Thank you for putting out this videos which led me from being a beginner in coding to a Founder , Thank you Sonny, much love , Ordermart is available on Play Store. much love again

  • @colliedev6568
    @colliedev65685 ай бұрын

    Hey Sonny I prefer this style of Video but I know you love doing the live videos as well. An even 50/50 split would be so dope but I will still watch the live ones! The overall length of this video was perfect and the detail you went into just seemed to flow great on this one.

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thanks for the feedback this is super helpful! Ive taken it onboard!!

  • @siddiquahanjum1347
    @siddiquahanjum13475 ай бұрын

    Hi, Super excited to learn....

  • @AjaySingh-jz8qx
    @AjaySingh-jz8qx4 ай бұрын

    Amazing technique man. Sonny have you any plans about react native??

  • @hassaneskandari8177
    @hassaneskandari81773 ай бұрын

    Very awesome Love from Iran

  • @oyewolesheddrack3642
    @oyewolesheddrack36423 ай бұрын

    do you have any tutorial on expo push notification? will be glad if you can help out

  • @asadkhantahir2737
    @asadkhantahir27374 ай бұрын

    Hi there, I have a question can you make a tutorial on how to create a website or editing tool like Figma. Can you please tell me what are the logics behind the figma editing buttons? I mean there are customisation options how these are working or we can use a library for that purpose? Just like the logo maker websites that allow the user to customize their logos. I want to know how to code those customization options. Looking forward to your reply Thank you!

  • @NajOrgChannel-td3kb
    @NajOrgChannel-td3kb5 ай бұрын

    Hey bro, can we do Native Mobile Apps using NextJS 14 or should i go back to React Native or Flutter ?

  • @user-xm3bk3pl6w
    @user-xm3bk3pl6w5 ай бұрын

    where you copy the classname with the blue from the header from?

  • @guillermo.avalos
    @guillermo.avalos5 ай бұрын

    'sr-only' in Tailwind means 'screen-reader only'. Does not have anything to do with server side rendering.

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Honestly we learn something new every day! I had known this a while ago but slipped my mind completely when recording - Thanks for the reminder!

  • @techknowledgebase4504
    @techknowledgebase45045 ай бұрын

    sr-only is screen reader only not server render 😂 Show shadcn but use headless ui

  • @69bossgaming51

    @69bossgaming51

    5 ай бұрын

    i spent 32 minutes, his focus was on frontend UI, i played this video to learn Next js features😂

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thanks for the correction, was a slip on my behalf when recording about sr-only! Also if you watch closely you'll learn alot about Next.js 14.

  • @purple88able
    @purple88able5 ай бұрын

    Blessings ❤

  • @developer_jas
    @developer_jas5 ай бұрын

    Hey Sonny. Awesome videos. Do you have any resources for advanced full stack dev? I’ve finished my work day but I still want to passively learn more.

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Hey there! So for any advanced topics we showcase this in my flagship course Zero to Full Stack Hero: www.papareact.com/course Defo check it out & ill see you inside!

  • @shivamkumartripathi3052
    @shivamkumartripathi30523 ай бұрын

    I have created an application where I have searched and filter options like search the data by status and also add a pagination on a single page I have used searchparams options it is working on local but not on deployment. If someone opens the page I have set the params in use effect like page=1&status= and then I select the status value from the drop-down like active I am pushing the route in the onchange of value. I do not want to open a new page the condition is that I have to show the filtered data on the same page and set the query params according to the filters.

  • @zayadur
    @zayadur5 ай бұрын

    Payload CMS has been making waves since their 2.0 release. It might be worth doing a deep dive like this to stay ahead of the curve when Payload CMS eventually gets their own Vercel template. Okay fine, I think it's a really good CMS that's given me respite from WordPress and I need help figuring it out. 😭

  • @saitejagatadi9711
    @saitejagatadi97114 ай бұрын

    Sonny bro Just curious to know which USB microphone you are using.. "The mic quality is so soothing to listen to."

  • @edwarda7096
    @edwarda70964 ай бұрын

    Can you do an app utilitizing a code/text editor like Monaco-editor with React?

  • @elradad
    @elradad5 ай бұрын

    Can you build new portfolio using next js 14 Sonny Love u, greate content ❤

  • @tonmoygaming7663
    @tonmoygaming76635 ай бұрын

    this project is 100% perfect if you using admin dashboard

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thank you! I'll consider this for next time!

  • @sanjaybalnad4180
    @sanjaybalnad41805 ай бұрын

    Can't we directly use our ip instead of proxy? I know some websites won't allow it but i really don't want to sign up to oxylabs or other proxy and enter transactional details 😅

  • @nyntyt

    @nyntyt

    5 ай бұрын

    Because dont have any production allow localhost

  • @jhoswecastro
    @jhoswecastro5 ай бұрын

    Thanks a lot, you're incredible! Could you please create a travel agency app? And thanks again, because of you, I love this career. P.S., could your course offer us a discount? It's quite expensive in Peru. XD

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thanks for the support! We offer PPP for countries like Peru, check for the blue banner at the top of the course page www.papareact.com/course - Thanks for the awesome words, i'll be sure to try create a full travel agency app!

  • @aastikmandil3516
    @aastikmandil35164 ай бұрын

    Hey Sonny, Popover panel is not opening. I have checked the documentation

  • @Muslim_Son
    @Muslim_Son5 ай бұрын

    Great Tutorials bro, keep it up! I have an idea for your next video. How about to make a fast food order system in reactjs, is that possible?

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thanks for the support! - This is an awesome Idea il try integrate this into the next build!!

  • @Muslim_Son

    @Muslim_Son

    5 ай бұрын

    @@SonnySangha Thank you! Enjoying from your tutorials!

  • @sumanthapa8742
    @sumanthapa87425 ай бұрын

    Hello bro Love from nepal

  • @user-xm3bk3pl6w
    @user-xm3bk3pl6w5 ай бұрын

    Maan! What for a Video! And waht the hell which shell you are using which gives you the Suggestiions to use??? Please tell me?

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Warp Terminal! - Thanks for the support!

  • @hiteshpakhan7783
    @hiteshpakhan77835 ай бұрын

    as a student what we should start with first for becoming developer

  • @mastermind4193

    @mastermind4193

    5 ай бұрын

    Learn your language and go build projects bro

  • @ffzz007
    @ffzz0074 ай бұрын

    Hey can you create a Detailed video about nextAuth v5

  • @naimul64
    @naimul645 ай бұрын

    Sir please show us how to clone Google Bard using nextjs and Google PALM API key. Please sir make a video for this, And also please try to add some personal information in those AI like those AI's name Bard to something else, and other informations. Please sir please make a full video for it please.

  • @sunilshah300
    @sunilshah3005 ай бұрын

    Can you upload the full video after live?

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    The video will be up to watch after

  • @simeonmwangi4033
    @simeonmwangi40335 ай бұрын

    I dont understand how tags is working for you and not mine.

  • @hehebehello2080

    @hehebehello2080

    2 ай бұрын

    next has a problem with that bro you have to import the next js components

  • @KeKuHauPiOx
    @KeKuHauPiOx5 ай бұрын

    After deploying, The Web Scraping API times out after 10 seconds and returns an error

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    You need to upgrade your Vercel plan, it’s capped at 10 seconds on free tier!

  • @KeKuHauPiOx

    @KeKuHauPiOx

    5 ай бұрын

    @@SonnySangha 🙏 you are the man!!!

  • @toriidev
    @toriidev5 ай бұрын

    LinkedIn clone next?

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    I already have a LinkedIn Clone, another one?.... maybe?

  • @FahadKiani1
    @FahadKiani15 ай бұрын

    the scraper API ends up charging you $50 after a free trial. I like the project but seems like a click bait

  • @waleedsharif618

    @waleedsharif618

    5 ай бұрын

    Can we do it without that API ? Some free one ?

  • @yoky0429
    @yoky04294 ай бұрын

    1:26:22

  • @DoerNation
    @DoerNation5 ай бұрын

    make a video on NVM 😭😭

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Got you

  • @amir-rashid
    @amir-rashid5 ай бұрын

    Source code?

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Its in the description!

  • @miladhosayni5045
    @miladhosayni50452 ай бұрын

    Please clone the New Egg website completely🙏

  • @ahmedAltariqi
    @ahmedAltariqi5 ай бұрын

    "shad-cdn" lol

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    We all slip up every now and then!

  • @ahmedAltariqi

    @ahmedAltariqi

    5 ай бұрын

    @@SonnySangha Ik nothing's wrong with it, but it made me laugh 😅 Apologies

  • @aditya-d-
    @aditya-d-2 ай бұрын

    hey guys if anyone want source , like, i make this

  • @hjikingali7625
    @hjikingali76255 ай бұрын

    copy ...paste !!!!!!!

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Not really... these builds are intensely prepped before hand by myself. Its called optimising time on a video to prevent it being a 10 hour video.

  • @AlexanderSlash

    @AlexanderSlash

    5 ай бұрын

    @@SonnySangha just out of curiosity, do you do the same thing on your Zero to Full Stack Hero course? or that happens on a more live debugging and explaining vibe?

  • @SonnySangha

    @SonnySangha

    2 ай бұрын

    In the course we do LIVE coding with thorough explanations

  • @ahtisham112
    @ahtisham1123 ай бұрын

    Please stop putting these irritating thumbnails with open mouth

  • @muhammadkkp4864
    @muhammadkkp48645 ай бұрын

    "TypeError: Cannot read properties of undefined (reading 'length') at eval (webpack-internal:///(rsc)/./lib/fetchResults.ts:148:26) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async fetchResults (webpack-internal:///(rsc)/./lib/fetchResults.ts:137:22) at async SearchPage (webpack-internal:///(rsc)/./app/search/page.tsx:18:21)" why is this error showing up ? anyone have any clue?

  • @Iamjoelangel

    @Iamjoelangel

    3 ай бұрын

    same here got that wrror as well, what did you do to fix this

  • @and-done

    @and-done

    3 ай бұрын

    fyi i haven't been able to find the issue. At the end of the build i replaced every file with the contents that are in the repo with no luck. The only thing i haven't tried is cloning the repo but that defeats the purpose @@Iamjoelangel

  • @fusionxxt

    @fusionxxt

    2 ай бұрын

    you need to make sure that you have formatted the parsing data correctly in the parsing_instructions of the body const in the fetch results page. It could be that you missed closing the brackets [ on any of the xpath args. Hope that helps 👍