🔴 Let’s build Walmart with NEXT.JS 14! (Intercepting & Parallel Routes, Oxylabs, Shadcn, Zustand)

🚨 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

[@red-brains]

You are the best educator, thanks for this incredible video. 💖

[@dalestewart]

A very comprehensive professional tutorial.

[@albigjeka]

Bro,love your videos! You’re the best!!! 🔥🔥🔥

[@MinhNguyen-vh9sv]

You are def the best teacher on KZbin! Thank you so much for giving me all these knowledges

[@arpitweb3]

Thanks Sonny, I really like your teaching style, Thanks in advance for apple vision pro upcoming videos 👍🏻👍🏻

[@usmanmarkaz]

papafam plz start react native projects that is full stack plz sir plz

[@user-pw6om2lo6p]

thanks for you cool videos sunny

[@dalestewart]

Yes Sonny, I would like to see coding on the Apple Vision Pro. Thanks

[@samuelvillafana167]

Watching from Brooklyn, NY! I'm saving up to buy your Zero to Full Stack Hero course. Love your teaching style! Can't wait to start learning.

[@SonnySangha]

Yes yesss!!! #PAPAFAM energy!

[@r.w.7267]

Let’s keep it going

[@tauqeerhusain7521]

Big love sir❤❤❤❤❤❤

[@Lubnasinthekitchen]

Watching from Karachi Pakistan. Thank you so much for your great project brother 💓💯

[@igbanoioshioke6087]

awesome vidd

[@amir-jahangir]

Love ❤️ from Afghanistan 🇦🇫 ❤

[@codehub4060]

i'm your biggest fan sonny. The way you explain and teach concepts is out of this universe. Successfuly built the walmart clone. Papafam to the world and beyond. ❤

[@rotes3106]

Thanks

[@hiteshnalamwar2722]

Sunny is the best)))

[@netherfortress8705]

Thank u papafam

[@manassehchifita1563]

am a new but the way you explain is understandable

[@SonnySangha]

Thank you!

[@mdfaizal7629]

Create a portfolio with an attractive frontend and logical backend

[@preethamb9662]

any way to compile and run next app in aws/oracle t2 micro instance, currently it hangs

[@maharshimahi7512]

Hey sunny can do the videos on react-admin framework

[@lemondeparfait3995]

can you tel me how you record your screen in the live?

[@ritikyadav4376]

Is there any way to get Walmart data with out purchasing oxylab subscription?

[@motamott]

Brother we need more react native projects, it has been a while since the last one

[@ranmaniax2]

answer me pleasee... i dont understand how is your 404 get header? im following as you put inside body tag before children in root layout

[@ranmaniax2]

i dont understand how is your 404 get header? im following as you put inside body tag before children in root layout

[@Taulant-Bardhi]

💥💥💥

[@aditya-d-]

typescript error arha hey, doply error jata nahi, organic not define problem

[@minesh-shah]

Would it be possible to get a sample of the .env variables please

[@minesh-shah]

Actually am I correct in thinking the only variables are for Oxylabs ?

[@aznravensdrive5900]

my vs code never auto imports Link or Image or give suggestions, do you know the reason? I've tried searching all over the internet. thanks.

[@souravchaudhary5790]

some bug....happens. Just uninstall it completely from your system and install again

[@aznravensdrive5900]

thanks for the reply... yea, looks like that's the route i need to go... typing out the image and link imports manually every time sucks@@souravchaudhary5790

[@dalestewart]

Let's get 10000 likes!!😃

[@ranmaniax2]

please dont remove your breadcrumd in vscode, so i can know which path you are open the file while explorer hidden

[@aditya-d-]

I want source code , but your github is paid i want free???

[@SonnySangha]

Then code along for free - simples!

[@aditya-d-]

@@SonnySangha how i get source code

[@starlord7526]

if you get it, let me also know aditya bhai@@aditya-d-

[@jojokman]

@@aditya-d-u need to be part of th epapafam, buy a subscribtion mate or else just code a long ...

[@aditya-d-]

bro i make this in one no need to join@@jojokman

[@techcoderdev4280]

You face like imran khan...singer

[@scryptum]

Oxylabs is extremely slow!

[@SonnySangha]

It’s actually very fast considering it’s scraping LIVE data in realtime via a proxy network! Try this on your own machine and test the speed 😉

[@MWStudiooo]

create some fullstack flutter contents❤

[@Shoha_Coder]

Thank u papafam