🔴 Let’s build Walmart with NEXT.JS 14! (Intercepting & Parallel Routes, Oxylabs, Shadcn, Zustand)
ฝัง
- เผยแพร่เมื่อ 17 พ.ค. 2024
- 🚨 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
![Supernova - aespa エスパ 에스파 [Music Bank] | KBS WORLD TV 240517](http://i.ytimg.com/vi/bepqfR-pxY0/mqdefault.jpg)
papafam plz start react native projects that is full stack plz sir plz
You are def the best teacher on TH-cam! Thank you so much for giving me all these knowledges
A very comprehensive professional tutorial.
Bro,love your videos!
You’re the best!!! 🔥🔥🔥
Thanks Sonny, I really like your teaching style, Thanks in advance for apple vision pro upcoming videos 👍🏻👍🏻
You are the best educator, thanks for this incredible video. 💖
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.
Yes yesss!!! #PAPAFAM energy!
thanks for you cool videos sunny
Yes Sonny, I would like to see coding on the Apple Vision Pro. Thanks
Create a portfolio with an attractive frontend and logical backend
Let’s keep it going
Big love sir❤❤❤❤❤❤
Watching from Karachi Pakistan. Thank you so much for your great project brother 💓💯
any way to compile and run next app in aws/oracle t2 micro instance, currently it hangs
Love ❤️ from Afghanistan 🇦🇫 ❤
Thank u papafam
Sunny is the best)))
Is there any way to get Walmart data with out purchasing oxylab subscription?
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. ❤
awesome vidd
can you tel me how you record your screen in the live?
Thanks
am a new but the way you explain is understandable
Thank you!
Hey sunny can do the videos on react-admin framework
Brother we need more react native projects, it has been a while since the last one
typescript error arha hey, doply error jata nahi, organic not define problem
Would it be possible to get a sample of the .env variables please
Actually am I correct in thinking the only variables are for Oxylabs ?
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.
some bug....happens. Just uninstall it completely from your system and install again
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
💥💥💥
Let's get 10000 likes!!😃
You face like imran khan...singer
I want source code , but your github is paid
i want free???
Then code along for free - simples!
@@SonnySangha how i get source code
if you get it, let me also know aditya bhai@@aditya-d-
@@aditya-d-u need to be part of th epapafam, buy a subscribtion mate or else just code a long ...
bro i make this in one no need to join@@jojokman
Oxylabs is extremely slow!
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 😉
create some fullstack flutter contents❤
Thank u papafam