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

237,319
0
Published 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

All Comments (21)
  • @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 ❀❀
  • 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!!!
  • @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.
  • @SuperPompey77
    Excellent tutorial once again. Thankyou. 3am in the mornings here is a killer tho!!!! But its worth it!
  • @automioai
    Thanks Sonny for your effort, and Thanks God for letme know supabase first than firebase 🀣
  • @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.
  • @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
  • @matarloum2894
    How is possible that the height and width are working for you with the Magnify Icon if its a SVG πŸ€”??