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

1️⃣ Get started for FREE with $15 credits using Bright Data 👉 https://get.brightdata.com/sonny
2️⃣ Get Deploying with Vercel Today 👉 https://links.papareact.com/vercel
3️⃣ Get the Bright Data Amazon Web Scraper Starter Template Here 👉 https://github.com/sonnysangha/brightdata-amazon-scraper-template

🚨 Upgrade your coding skills by joining the world’s BEST developer community & course “Zero to Full Stack Hero”: https://www.papareact.com/course

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

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? 🛠️
https://links.papareact.com/github

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter

👇🏻 FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://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