🔴 Let’s build GOOGLE SHOPPING with NEXT.JS 13! (Scrape Google w/ Oxylabs, React, TypeScript, Tremor)
45 هزار بار بازدید -
پارسال
-
🚨 Join the world’s BEST
🚨 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 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? https://www.papareact.com/dailycodingchallenges
🎵 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:
🕐 TIMESTAMPS
https://www.seevid.ir/fa/w/-8VCUUBHBKc Introduction
https://www.seevid.ir/fa/w/-8VCUUBHBKc Build Showcase
https://www.seevid.ir/fa/w/-8VCUUBHBKc Oxylabs Sponsorship
https://www.seevid.ir/fa/w/-8VCUUBHBKc Build Tech
https://www.seevid.ir/fa/w/-8VCUUBHBKc Zero to Full Stack Hero
https://www.seevid.ir/fa/w/-8VCUUBHBKc University of Code
https://www.seevid.ir/fa/w/-8VCUUBHBKc Next.js 13.4 Features
https://www.seevid.ir/fa/w/-8VCUUBHBKc Initialising the Build
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Header Component (1/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Implementing Tremor Library
https://www.seevid.ir/fa/w/-8VCUUBHBKc Implementing Heroicons
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Form Section in the Header Component (1/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Search Button Component
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Form Section in the Header Component (2/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Implementing Avatars using React Avatar
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Header Component (2/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Explaining the Search Functionality
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Search Page (1/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Setting up Type Definitions (1/3)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Search Page (2/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building an API Call which Connects to Oxylabs Scraper API (1/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Implementing Oxylabs E-Commerce Scraper API
https://www.seevid.ir/fa/w/-8VCUUBHBKc Setting up Type Definitions (2/3)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building an API Call which Connects to the Oxylabs Scraper API (2/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Creating the Results List Component
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Sidebar Section in the Results List Component
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Main Body Section in the Results List Component
https://www.seevid.ir/fa/w/-8VCUUBHBKc Live Debugging & Explaining Caching in Next.js
https://www.seevid.ir/fa/w/-8VCUUBHBKc Implementing the React Loading Skeleton Library (1/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Creating the Product Page
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building an API Endpoint for the Products with Oxylabs (1/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Setting up Type Definitions (3/3)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building an API Endpoint for the Products with Oxylabs (2/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Product Page
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Single Product Page
https://www.seevid.ir/fa/w/-8VCUUBHBKc Implementing the React Loading Skeleton Library (2/2)
https://www.seevid.ir/fa/w/-8VCUUBHBKc Testing the Search Functionality
https://www.seevid.ir/fa/w/-8VCUUBHBKc Building the Home Page
https://www.seevid.ir/fa/w/-8VCUUBHBKc The Power of Oxylabs
https://www.seevid.ir/fa/w/-8VCUUBHBKc Deploying to Vercel
https://www.seevid.ir/fa/w/-8VCUUBHBKc Final Build Demo
https://www.seevid.ir/fa/w/-8VCUUBHBKc 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
پارسال
در تاریخ 1402/04/13 منتشر شده
است.
45,001
بـار بازدید شده