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

Подписаться 262 тыс.

Просмотров 219 тыс.

50% 1

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

Опубликовано:

16 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 86

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

@fahimsautomation1288 Год назад

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

@beingwhale Год назад

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

@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

@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

@SuperPompey77 Год назад

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

@kherraaminembarek2150 Год назад

Thank you bro your the best

@rennan9891 Год назад

Hey, i love the debugging 🤣

@masuya9915 Год назад

This is gonna be fun!

@NeverCodeAlone Год назад

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

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

@PattyBeautCode Год назад

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

@sonamsherpa57 10 месяцев назад

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 🤔??

@i_vishalsah01 Год назад

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

@jakubfronczyk2496 Год назад

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

@yassineel_ouazzani7242 Год назад

That's gonna be boooooom

@bilegtsdf5776 Год назад

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

@automioai 9 месяцев назад

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

@shayanalijalbani9894 Год назад

Can you tell us that which font are you using

@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 11 месяцев назад

did you figure out how to fix it?

@pranitmoghe2731 11 месяцев назад

Same error :(

@alexsantanna7322 10 месяцев назад

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 10 месяцев назад

@@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 8 месяцев назад

Thanks bro@@TechNinjain720p

@yayitseugene 11 месяцев назад

Is Firebase safe for hosting your data though?

@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

@dimpysharma712 6 месяцев назад

How to call api directories in next app

@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

@sdsim1 Год назад

Thank you

@randomsVlogs871 Год назад

Love you from Pakistan 🇵🇰

@usmanmarkaz Год назад

bro are you complete this project???

@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

@muzamilfootballer5682 11 месяцев назад

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 🤙🏽

@alexsantanna7322 10 месяцев назад

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!