🚨 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
Join me as show you how to build a Google Shopping app 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 coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
🎵 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: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