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

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

[@SonnySangha]

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

[@chairilashar7022]

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

[@masondavis2493]

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

[@beingwhale]

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

[@fahimsautomation1288]

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

[@dalestewart]

Once again, another professional application.👍👍

[@Usq7213]

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

[@SonnySangha]

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

[@PysznePysznosci]

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 }

[@SuperPompey77]

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

[@ai_coding]

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.

[@SonnySangha]

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

[@masuya9915]

This is gonna be fun!

[@kherraaminembarek2150]

Thank you bro your the best

[@PattyBeautCode]

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

[@rennan9891]

Hey, i love the debugging 🤣

[@NeverCodeAlone]

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

[@sonamsherpa57]

Great content. You got a subscriber.

[@lp26197]

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

[@oyeSAURABH]

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

[@carsonz2256]

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.

[@kzod887]

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

[@Raptormonkey]

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

[@matarloum2894]

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

[@jakubfronczyk2496]

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

[@i_vishalsah01]

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

[@bilegtsdf5776]

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

[@speedster784]

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

[@hamzabro-xr9ou]

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

[@yassineel_ouazzani7242]

That's gonna be boooooom

[@shayanalijalbani9894]

Can you tell us that which font are you using

[@yayitseugene]

Is Firebase safe for hosting your data though?

[@soufyensk5210]

yaa we are all watching. we are legion man XD

[@motabhaimotivation]

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

[@dancrha5978]

did you figure out how to fix it?

[@pranitmoghe2731]

Same error :(

[@alexsantanna7322]

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

[@TechNinjain720p]

@@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

[@ashu15531]

Thanks bro@@TechNinjain720p

[@automioai]

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

[@teinett]

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

[@huntermacias2023]

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

[@dimpysharma712]

How to call api directories in next app

[@muzamilfootballer5682]

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

[@RanToSlow]

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

[@SonnySangha]

Hahaha no way! that’s awesome 🤙🏽

[@randomsVlogs871]

Love you from Pakistan 🇵🇰

[@usmanmarkaz]

bro are you complete this project???

[@sdsim1]

Thank you

[@leojohn6702]

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

[@bilegtsdf5776]

probably, but great tutorial tho

[@UIXConnect]

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

[@SonnySangha]

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

[@UIXConnect]

@@SonnySangha Thank you. Got it

[@lowenruh_est]

Please make video about Bolt app ( car rental app)

[@tejasvishnu3836]

please make a video using push notification

[@alexsantanna7322]

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!

[@ifaizanMK]

how did you find it?

[@alexsantanna7322]

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

[@usmanmarkaz]

Sir plz make React Native Projects Plz sir

[@souravdubey4578]

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

[@SonnySangha]

Yes!!!

[@souravdubey4578]

@@SonnySangha thanks bro for this amazing vdo

[@amangarg5385]

@@SonnySangha thanks for such valuable information

[@majidtaei4251]

in the console

[@Yahoodeu]

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

[@suu566]

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

[@alexsantanna7322]

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

[@suu566]

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

[@alexsantanna7322]

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

[@kherraaminembarek2150]

From algeria

[@yaninyz_witt-mwa3687]

sonny make it downloadable please

[@SonnySangha]

It’s in the description?

[@darknessgamerz4809]

geeat

[@user-yc6kf6vm5m]

sper ca totulDir

[@susankikira3539]

uganda

[@anasryadi8545]

Did he say north korea ? 😂

[@user-yc6kf6vm5m]

este sittuatiare isCaRca

[@IwanSetiawan-yc8gt]

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

[@otienodaniel9165]

What religion are you Sony Saghna

[@manindrasammanathegreat8253]

🤍🤍🤍