π΄ Letβs build a WEB SCRAPER with React! (Next.js 13.2, Firebase, Webhooks, TypeScript, Bright Data)
237,319
Published 2023-03-03
2οΈβ£ Get Deploying with Vercel Today π links.papareact.com/vercel
3οΈβ£ Get the Bright Data Amazon Web Scraper Starter Template Here π github.com/sonnysangha/brightdata-amazon-scraper-tβ¦
π¨ 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/dailycodingchallenges
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
All Comments (21)
-
Get STARTED with Vercel Today π links.papareact.com/vercel
-
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.ππ
-
My man, I just love the illustration part, it really helped me understand the overall project architecture concept into another level, Awesome stuff!π₯ #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 }
-
Today build is sick !!! not just a simple web app anymore but you teach us how to build billionaire tool from scratch ! AWESOME!!!
-
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.
-
Excellent tutorial once again. Thankyou. 3am in the mornings here is a killer tho!!!! But its worth it!
-
Very good...thx a lot for passion and inspiration!!
-
This is gonna be fun!
-
Thank you bro your the best
-
Hey, i love the debugging π€£
-
Great content. You got a subscriber.
-
That's gonna be boooooom
-
Thanks Sonny for your effort, and Thanks God for letme know supabase first than firebase π€£
-
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.
-
Can you do a project where you focus on authentication like implementing email verification without using magic link and resetting password those kinda stuff
-
How is possible that the height and width are working for you with the Magnify Icon if its a SVG π€??
-
yaa we are all watching. we are legion man XD