🔴 Let’s build a WEB SCRAPER with React! (Next.js 13.2, Firebase, Webhooks, TypeScript, Bright Data)
Вставка
- Опубліковано 25 кві 2024
- 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...
🚨 Upgrade your coding skills by joining the world’s BEST developer community & course “Zero to Full Stack Hero”: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: www.papareact.com/universityo...
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!
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
🎵 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
please make a react native employee attendance project, sir, I really support your channel
Instead of using webhooks could this work with FB cloud functions?
Sonny, you're a true gem of React!!!
You are the best DEV in the whole youtube. Another best content 💯
Once again, another professional application.👍👍
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.
Thank you so much this means a huge deal!! I’ll keep them coming! #PAPAFAM
Today build is sick !!! not just a simple web app anymore but you teach us how to build billionaire tool from scratch ! AWESOME!!!
My man, I just love the illustration part, it really helped me understand the overall project architecture concept into another level, Awesome stuff!🔥 #PAPAFAM ❤❤❤
Thanks for the feedback ill do this alot more!! #PAPAFAM
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
}
Excellent tutorial once again. Thankyou. 3am in the mornings here is a killer tho!!!! But its worth it!
This is gonna be fun!
Very good...thx a lot for passion and inspiration!!
Hey, i love the debugging 🤣
Thank you bro your the best
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.
Yeah his build was amazing! Also yeah I'm getting the same with an error 404, do you know how to fix this??
Do we need to pay for Bright Data or Firebase in order to use them ?
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
Great content. You got a subscriber.
How is possible that the height and width are working for you with the Magnify Icon if its a SVG 🤔??
So quick question will it be able to scrape data from any website??
Hi Sonny I had some problems running this on windows. First NVM wont install properly. Second ngrok wont download.
Hello, I would like to inquire about how we can speed up the search process.
how is it look like in git repository with two apps forntend and backed?
Can you tell us that which font are you using
Love you from Pakistan 🇵🇰
bro are you complete this project???
Can you do a project where you focus on authentication like implementing email verification without using magic link and resetting password those kinda stuff
That's gonna be boooooom
yaa we are all watching. we are legion man XD
Thanks Sonny for your effort, and Thanks God for letme know supabase first than firebase 🤣
What is the app that you use for drawing on the screen?
I think this question is asked every single build & in many of his builds he says the tool he uses
We need a video to create an admin/user login using next js 13.2.
Thanks
I am facing Crawler error: tunneling socket could not be established, statusCode=407 error while using bright data please anyone help.
did you figure out how to fix it?
Same error :(
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 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
Thanks bro@@TechNinjain720p
Is Firebase safe for hosting your data though?
Just met your partner at Ferrari World, he and his wife are great!
Hahaha no way! that’s awesome 🤙🏽
Thank you
How to call api directories in next app
where can I get this playlist., It is off the chain
Sign up to the PAPAFAM Newsletter & we'll send it your way! 👉 links.papareact.com/newsletter
@@SonnySangha Thank you. Got it
Plz include auto posting in any web scrapper project plzz plzzz plzzz😢
Will this get block by amazon? I mean is this a real thing to create a small startup?
probably, but great tutorial tho
please make a video using push notification
Sir plz make React Native Projects Plz sir
Please make video about Bolt app ( car rental app)
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!
how did you find it?
@@ifaizanMK Sorry the late reply, If I'm note wrong I found It in the dashboard, note sure, but its somewhere there
can we scrap data from any website like this ???
Yes!!!
@@SonnySangha thanks bro for this amazing vdo
@@SonnySangha thanks for such valuable information
From algeria
Music is not enough loud. Can not watch the video without loud music
Anyone elese getting "Internal Error, try again later", when pasting the link into Brightdata?
yes, I'm having the same errror, did you manage to resolve?
@@alexsantanna7322 Nope, unfortunately I can’t get brightdata to work. Did you find a solution for this?
@@suu566 I think we may have to purchase one of brightdata plan in order to work.
in the console
geeat
sonny make it downloadable please
It’s in the description?
sper ca totulDir
uganda
Did he say north korea ? 😂
Oke bos kita jowin pidio dulu karna saya lagi ngurusin identitas saya yang ilang 🙏👍
este sittuatiare isCaRca
What religion are you Sony Saghna
🤍🤍🤍