🚨 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 for my other builds? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as I show you how to build a Walmart Clone with Next.js 14. You'll learn the following in this build:
👉 How to Scrape Real Walmart Product Data & Results via Oxylabs E-Commerce Scraper API!
👉 How to build a Product Page that displays Real Product information straight from Walmart!
👉 How to build a Search Page that displays all the scraping results from Oxylabs based on your search!
👉 How to Use Zustand as a far simpler state management library solution instead of Redux
👉 How to implement Intercepting & Parallel routes!
👉 How to implement an Add to Basket functionality with add & remove features that are on a popup modal that persists data even after a refresh!
👉 How to cache data with Next.js 14 to optimise API calls and provide a Seamless, fast experience for the user
👉 How to use React Skeleton Loaders to show Beautiful loading screens whilst the product data is fetched!
👉 Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn!
👉 How to build a fully responsive site with Tailwind CSS!
👉 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 👉 links.papareact.com/newsletter
🕐 TIMESTAMPS
00:00 Introduction
01:02 Build Showcase
04:09 Oxylabs Sponsorship
06:43 Build Tech
08:09 Zero to Full Stack Hero
9:27 Initialising the Build
18:46 Building the Header Component (1/2)
20:21 Implementing Shadcn/ui
23:45 Building the Header Component (2/2)
48:10 Building the Grid Option Component
1:00:43 Building the Search Page (1/2)
1:03:05 Implementing Oxylabs E-Commerce Scraper API
1:11:23 Setting up Type Definitions (1/2)
1:13:21 Building the Search Page (2/2)
1:19:16 Building the Product Component
1:26:58 Implementing a Loading State (1/2)
1:32:51 Creating the Product Page
1:34:31 Setting up Type Definitions (2/2)
1:35:47 Fetching Real Product Data from Walmart using Oxylabs
1:41:37 Building the Product Page
1:52:57 Implementing a Loading State (2/2)
1:57:55 Explaining and Implementing Zustand for State Management
2:04:27 Implementing Add & Remove to Cart Functionality
2:16:44 Implementing the Basket Functionality
2:29:35 Explaining and Implementing Intercepting & Parallel Routes
2:48:28 Final Build Demo
2:50:50 Deploying to Vercel
2:56:31 Final Deployed Build Demo
2:58:12 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Walmart and/or 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 education purposes.
#nextjs #nextjs14 #react #walmart #typescript #reactjs #ecommerce #coding #javascript #tailwindcss #shadcn #reactjstutorial #coding #tutorial #beginner #programming