Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

LOOKING FOR THE CODE?
https://links.papareact.com/github

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 ECommerce 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 coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityo...

WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here https://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 ECommerce 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