🔴 React.js Clones by PAPA React - 🔴 Let’s build a Retail Storefront App with NEXT.JS 14! (Parallel Routes, Oxylabs, Shadcn, Zustand)

🚨 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 for my other builds? 🛠️ https://links.papareact.com/github Join me as I show you how to build it 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 👉 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 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