KZhead

🔴 Let’s build a WEB SCRAPER with React! (Next.js 13.2, Firebase, Webhooks, TypeScript, Bright Data)

Sonny Sangha
2024 ж. 6 Мам.
214 425 Рет қаралды
Жүктеу

1️⃣ Get started for FREE with $15 credits using Bright Data 👉 get.brightdata.com/sonny
2️⃣ Get Deploying with Vercel Today 👉 links.papareact.com/vercel
3️⃣ Get the Bright Data Amazon Web Scraper Starter Template Here 👉 github.com/sonnysangha/bright...
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as show you how to build a WEB SCRAPER with Next.js 13.2. You'll learn the following in this build:
👉 How to scrape 'unscrapable' sites such as AMAZON using Bright Data!
👉 How to Deploy a Serverless firebase cloud function!
👉 How to use Webhooks to update our database in realtime!
👉 Create API endpoints in your Next.js app using the new route.ts Next.js 13.2 features to securely manage requests
👉 Connect Firebase v9 to your Next.js 13 application to create & store scraper results
👉 How to build a fully responsive site with Tailwind CSS
👉 Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!)
👉 How to use the new App folder structure in Next.js 13!
👉 Dynamic page routing in Next.js 13
👉 Add HeroIcons to level up your app's UI!
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!
+ So Much More!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻 FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
01:07 Build Showcase & Tech
04:08 Bright Data Sponsorship
06:53 Zero to Full Stack Hero
08:11 Setting up Next.js & Tailwind CSS
10:19 Implementing Next.js 13 Features
16:21 Build Layout
18:25 Implementing Heroicons
20:56 Building the Home Page (1/2)
24:39 Building the Sidebar Component (1/2)
35:05 Building the Header Component
47:12 Trying the New Next.js v13.2 Route Handler
53:40 Setting Up Bright Data
1:03:36 Explaining the Complete Build Flow
1:09:57 Setting up Firebase
1:11:11 Setting up Cloud Functions
1:17:36 Implementing the onScrapperComplete Webhook
1:21:27 Explaining ngrok
1:22:26 Implementing ngrok
1:28:50 Implementing a Cloud Firestore Database (1/2)
1:32:09 Setting up Firebase Admin
1:35:03 Implementing a Cloud Firestore Database (2/2)
1:37:39 Initiating a Request / Response to Bright Data using an API
1:46:08 Implementing an API Call to Bright Data to Activate Scrapper
2:08:24 Setting Up Client Access to the Cloud Firestore Database
2:11:28 Implementing Dynamic Routing based on Bright Data Response
2:20:49 Implementing React Firebase Hooks Library
2:23:06 Implementing a Loading / Pending State
2:29:40 Building the Results Component (1/2)
2:30:19 Setting up Type Definitions
2:31:05 Building the Results Component (2/2)
2:39:07 Building the Sidebar Component (2/2)
2:42:18 Building the Sidebar Row Component (1/2)
2:49:51 Implementing React Spin Kit Library
2:54:30 Building the Sidebar Row Component (2/2)
2:57:08 Implementing Loading Animations
2:59:16 Implementing React Hot Toast Notifications
3:07:17 Deploying the Backend of the Build
3:14:52 Deploying to Vercel
3:21:05 Final Build Demo
3:24:23 Build Summary
3:25:27 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Amazon or/and 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 educational purposes.
#webscraping #reactjs #nextjs #javascript #amazon #javascript #tailwindcss #tutorial #reactjs #ai

Пікірлер

  • Get STARTED with Vercel Today 👉 links.papareact.com/vercel

    @SonnySangha@SonnySangha Жыл бұрын

    • please make a react native employee attendance project, sir, I really support your channel

      @chairilashar7022@chairilashar7022 Жыл бұрын

    • Instead of using webhooks could this work with FB cloud functions?

      @masondavis2493@masondavis2493Ай бұрын

  • Sonny, you're a true gem of React!!!

    @beingwhale@beingwhale Жыл бұрын

  • You are the best DEV in the whole youtube. Another best content 💯

    @fahimsautomation1288@fahimsautomation1288 Жыл бұрын

  • Once again, another professional application.👍👍

    @dalestewart@dalestewart Жыл бұрын

  • My man, I just love the illustration part, it really helped me understand the overall project architecture concept into another level, Awesome stuff!🔥 #PAPAFAM ❤❤❤

    @Usq7213@Usq7213 Жыл бұрын

    • Thanks for the feedback ill do this alot more!! #PAPAFAM

      @SonnySangha@SonnySangha Жыл бұрын

  • The stuff u explained in this build I have been trying to do for a while now but found no solution till now! Ur the best Sonny keep up the great work. IMO ur on another level with these builds & make other dev builds unwatchable.

    @ai_coding@ai_coding11 ай бұрын

    • Thank you so much this means a huge deal!! I’ll keep them coming! #PAPAFAM

      @SonnySangha@SonnySangha11 ай бұрын

  • Excellent tutorial once again. Thankyou. 3am in the mornings here is a killer tho!!!! But its worth it!

    @SuperPompey77@SuperPompey77 Жыл бұрын

  • This is gonna be fun!

    @masuya9915@masuya9915 Жыл бұрын

  • 1:50:00 So if anyone is wondering how to make it work I've found that as of now the way that it works is you can do something like export async function POST(request: Request) { const body = await request.json(); // now you have access to body and you can go even further if you know that body contains search you can do it like this const { search } = await request.json(); // good idea here is to declare a type and type this object so we and everybody else knows its not from the sleeve but actually intended }

    @PysznePysznosci@PysznePysznosci Жыл бұрын

  • Today build is sick !!! not just a simple web app anymore but you teach us how to build billionaire tool from scratch ! AWESOME!!!

    @PattyBeautCode@PattyBeautCode Жыл бұрын

  • Hey, i love the debugging 🤣

    @rennan9891@rennan9891 Жыл бұрын

  • Very good...thx a lot for passion and inspiration!!

    @NeverCodeAlone@NeverCodeAlone Жыл бұрын

  • Thank you bro your the best

    @kherraaminembarek2150@kherraaminembarek2150 Жыл бұрын

  • Hello, I have learned the basics of js. Do you advise me to learn the framework or that I apply the exponential js without the framework and work, but sometimes after the application I find myself distracted. Is this normal and what is the solution? Please answer me and thank you

    @lp26197@lp26197 Жыл бұрын

  • How is possible that the height and width are working for you with the Magnify Icon if its a SVG 🤔??

    @matarloum2894@matarloum2894 Жыл бұрын

  • Do we need to pay for Bright Data or Firebase in order to use them ?

    @oyeSAURABH@oyeSAURABH Жыл бұрын

  • Hey Sonny! I loved the video project we just worked on!🔥Now I can put in on my resume🙂.The animations for the loading and the UI is very clean and I'm thinking of getting it to work with dark mode too. Keep up the good work! On a side note, have you seen the new GPT models(GPT3.5 turbo, embed, whisper)? I was wondering if you could make a quick video showing how we can modify the messenger build to incorporate these new models (preferably just the GPT-3.5turbo ones). I have an idea where we can make a conditional if (model === 'gpt-3.5-turbo') to detect specific cases like this and make different requests for them.

    @carsonz2256@carsonz2256 Жыл бұрын

    • Yeah his build was amazing! Also yeah I'm getting the same with an error 404, do you know how to fix this??

      @kzod887@kzod887 Жыл бұрын

  • So quick question will it be able to scrape data from any website??

    @i_vishalsah01@i_vishalsah01 Жыл бұрын

  • Great content. You got a subscriber.

    @sonamsherpa57@sonamsherpa5710 ай бұрын

  • Hello, I would like to inquire about how we can speed up the search process.

    @bilegtsdf5776@bilegtsdf5776 Жыл бұрын

  • Can you tell us that which font are you using

    @shayanalijalbani9894@shayanalijalbani9894 Жыл бұрын

  • Hi Sonny I had some problems running this on windows. First NVM wont install properly. Second ngrok wont download.

    @Raptormonkey@Raptormonkey Жыл бұрын

  • how is it look like in git repository with two apps forntend and backed?

    @jakubfronczyk2496@jakubfronczyk2496 Жыл бұрын

  • Can you do a project where you focus on authentication like implementing email verification without using magic link and resetting password those kinda stuff

    @speedster784@speedster784 Жыл бұрын

  • We need a video to create an admin/user login using next js 13.2. Thanks

    @hamzabro-xr9ou@hamzabro-xr9ou Жыл бұрын

  • Is Firebase safe for hosting your data though?

    @yayitseugene@yayitseugene11 ай бұрын

  • I am facing Crawler error: tunneling socket could not be established, statusCode=407 error while using bright data please anyone help.

    @motabhaimotivation@motabhaimotivation Жыл бұрын

    • did you figure out how to fix it?

      @dancrha5978@dancrha597811 ай бұрын

    • Same error :(

      @pranitmoghe2731@pranitmoghe273111 ай бұрын

    • did any of you manage to revolse this issue? I suspect that it does not work on brightdata free trial, but I'm not sure

      @alexsantanna7322@alexsantanna732210 ай бұрын

    • @@alexsantanna7322 Hey guys, I faced the same issue. I contacted brightdata and you need to add credits to your account in order to run a collector. But also make sure you click 'activate the free trial' on your collector, I didn't realize you had to activate it

      @TechNinjain720p@TechNinjain720p10 ай бұрын

    • Thanks bro@@TechNinjain720p

      @ashu15531@ashu155318 ай бұрын

  • Thanks Sonny for your effort, and Thanks God for letme know supabase first than firebase 🤣

    @automioai@automioai9 ай бұрын

  • That's gonna be boooooom

    @yassineel_ouazzani7242@yassineel_ouazzani7242 Жыл бұрын

  • What is the app that you use for drawing on the screen?

    @teinett@teinett Жыл бұрын

    • I think this question is asked every single build & in many of his builds he says the tool he uses

      @huntermacias2023@huntermacias2023 Жыл бұрын

  • How to call api directories in next app

    @dimpysharma712@dimpysharma7126 ай бұрын

  • yaa we are all watching. we are legion man XD

    @soufyensk5210@soufyensk5210 Жыл бұрын

  • Plz include auto posting in any web scrapper project plzz plzzz plzzz😢

    @muzamilfootballer5682@muzamilfootballer568211 ай бұрын

  • Love you from Pakistan 🇵🇰

    @randomsVlogs871@randomsVlogs871 Жыл бұрын

    • bro are you complete this project???

      @usmanmarkaz@usmanmarkaz Жыл бұрын

  • Please make video about Bolt app ( car rental app)

    @lowenruh_est@lowenruh_est11 ай бұрын

  • where can I get this playlist., It is off the chain

    @UIXConnect@UIXConnect Жыл бұрын

    • Sign up to the PAPAFAM Newsletter & we'll send it your way! 👉 links.papareact.com/newsletter

      @SonnySangha@SonnySangha Жыл бұрын

    • @@SonnySangha Thank you. Got it

      @UIXConnect@UIXConnect Жыл бұрын

  • Will this get block by amazon? I mean is this a real thing to create a small startup?

    @leojohn6702@leojohn6702 Жыл бұрын

    • probably, but great tutorial tho

      @bilegtsdf5776@bilegtsdf5776 Жыл бұрын

  • Thank you

    @sdsim1@sdsim1 Жыл бұрын

  • Just met your partner at Ferrari World, he and his wife are great!

    @RanToSlow@RanToSlow Жыл бұрын

    • Hahaha no way! that’s awesome 🤙🏽

      @SonnySangha@SonnySangha Жыл бұрын

  • I'm having trouble to find the button 'develop a web scraper (IDE)' in brightdata, anyone else knows if they removed this fuctionality? Edit: Never mind, I found it, great content by the way!

    @alexsantanna7322@alexsantanna732210 ай бұрын

    • how did you find it?

      @ifaizanMK@ifaizanMK10 ай бұрын

    • @@ifaizanMK Sorry the late reply, If I'm note wrong I found It in the dashboard, note sure, but its somewhere there

      @alexsantanna7322@alexsantanna732210 ай бұрын

  • please make a video using push notification

    @tejasvishnu3836@tejasvishnu3836 Жыл бұрын

  • Sir plz make React Native Projects Plz sir

    @usmanmarkaz@usmanmarkaz Жыл бұрын

  • can we scrap data from any website like this ???

    @souravdubey4578@souravdubey4578 Жыл бұрын

    • Yes!!!

      @SonnySangha@SonnySangha Жыл бұрын

    • @@SonnySangha thanks bro for this amazing vdo

      @souravdubey4578@souravdubey4578 Жыл бұрын

    • @@SonnySangha thanks for such valuable information

      @amangarg5385@amangarg5385 Жыл бұрын

  • Anyone elese getting "Internal Error, try again later", when pasting the link into Brightdata?

    @suu566@suu56610 ай бұрын

    • yes, I'm having the same errror, did you manage to resolve?

      @alexsantanna7322@alexsantanna732210 ай бұрын

    • @@alexsantanna7322 Nope, unfortunately I can’t get brightdata to work. Did you find a solution for this?

      @suu566@suu56610 ай бұрын

    • @@suu566 I think we may have to purchase one of brightdata plan in order to work.

      @alexsantanna7322@alexsantanna732210 ай бұрын

  • in the console

    @majidtaei4251@majidtaei4251 Жыл бұрын

  • Music is not enough loud. Can not watch the video without loud music

    @Yahoodeu@Yahoodeu7 ай бұрын

  • sonny make it downloadable please

    @yaninyz_witt-mwa3687@yaninyz_witt-mwa3687 Жыл бұрын

    • It’s in the description?

      @SonnySangha@SonnySangha Жыл бұрын

  • From algeria

    @kherraaminembarek2150@kherraaminembarek2150 Жыл бұрын

  • geeat

    @darknessgamerz4809@darknessgamerz48096 ай бұрын

  • sper ca totulDir

    @user-yc6kf6vm5m@user-yc6kf6vm5m11 ай бұрын

  • uganda

    @susankikira3539@susankikira3539 Жыл бұрын

  • Did he say north korea ? 😂

    @anasryadi8545@anasryadi8545 Жыл бұрын

  • este sittuatiare isCaRca

    @user-yc6kf6vm5m@user-yc6kf6vm5m11 ай бұрын

  • Oke bos kita jowin pidio dulu karna saya lagi ngurusin identitas saya yang ilang 🙏👍

    @IwanSetiawan-yc8gt@IwanSetiawan-yc8gt4 ай бұрын

  • What religion are you Sony Saghna

    @otienodaniel9165@otienodaniel9165 Жыл бұрын

  • 🤍🤍🤍

    @manindrasammanathegreat8253@manindrasammanathegreat8253 Жыл бұрын
KZhead