🔴 Let's build a Google Clone with Tailwind CSS & NEXT.JS! (Responsive, SSR React, Pagination)

  Рет қаралды 246,214

Sonny Sangha

Sonny Sangha

Күн бұрын

Пікірлер: 176
@SonnySangha
@SonnySangha 2 жыл бұрын
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
@andyb9990
@andyb9990 3 жыл бұрын
Yo Mailman these builds have a lot more content when you're not constantly being interrupted. Glad you have your own channel!
@SonnySangha
@SonnySangha 3 жыл бұрын
💯😉
@javakian1
@javakian1 3 жыл бұрын
Yes keep using Tailwindcss and Next.JS my favorite language of choice!! you are the greatest !!
@maxmaksum4673
@maxmaksum4673 3 жыл бұрын
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
@MaybeBL1TZ
@MaybeBL1TZ 3 жыл бұрын
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
@turgaymukhtarzade568
@turgaymukhtarzade568 3 жыл бұрын
thx :)
@yogeshchaudhary621
@yogeshchaudhary621 3 жыл бұрын
Sonny your content is always awesome !! We need heroes like you
@abderrahimslam2892
@abderrahimslam2892 3 жыл бұрын
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.
@draftermyself
@draftermyself 3 жыл бұрын
Really nice, clean and awesome developement! 🔥🔥🔥 Happy that KZbin recently gave me you in the recommendations ❤️
@fonsusali
@fonsusali 3 жыл бұрын
Sonny is definitely saving lives with these builds, no joke
@slowprogrammer
@slowprogrammer 3 жыл бұрын
really, i built it using react js
@TheCodingOdyssey
@TheCodingOdyssey 3 жыл бұрын
This is so good! So much knowdlege shared freely. We are truly blessed in this times.
@Essa3q42
@Essa3q42 3 жыл бұрын
This guy literally helped me get through React Js during this COVID-19
@ankitapaul1470
@ankitapaul1470 3 жыл бұрын
Just completed this build. It was super awesome... All credit goes to our mentor Sonny!!. Take a bow ... #PAPAFAM is blazing !!! 👌👌❤😍
@Wenmy
@Wenmy 3 жыл бұрын
Qué bien! Al fin, subtitulos activados. Saludos desde Ecuador.
@teguhbadrusalam295
@teguhbadrusalam295 3 жыл бұрын
Another awesome content from Sonny! This guy is real Legend!
@ibrahimzahir7061
@ibrahimzahir7061 3 жыл бұрын
Seriously you are amazing. The way you explain complex things.. simply wow...Explain us ML/DL algorithms. 😍
@relaxationandpositivevibes8362
@relaxationandpositivevibes8362 3 жыл бұрын
keep up the work sonny , Quality content gets repaid nicely ..your time is coming....patience...you are blessed
@akshar-patel
@akshar-patel Жыл бұрын
Hi Sonny, This is so cool. You make this easy to understand. Thanks, man. Keep it going!! 🚀
@MaltonCanada
@MaltonCanada 3 жыл бұрын
Thanks so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
@sanketss84
@sanketss84 3 жыл бұрын
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.
@sanketss84
@sanketss84 3 жыл бұрын
waiting for some react native stuff.
@rodrigo5309
@rodrigo5309 3 жыл бұрын
Tailwind CSS is just amazing!
@deephousefridays1911
@deephousefridays1911 Жыл бұрын
Just found the channel, great content man. Love your relaxed guidance, keep up with it and you will grow.
@ThugLifeModafocah
@ThugLifeModafocah 2 жыл бұрын
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.
@bobbygraczyk4377
@bobbygraczyk4377 3 жыл бұрын
Has anyone gotten any errors with deployment? 17:31:31 Error: Command "yarn run build" exited with 1
@binaprajapati7709
@binaprajapati7709 3 жыл бұрын
Ya man I got it, can you tell how did you fix it?
@lifeisbeautifu1
@lifeisbeautifu1 2 жыл бұрын
top notch content as always🔥🔥🔥
@gursimranjeetgill3614
@gursimranjeetgill3614 3 жыл бұрын
I love your videos & tutorials man!
@isiahjones_33
@isiahjones_33 3 жыл бұрын
Another crazy project knocked out of the park!
@ebrahim-sani
@ebrahim-sani 3 жыл бұрын
Always love your content... thanks for ...... :)
@criszamarco2186
@criszamarco2186 3 жыл бұрын
Amazing!! Thanks!!
@NeverCodeAlone
@NeverCodeAlone 3 жыл бұрын
Perfect....thx for your passion and inspiration
@yoman9446
@yoman9446 3 жыл бұрын
You make programming fun man
@shopsrise5137
@shopsrise5137 3 жыл бұрын
LOVE all your videos!!! Keep it up 🔥 #PAPAfam
@Sim-Rig
@Sim-Rig 6 ай бұрын
youtube sent me here. i have no idea why as i understand 0 coding
@Deepsouthbro
@Deepsouthbro 3 жыл бұрын
Keep the Next.js and TailwindCSS coming!!!!
@KartavyaVg
@KartavyaVg 3 жыл бұрын
Which software you use for adding whiteboard effects to show the components ?
@vaibhavagrawal431
@vaibhavagrawal431 3 жыл бұрын
Amazing teacher ❤
@CodewithParthAnand
@CodewithParthAnand 3 жыл бұрын
@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.
@c9m853
@c9m853 3 жыл бұрын
Nice job , i am in love with your work, can you do an imdb clone?
@kevalshah7693
@kevalshah7693 2 жыл бұрын
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
@damandeepsingh8412
@damandeepsingh8412 3 жыл бұрын
Great content man!
@CorentinClichy
@CorentinClichy 3 жыл бұрын
Really nice man as always!
@csgoblins694
@csgoblins694 3 жыл бұрын
Learned A lot Bro from You
@imadrajwani4927
@imadrajwani4927 3 жыл бұрын
Best moment: "Someone said Bootstrap or tailwind" , Sonny barely hesitates and says ""Tailwind all the way, those guys want sponsors, Im down"
@SonnySangha
@SonnySangha 3 жыл бұрын
Hell yeah… 💯
@fabiotheodoro6168
@fabiotheodoro6168 3 жыл бұрын
Man, you are the best!!!
@vivekkumar36732
@vivekkumar36732 3 жыл бұрын
His voice is ❤️❤️
@varaprasad4163
@varaprasad4163 3 жыл бұрын
Hi Guru! At 34:23 you are writing custom css like hover:underline cursor:pointer. why not in div tag directly. it works right?.
@vihaankedia8134
@vihaankedia8134 3 жыл бұрын
has the best coding cont ever
@naimislamantor3781
@naimislamantor3781 3 жыл бұрын
Tailwind is really fun thanks a lot sunny bro.
@rendoesmath
@rendoesmath 3 жыл бұрын
*Ohhhhhhhhhoooo* We got a legend here
@adityakushwaha3316
@adityakushwaha3316 3 жыл бұрын
Sonny You are great !!!!
@petroschristodoulou7987
@petroschristodoulou7987 3 жыл бұрын
thanks this is really great
@andrewumole5083
@andrewumole5083 Жыл бұрын
Tuning in from Nigeria
@IllusionIRL
@IllusionIRL 3 жыл бұрын
Hey, thanks for the great content as always, i was wondering, in which scenario would you prefer Tailwind over styled component ?
@SonnySangha
@SonnySangha 3 жыл бұрын
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!
@IllusionIRL
@IllusionIRL 3 жыл бұрын
@@SonnySangha i see, even don't you think it can go messy in className attribute sometimes with all thoses OOCSS from tailwind on it ?
@SonnySangha
@SonnySangha 3 жыл бұрын
2 things: refactor into react components to avoid this and also bundle reused CSS into global styles using @apply in tailwind!
@temiloluwaogundiran2351
@temiloluwaogundiran2351 3 жыл бұрын
This is dope, I love your videos there are so amazing Can you build a blog with react or next.js
@androidenthusiast2806
@androidenthusiast2806 2 жыл бұрын
you are so awesome bro!
@AbbasMoharami
@AbbasMoharami 3 жыл бұрын
Awesome build ✌❤
@FitnessChaos
@FitnessChaos 3 жыл бұрын
Sheeeesh. Multiple times in the build i started googling on the project instead of on the real google 🤣 Thats how good this build is
@SonnySangha
@SonnySangha 3 жыл бұрын
Haha passed the test!
@salvatoremuroni2232
@salvatoremuroni2232 3 жыл бұрын
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!
@ajcortess
@ajcortess 2 жыл бұрын
best channel learn to react
@anon-403
@anon-403 3 жыл бұрын
Nice video!
@ZeusOP
@ZeusOP 3 жыл бұрын
Can you open other websites using this Google????
@SonnySangha
@SonnySangha 3 жыл бұрын
Yea!
@05forn
@05forn 3 жыл бұрын
Can u make beginner javascript tutorials along with these big builds? That would be amazing
@ramsesii6290
@ramsesii6290 2 жыл бұрын
First go learn javascript, react, next and then come back here. ;)
@maxmaksum4673
@maxmaksum4673 3 жыл бұрын
awesome, the best ever
@sanskaarpatni9137
@sanskaarpatni9137 3 жыл бұрын
Amazing content
@codewithyug1129
@codewithyug1129 3 жыл бұрын
Hey Sonny awesome video, I have a question. Can we deploy the app on netlify instead of vercel.
@adilskillz2694
@adilskillz2694 3 жыл бұрын
ypu are the best papa react
@Shalinity
@Shalinity 3 жыл бұрын
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 :)
@sanchitsreekumar8562
@sanchitsreekumar8562 3 жыл бұрын
You saved me alot of trouble searching for a solution. I was wondering why it was showing some weird results. Thanks
@teshell8317
@teshell8317 2 жыл бұрын
Thank you so much!
@michaellevi6743
@michaellevi6743 2 жыл бұрын
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?
@mrpixelk1735
@mrpixelk1735 Жыл бұрын
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?
@kylegardner653
@kylegardner653 3 жыл бұрын
Do we need to use context to have the search input value persist from the home page to the search page?
@MCAAlexKumar
@MCAAlexKumar 2 жыл бұрын
Man this is something
@nickmezacapa970
@nickmezacapa970 2 жыл бұрын
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?
@venuvenu2719
@venuvenu2719 3 жыл бұрын
Is your course on papareact full stack web dev or just react js?
@leonardohurovich3381
@leonardohurovich3381 2 жыл бұрын
If you're watching this now and got the following error: Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities Apparently it comes from the "I'm feeling lucky" button, and all you need to do to fix it is swap the ' for a '
@Jamesomnipotent
@Jamesomnipotent 3 жыл бұрын
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!
@SonnySangha
@SonnySangha 3 жыл бұрын
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!
@dinesh.p8642
@dinesh.p8642 3 жыл бұрын
Bhaiyya aap tho kamaal kardhi
@jarno2427
@jarno2427 3 жыл бұрын
How to do it in windows (npx create app fixed ) your github says no public projects
@김선명-r9b
@김선명-r9b 3 жыл бұрын
thx
@farzadsunavala5553
@farzadsunavala5553 3 жыл бұрын
How can we bold the searchInput text in the result.snippet?
@omowunmidaud7493
@omowunmidaud7493 3 жыл бұрын
hi papa react, I enjoyed your tutorial but I'm getting some errors with vercel. Any help?
@vikramnayyar2752
@vikramnayyar2752 3 жыл бұрын
Sonny can you please make a short video showing us how to secure API keys with .ENV files?!!!!!
@MaybeBL1TZ
@MaybeBL1TZ 3 жыл бұрын
Easy dude , go to next.config.js add this : module.exports = { env: { API_KEY: 'your API KEY ', CONTEXT_KEY: 'your CONTEXT KEY ' }, } and when you wanna use it go to your search.js const API_KEY = process.env.API_KEY const CONTEXT_KEY = process.env.CONTEXT_KEY
@vikramnayyar2752
@vikramnayyar2752 3 жыл бұрын
@@MaybeBL1TZ TYSM! Also do you know a FREE way to deploy Next JS Apps?😂 I tried using FireBase build couldn’t get it to work.
@MaybeBL1TZ
@MaybeBL1TZ 3 жыл бұрын
@@vikramnayyar2752 no need , vercel is free to use you can use it but just you can't have a custom domain name
@vikramnayyar2752
@vikramnayyar2752 3 жыл бұрын
@@MaybeBL1TZ Tysm! I thought it was just a paid brand deal thing so would always click off before the deployment stage. I really appreciate the response!
@vikramnayyar2752
@vikramnayyar2752 3 жыл бұрын
@@MaybeBL1TZ I keep getting this error when trying to deploy: ModuleNotFoundError: Module not found: Error: Can't resolve 'next/Router' in '/vercel/path0/google-clone/pages'
@farnoodlotfali4912
@farnoodlotfali4912 3 жыл бұрын
SOOOO NICEE
@khattasallaman337
@khattasallaman337 3 жыл бұрын
You are my favorite
@solo.traveller.28
@solo.traveller.28 3 жыл бұрын
which extension u used to write three time paragraph by p*3
@SonnySangha
@SonnySangha 3 жыл бұрын
Emmet it’s built in!
@skp7349
@skp7349 3 жыл бұрын
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?
@kylegardner653
@kylegardner653 3 жыл бұрын
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?
@anushachokka545
@anushachokka545 3 жыл бұрын
Hi Sonny, tailwind styles are not getting applied . I followed the doc & your guidance. I have windows system. Any suggestions?
@Shalinity
@Shalinity 3 жыл бұрын
Did you figure out?
@Shalinity
@Shalinity 3 жыл бұрын
Cause same happened to me:(
@akshayshewate5185
@akshayshewate5185 3 жыл бұрын
Nextjs op bro ❤️❤️❤️❤️❤️🎉🎉🔥🔥🔥 rock react app best combination big app🔥🔥🔥🔥
@mekafka6756
@mekafka6756 3 жыл бұрын
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
@sahilgupta5041
@sahilgupta5041 3 жыл бұрын
Tailwind CSS is Insane
@getemtanvir
@getemtanvir 3 жыл бұрын
sorry for that PAPA REACT 2:55:13
@sahilgupta5041
@sahilgupta5041 3 жыл бұрын
Sir, I'm unable to see the effects of tailwind applied in the avatar component. Please help me.
@the_gamer__07
@the_gamer__07 3 жыл бұрын
Same problem with me. Did u get any solution?
@BABYLOGIKAY
@BABYLOGIKAY 2 жыл бұрын
How do I get the source code
@fumomodo5841
@fumomodo5841 3 жыл бұрын
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
@milesrykerodazie171
@milesrykerodazie171 3 жыл бұрын
Sonny you are good
@thabisadingani7373
@thabisadingani7373 3 жыл бұрын
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.
@thabisadingani7373
@thabisadingani7373 3 жыл бұрын
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 :).
@giorgos-4515
@giorgos-4515 3 жыл бұрын
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
@jyothyelizabethmartin4927
@jyothyelizabethmartin4927 3 жыл бұрын
Can you make a python tuitorial?
@vihaankedia8134
@vihaankedia8134 3 жыл бұрын
could you build google with a self database
@subhamranjansahoo2725
@subhamranjansahoo2725 3 жыл бұрын
Can you make google calender clone
@mahmadmustaq4306
@mahmadmustaq4306 3 жыл бұрын
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.
99.9% IMPOSSIBLE
00:24
STORROR
Рет қаралды 31 МЛН
Cat mode and a glass of water #family #humor #fun
00:22
Kotiki_Z
Рет қаралды 42 МЛН
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 7 МЛН
9 Web Design Trends 2025 to Spruce Up Your Site
16:33
Showit
Рет қаралды 76 М.
How To Debug React Apps Like A Senior Developer
21:07
Web Dev Simplified
Рет қаралды 191 М.
99.9% IMPOSSIBLE
00:24
STORROR
Рет қаралды 31 МЛН