Тёмный

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

Sonny Sangha
Подписаться 264 тыс.
Просмотров 53 тыс.
50% 1

🚨 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

Опубликовано:

 

14 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 50   
@MinhNguyen-vh9sv
@MinhNguyen-vh9sv 4 месяца назад
You are def the best teacher on RU-vid! Thank you so much for giving me all these knowledges
@dalestewart
@dalestewart 4 месяца назад
A very comprehensive professional tutorial.
@albigjeka
@albigjeka 4 месяца назад
Bro,love your videos! You’re the best!!! 🔥🔥🔥
@arpitweb3
@arpitweb3 4 месяца назад
Thanks Sonny, I really like your teaching style, Thanks in advance for apple vision pro upcoming videos 👍🏻👍🏻
@red-brains
@red-brains Месяц назад
You are the best educator, thanks for this incredible video. 💖
@usmanmarkaz
@usmanmarkaz 4 месяца назад
papafam plz start react native projects that is full stack plz sir plz
@samuelvillafana167
@samuelvillafana167 3 месяца назад
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
@SonnySangha 3 месяца назад
Yes yesss!!! #PAPAFAM energy!
@user-pw6om2lo6p
@user-pw6om2lo6p 4 месяца назад
thanks for you cool videos sunny
@codehub4060
@codehub4060 4 месяца назад
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. ❤
@Lubnasinthekitchen
@Lubnasinthekitchen 3 месяца назад
Watching from Karachi Pakistan. Thank you so much for your great project brother 💓💯
@dalestewart
@dalestewart 4 месяца назад
Yes Sonny, I would like to see coding on the Apple Vision Pro. Thanks
@mdfaizal7629
@mdfaizal7629 3 месяца назад
Create a portfolio with an attractive frontend and logical backend
@netherfortress8705
@netherfortress8705 4 месяца назад
Thank u papafam
@tauqeerhusain7521
@tauqeerhusain7521 4 месяца назад
Big love sir❤❤❤❤❤❤
@r.w.7267
@r.w.7267 4 месяца назад
Let’s keep it going
@rotes3106
@rotes3106 3 месяца назад
Thanks
@amir-jahangir
@amir-jahangir 4 месяца назад
Love ❤️ from Afghanistan 🇦🇫 ❤
@igbanoioshioke6087
@igbanoioshioke6087 2 месяца назад
awesome vidd
@manassehchifita1563
@manassehchifita1563 3 месяца назад
am a new but the way you explain is understandable
@SonnySangha
@SonnySangha 3 месяца назад
Thank you!
@hiteshnalamwar2722
@hiteshnalamwar2722 4 месяца назад
Sunny is the best)))
@preethamb9662
@preethamb9662 4 месяца назад
any way to compile and run next app in aws/oracle t2 micro instance, currently it hangs
@lemondeparfait3995
@lemondeparfait3995 4 месяца назад
can you tel me how you record your screen in the live?
@ritikyadav4376
@ritikyadav4376 3 месяца назад
Is there any way to get Walmart data with out purchasing oxylab subscription?
@maharshimahi7512
@maharshimahi7512 4 месяца назад
Hey sunny can do the videos on react-admin framework
@waleedsharif618
@waleedsharif618 10 дней назад
Which database you use here ?
@aditya-d-
@aditya-d- 4 месяца назад
typescript error arha hey, doply error jata nahi, organic not define problem
@motamott
@motamott 4 месяца назад
Brother we need more react native projects, it has been a while since the last one
@minesh-shah
@minesh-shah 2 месяца назад
Would it be possible to get a sample of the .env variables please
@minesh-shah
@minesh-shah 2 месяца назад
Actually am I correct in thinking the only variables are for Oxylabs ?
@aznravensdrive5900
@aznravensdrive5900 4 месяца назад
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
@souravchaudhary5790 4 месяца назад
some bug....happens. Just uninstall it completely from your system and install again
@aznravensdrive5900
@aznravensdrive5900 4 месяца назад
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
@Taulant-Bardhi
@Taulant-Bardhi 2 месяца назад
💥💥💥
@dalestewart
@dalestewart 4 месяца назад
Let's get 10000 likes!!😃
@techcoderdev4280
@techcoderdev4280 3 месяца назад
You face like imran khan...singer
@aditya-d-
@aditya-d- 4 месяца назад
I want source code , but your github is paid i want free???
@SonnySangha
@SonnySangha 4 месяца назад
Then code along for free - simples!
@aditya-d-
@aditya-d- 4 месяца назад
@@SonnySangha how i get source code
@starlord7526
@starlord7526 4 месяца назад
if you get it, let me also know aditya bhai@@aditya-d-
@jojokman
@jojokman 4 месяца назад
@@aditya-d-u need to be part of th epapafam, buy a subscribtion mate or else just code a long ...
@aditya-d-
@aditya-d- 3 месяца назад
bro i make this in one no need to join@@jojokman
@scryptum
@scryptum 4 месяца назад
Oxylabs is extremely slow!
@SonnySangha
@SonnySangha 4 месяца назад
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
@MWStudiooo 4 месяца назад
create some fullstack flutter contents❤
@Shoha_Coder
@Shoha_Coder 4 месяца назад
Thank u papafam
Далее
Just try to use a cool gadget 😍
00:33
Просмотров 40 млн
This UI component library is mind-blowing
8:23
Просмотров 587 тыс.
All 29 Next.js Mistakes Beginners Make
1:45:10
Просмотров 63 тыс.
Learn Next.js Parallel Routes In 16 Minutes
16:18
Просмотров 112 тыс.