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: null 🕐 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