🔴 Let’s build GOOGLE SHOPPING with NEXT.JS 13! (Scrape Google w/ Oxylabs, React, TypeScript, Tremor)
ฝัง
- เผยแพร่เมื่อ 30 พ.ค. 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? 🛠️
links.papareact.com/github
Join me as show you how to build a Google Shopping app with Next.js 13.4. You'll learn the following in this build:
👉 How to Scrape Real Google Shopping Data & Results via Oxylabs!
👉 How to use React Skeleton Loaders to show Beautiful loading screens whilst data is fetched!
👉 How to implement the latest Caching techniques in Next.js 13!
👉 How to build a fully responsive site with Tailwind CSS!
👉 Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!)
👉 How to use the new App folder structure in Next.js 13!
👉 How to create new Next.js 13.4 API endpoints in the '/app' directory using the NEW route.ts files!
👉 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? www.papareact.com/dailycoding...
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻 FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS
00:00 Introduction
01:05 Build Showcase
04:29 Oxylabs Sponsorship
07:25 Build Tech
08:51 Zero to Full Stack Hero
09:58 University of Code
11:05 Next.js 13.4 Features
13:11 Initialising the Build
20:32 Building the Header Component (1/2)
28:13 Implementing Tremor Library
30:33 Implementing Heroicons
31:40 Building the Form Section in the Header Component (1/2)
37:15 Building the Search Button Component
43:01 Building the Form Section in the Header Component (2/2)
51:35 Implementing Avatars using React Avatar
54:03 Building the Header Component (2/2)
1:05:30 Explaining the Search Functionality
1:06:59 Building the Search Page (1/2)
1:08:56 Setting up Type Definitions (1/3)
1:09:18 Building the Search Page (2/2)
1:10:34 Building an API Call which Connects to Oxylabs Scraper API (1/2)
1:18:41 Implementing Oxylabs E-Commerce Scraper API
1:28:00 Setting up Type Definitions (2/3)
1:30:04 Building an API Call which Connects to the Oxylabs Scraper API (2/2)
1:35:40 Creating the Results List Component
1:37:43 Building the Sidebar Section in the Results List Component
1:43:52 Building the Main Body Section in the Results List Component
1:55:51 Live Debugging & Explaining Caching in Next.js
2:00:20 Implementing the React Loading Skeleton Library (1/2)
2:05:54 Creating the Product Page
2:07:23 Building an API Endpoint for the Products with Oxylabs (1/2)
2:13:20 Setting up Type Definitions (3/3)
2:14:32 Building an API Endpoint for the Products with Oxylabs (2/2)
2:15:24 Building the Product Page
2:20:32 Building the Single Product Page
2:37:36 Implementing the React Loading Skeleton Library (2/2)
2:39:42 Testing the Search Functionality
2:41:35 Building the Home Page
2:46:28 The Power of Oxylabs
2:47:37 Deploying to Vercel
3:06:18 Final Build Demo
3:10:19 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Google, Google Shopping or/and 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 educational purposes.
#reactjs #nextjs #javascript #google #javascript #tailwindcss #tutorial #reactjstutorial #webscraping #webdevelopment #coding #tutorial #beginner
Just recorded the "learn online instead of university", and this channel is the proof of you can learn a lot more from self education than in university. thanks for the amazing content Sonny.
Greetings from Uzbekistan and good luck in your work
Smash the like button!!! Sonny smashing it again! Please more react native mobile apps!! Pretty please 🙏 😢 😭
You got it - I hear you!!
Gonna build this project soon! The best teacher I've ever met in the community!
Thank you so so much this means a lot!!
Whenever PAPAREACT come, he come with a banger 🔥🔥PAPAREACT is God of Javascript.
Great Build Sonny I am very excited to see the next Live build
Huge! thanks sonny!
Hey sonny your videos are amazing but i wish if you're showing us how to create a website with it dashboard
got halfway through this on the live. Lots of fire info in this one. Have a better grasp on typescript. Big Ups Sonny #PapaFarm killin it.
Yes yes!!! Keep crushing #PAPAFAM
@@SonnySangha Sonny, does the OXY labs search API not return images? I was wanting to add images to my returned results beofre my trial ran out, but i cannot find them in the page results response and it doesnt look like it is in the documentation either. Would you mind clarifying on this one?
@@DigitalAlchemyst i wanted to but its not possible
Awesome! Tops as usual, amazing content!
Thank you!!
Clone video is very helpful for me, and I also joined the papafam!!
Welcome to the PAPAFAM!!!
Banger project , Banger playlist
Just one word. Awesome!
❤️💯🤙🏽
Amazing I added a ton of cool feasters
🎉🎉
Great build Sonny! One problem i have is that when it's deployed, the deployed site skeleton loader for some reason doesn't show up, but when in localhost its normal, any chance you know why?
Hey Sonny would love a video on Figma to build cool amazing looking websites aswell, then probably in a LiveStream you can show us how to convert it to code in NextJS
Hey Sonny, great video. I succesfully completed the app and deployed it. Just one thing I noticed after deployment is that the skeleton loader was not visible to me
HIII SONNYYYY I just started learning you thought my laptop is kind of slow its been a great start to the journey
YES! That’s the energy I’m talking about, nothing will stop you dude!!
Amazing content bro❤❤. Pls bring JS concepts course
I got you!
Phenomenal Build 🔥🔥 !! If possible could you integrate push notifications in your upcoming builds?
Great Idea!
LET'S GOOOOOOOO🚀
❤💯
Is it possible to get the product image when we search for a product?
Please can someone help me with a roadmap I don't know what to do i want to build apps and websites clone like him which language should i start learning please help!
can anyone tell me the name of the first song he played in starting loved it
❤ very smart
please make a tutorial on how to make a point of sale application
What's the name of the song in the background?
Hello mate, amazing app, but it could create some issues? with google? people to believe is misleading? how does this works? which is the idea to monetize this?
Just ❤
Waiting for a threads clone using react native, expo router, typescript, and nativewind
the oxylabs link isnt working
i am missing the Podcasts ;-; Hoping to get another Podcast soon :)
Shooting an episode tomorrow!
@@SonnySangha Cool!!!
Salam Alaik Sonny ❤
Do you think that there is any threat to react native by Factbook 's announcement to abandon it.
Nope I do not!
common Kerala lets coding
WOHOOOOO
error 1:25:09 unexpexted end of json input
Facing same issue
Did you find Solution ?
@@abdulrehmankhan6174 i left it and finshed it i did somethign it worked
I was facing this issue. The problem was that the Oxylabs free trial expired.
Did you fix the error and how do I fix it ??
@@mohmmedjimmy i checked some soucre code of this project on github and fixed it
Please do add timestamp.
On it!!!
@@SonnySangha thank you ❣️
@@SonnySangha can you please make a video on TH-cam Clone?
what’s up with the loud ass music 😭
Just completed another GEM💎 by Sonnyy
Is it possible to get the product image when we search for a product?
tryed it doesnt work