🔴 Let's build Google 2.0 with Tailwind CSS & NEXT.JS! (Responsive, SSR React, Pagination)
ฝัง
- เผยแพร่เมื่อ 14 พ.ค. 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
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as I build Google 2.0 with TAILWIND CSS (with 2.1 JIT!) & NEXT.JS!
Check out Hostinger (Use code SONNY for 7% OFF Annual Plans!) 👉 www.hostinger.com/sonny
🎙️ PODCAST
links.papareact.com/podcast
🌍 SOCIALS:
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
Newsletter: links.papareact.com/newsletter
❤️ SUPPORT
PAPA Merch: links.papareact.com/merch
Donate: links.papareact.com/donate
🕐 TIMESTAMPS:
00:00 Introduction
00:56 Build Showcase (1/2)
02:55 Hostinger Sponsorship
04:53 Build Showcase (2/2)
06:17 Next.js Introduction
08:33 Tabnine Sponsorship
10:20 Initialising the Build
12:30 Tailwind CSS Setup
19:25 Building the Google Front Page (1/3)
37:08 Building the Avatar Component
43:49 Building the Google Front Page (2/3)
1:13:36 Building the Footer Component
1:29:50 Building the Google Front Page (3/3)
1:30:22 Building the Search Functionality
1:36:37 Building the Search Page
1:39:35 Building the Header Component
1:59:40 Building the Header Option(s) Component
2:13:56 Building the Search Results
2:46:07 Building the Pagination Component
2:54:58 Final Build Demo
3:00:15 Deploying the App using Vercel
3:06:07 Hosting on Hostinger
3:10:41 Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Google and it's 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 #tailwind #reactjs
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
This is so good! So much knowdlege shared freely. We are truly blessed in this times.
Really nice, clean and awesome developement! 🔥🔥🔥 Happy that TH-cam recently gave me you in the recommendations ❤️
Hi sonny! thank you so much for those builds, I have discouvered the beauty and power of React js through your clones and since then I have been coding with react js. I hope that you make one build using react and typescript.
Sonny your content is always awesome !! We need heroes like you
keep up the work sonny , Quality content gets repaid nicely ..your time is coming....patience...you are blessed
Yo Mailman these builds have a lot more content when you're not constantly being interrupted. Glad you have your own channel!
💯😉
Yes keep using Tailwindcss and Next.JS my favorite language of choice!! you are the greatest !!
This guy literally helped me get through React Js during this COVID-19
Another awesome content from Sonny! This guy is real Legend!
Just found the channel, great content man. Love your relaxed guidance, keep up with it and you will grow.
if anyone wants to know how to send env variables to hide your keys :
go to next.config.js :
module.exports = {
env: {
API_KEY: 'your API KEY ',
CONTEXT_KEY: 'your CONTEXT KEY '
},
}
search.js
:
const API_KEY = process.env.API_KEY
const CONTEXT_KEY = process.env.CONTEXT_KEY
thx :)
Seriously you are amazing. The way you explain complex things.. simply wow...Explain us ML/DL algorithms. 😍
The most clear, simple, practical on next js and tailwind ever. Brother Sonny could you please make tutorial on payment with googlepay or samsungpay etc..thanm you so much
Just completed this build. It was super awesome... All credit goes to our mentor Sonny!!. Take a bow ... #PAPAFAM is blazing !!! 👌👌❤😍
Qué bien! Al fin, subtitulos activados. Saludos desde Ecuador.
Another crazy project knocked out of the park!
Your tutorials are always on point. Very good material thank you. I missed one thing in this thoug: the suggestions while you typing your search word/phrase. But thank you anyway. Learning a lot from you.
LOVE all your videos!!! Keep it up 🔥 #PAPAfam
Hi Sonny, This is so cool. You make this easy to understand. Thanks, man. Keep it going!! 🚀
This is dope, I love your videos there are so amazing
Can you build a blog with react or next.js
I love your videos & tutorials man!
Really nice man as always!
Sonny is definitely saving lives with these builds, no joke
really, i built it using react js
Perfect....thx for your passion and inspiration
my first time here. pace was good and this was a good experience getting to know nextjs and tailwind css. like this format of quickly getting a know how of how things work.
waiting for some react native stuff.
Always love your content... thanks for ...... :)
Tailwind CSS is just amazing!
Awesome build ✌❤
Great content man!
Tailwind is really fun thanks a lot sunny bro.
Keep the Next.js and TailwindCSS coming!!!!
You make programming fun man
Man, you are the best!!!
top notch content as always🔥🔥🔥
Nice job , i am in love with your work, can you do an imdb clone?
Learned A lot Bro from You
Hey Sonny awesome video, I have a question. Can we deploy the app on netlify instead of vercel.
Amazing!! Thanks!!
Amazing teacher ❤
Hi Guru! At 34:23 you are writing custom css like hover:underline cursor:pointer. why not in div tag directly. it works right?.
Great video...Question for you: So using the ${selected && ..} => (using this highlights 'All' but even when you chose another of the option the 'All' still shows a highlighted line as well under it vs.. the ${selected & } => only shows the highlighted line under the selected option... Was this an oversight?
Sonny You are great !!!!
ypu are the best papa react
awesome, the best ever
Hey, thanks for the great content as always, i was wondering, in which scenario would you prefer Tailwind over styled component ?
Thanks! In my opinion, tailwind is my go to choice now always due to the design system that is put in place when using it, in addition it’s leaps better in regards to responsive design aswell!
@@SonnySangha i see, even don't you think it can go messy in className attribute sometimes with all thoses OOCSS from tailwind on it ?
2 things: refactor into react components to avoid this and also bundle reused CSS into global styles using @apply in tailwind!
thanks this is really great
Which software you use for adding whiteboard effects to show the components ?
you are so awesome bro!
*Ohhhhhhhhhoooo*
We got a legend here
Do we need to use context to have the search input value persist from the home page to the search page?
Tuning in from Nigeria
Sheeeesh. Multiple times in the build i started googling on the project instead of on the real google 🤣 Thats how good this build is
Haha passed the test!
One day will come when there will be no app remaining that he can clone. As he have been already cloned every app in world.
As he had build google gmail signal netflix amazon and lot more
This is the best channel to learn JS and it libraries like react next etc.
Thank you brother for your support and guidance
Amazing content
hi papa react, I enjoyed your tutorial but I'm getting some errors with vercel. Any help?
If we use react 18 with this clone, should we remove strict mode cuz it gives multiple renderings ?
has the best coding cont ever
Can u make beginner javascript tutorials along with these big builds? That would be amazing
First go learn javascript, react, next and then come back here. ;)
SOOOO NICEE
Thanks so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
How to do it in windows (npx create app fixed ) your github says no public projects
Is your course on papareact full stack web dev or just react js?
Good lookin bro thank you👌🏻 I know I’m late to the party but any way you can offer some insight as to why I’m getting less than 10 results per search? If I search something like “Hello” or “Hello World” I get millions of results back but anything else I search for results in some pretty lacking data. Tried rewatching and I’m still lost. Any idea where my error could be?
Hi Sonny, great tutorial, Tailwind is just amazing stuff. I'm having some problems deploying:
Failed to compile.
10:22:37 ModuleNotFoundError: Module not found: Error: Can't resolve 'next/Image' in '/vercel/workpath0/components'
10:22:37 > Build error occurred
10:22:37 Error: > Build failed because of webpack errors
10:22:37 at /vercel/workpath0/node_modules/next/dist/build/index.js:17:924
10:22:37 at runMicrotasks ()
10:22:37 at processTicksAndRejections (internal/process/task_queues.js:93:5)
10:22:37 at async Span.traceAsyncFn (/vercel/workpath0/node_modules/next/dist/telemetry/trace/trace.js:5:584)
Do you know what this could be related to?
Thank you!
Can't wait for the next tutorial!
can anybody explain how did the pagination work? my best guess is clicking the previous and next button causes a rerender and then the fetched results are different
@Sonny Sangha I am facing an issue when I type 'yarn' it is not working I am doing it in the vs-code terminal please help them.
Could you give me some advice?
SOME of tailwind class doesn't work in my project. I just follow your code. For example, h-3 doesn't work but h-4 works. justify-center work but justify-evenly doesn't work. How can I solve it?
Hey sunny you are doing awsome work buddy and I watching you for a while can you please build a Uber clone or Remitly clone
Thanks
Nice video!
How can we bold the searchInput text in the result.snippet?
Hey sonny, i am getting an error 403 with api key. i checked in the network tab and it says incorrect api key. i spent a day trying to resolve the issue but i could not?
For some reason h-5 does not work for me but h-8 does. Any reason why certain height utilities do not work as they do in your tutorial?
Man this is something
Bro, please make next video on how to use API in React-js by using Axios.
Is deploying free like in firebase ? Hosting free?
His voice is ❤️❤️
Bhaiyya aap tho kamaal kardhi
Best moment: "Someone said Bootstrap or tailwind" , Sonny barely hesitates and says ""Tailwind all the way, those guys want sponsors, Im down"
Hell yeah… 💯
best channel learn to react
Onde fica o balcão? quero fazer uma reclamação , porque o youtube não entregou esse vídeo a mais gente? que top cara!
Sonny you are good
hey anyone can help me i am not able to copy the object which i am getting from the server at the time of search build result,"object copy" option is not there only.
Tailwind CSS is Insane
I have made it through this vid, everything is working fine but I am not getting results Like Sonny's clone, like it gives me max 12-14 search results. Can anybody please explain that? Also a huge thanks to Sonny for dropping this video for absolutely free!😇
Edit: you just need to turn on the full web search in cse settings while getting your context API :)
You saved me alot of trouble searching for a solution. I was wondering why it was showing some weird results. Thanks
Thank you so much!
Hi, i am form bangladeshi, can you clone tailwind web site ?
thx
I dont know why but i keep getting the message in the console saying that " THE API_KEY IS NOT VALID" when i try to fetch the search results
You are my favorite
Has anyone gotten any errors with deployment? 17:31:31 Error: Command "yarn run build" exited with 1
Ya man I got it, can you tell how did you fix it?
Hi @Sonny Sangha and everyone, I have a problem to share. I have just graduated a month ago and I am struggling to find my first job during this covid period. I am actively applying for Data Analyst role but often got rejected. Would it be a bad thing if I take up another job that is not relavent to data anaylst at all , and the contract is 1 year. Will this be a waste of time for my career path? Any suggestions will be much appreciated. Thanks!
Personally I think you shouldn’t take a different job, you’ll regret this long term. If you can’t get a job, invest in the means to develop the skills SO you can get a job. Join us at www.papareact.com I’ll help you get a job dude!
Sir, I'm unable to see the effects of tailwind applied in the avatar component. Please help me.
Same problem with me. Did u get any solution?
which extension u used to write three time paragraph by p*3
Emmet it’s built in!
Hi Sonny, tailwind styles are not getting applied . I followed the doc & your guidance. I have windows system. Any suggestions?
Did you figure out?
Cause same happened to me:(
How do I make my client access to firebase last longer. It always runs out after a few weeks? Thanks.
You need to change the security rules if it concerns accessing firestore
Nextjs op bro ❤️❤️❤️❤️❤️🎉🎉🔥🔥🔥 rock react app best combination big app🔥🔥🔥🔥
Yho, it's been 2 days now trying to figure/solve this '/bin/sh: react-scripts: command not found' when I deploy with vercel and I am still stuck. Please help.
fixed after day 4 , I had to manipulate the ESLint config file for it to work. As stressful it can get, I still love coding :).
How do I get the source code
could you build google with a self database
kindly could any body tell me how to code this page with only css and html