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

226,683
0
Publicado 2023-03-03
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/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

Todos los comentarios (21)
  • @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 }
  • @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.
  • @PattyBeautCode
    Today build is sick !!! not just a simple web app anymore but you teach us how to build billionaire tool from scratch ! AWESOME!!!
  • @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 ❤❤
  • @SuperPompey77
    Excellent tutorial once again. Thankyou. 3am in the mornings here is a killer tho!!!! But its worth it!
  • I am facing Crawler error: tunneling socket could not be established, statusCode=407 error while using bright data please anyone help.
  • @oyeSAURABH
    Do we need to pay for Bright Data or Firebase in order to use them ?
  • @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
  • @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.
  • @automioai
    Thanks Sonny for your effort, and Thanks God for letme know supabase first than firebase 🤣