🔴 Let’s build a SHOPPING App with NEXT.JS 13! (Scrape Google w/ Oxylabs, React, TypeScript, Tremor)

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com 🔴 LOOKING FOR THE CODE? 🛠️ https://links.papareact.com/github Join me as show you how to build it with Next.js 13.4. You'll learn the following in this build: 👉 How to Scrape Real Google Shopping Data & Results via Oxylabs! 👉 How to use React Skeleton Loaders to show Beautiful loading screens whilst data is fetched! 👉 How to implement the latest Caching techniques in Next.js 13! 👉 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! 👉 How to create new Next.js 13.4 API endpoints in the '/app' directory using the NEW route.ts files! 👉 How to use TypeScript to reduce the overall number of Bugs and Errors 👉 How to deploy the final build on Vercel! 🎵 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:05 Build Showcase 04:29 Oxylabs Sponsorship 07:25 Build Tech 08:51 Zero to Full Stack Hero 09:58 University of Code 11:05 Next.js 13.4 Features 13:11 Initialising the Build 20:32 Building the Header Component (1/2) 28:13 Implementing Tremor Library 30:33 Implementing Heroicons 31:40 Building the Form Section in the Header Component (1/2) 37:15 Building the Search Button Component 43:01 Building the Form Section in the Header Component (2/2) 51:35 Implementing Avatars using React Avatar 54:03 Building the Header Component (2/2) 1:05:30 Explaining the Search Functionality 1:06:59 Building the Search Page (1/2) 1:08:56 Setting up Type Definitions (1/3) 1:09:18 Building the Search Page (2/2) 1:10:34 Building an API Call which Connects to Oxylabs Scraper API (1/2) 1:18:41 Implementing Oxylabs E-Commerce Scraper API 1:28:00 Setting up Type Definitions (2/3) 1:30:04 Building an API Call which Connects to the Oxylabs Scraper API (2/2) 1:35:40 Creating the Results List Component 1:37:43 Building the Sidebar Section in the Results List Component 1:43:52 Building the Main Body Section in the Results List Component 1:55:51 Live Debugging & Explaining Caching in Next.js 2:00:20 Implementing the React Loading Skeleton Library (1/2) 2:05:54 Creating the Product Page 2:07:23 Building an API Endpoint for the Products with Oxylabs (1/2) 2:13:20 Setting up Type Definitions (3/3) 2:14:32 Building an API Endpoint for the Products with Oxylabs (2/2) 2:15:24 Building the Product Page 2:20:32 Building the Single Product Page 2:37:36 Implementing the React Loading Skeleton Library (2/2) 2:39:42 Testing the Search Functionality 2:41:35 Building the Home Page 2:46:28 The Power of Oxylabs 2:47:37 Deploying to Vercel 3:06:18 Final Build Demo 3:10:19 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Google, Google Shopping 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. #reactjs #nextjs #javascript #google #javascript #tailwindcss #tutorial #reactjstutorial #webscraping #webdevelopment #coding #tutorial #beginner