πŸ”΄ Let's build Whatsapp 2.0 with NEXT.JS! (1-1 Messaging, Live Status, Styled-Components, React.JS)

  ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 1,305,034

Sonny Sangha

Sonny Sangha

Π”Π΅Π½ΡŒ Ρ‚ΠΎΠΌΡƒ

🚨 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...
Check out Hostinger πŸ‘‰ www.hostinger.com/sonny
SPECIAL DISCOUNT: Use code SONNY for 7% OFF Annual Plans!
Join me as I build Whatsapp 2.0 with NEXT.JS! (with 1-1 Messaging, Live Status, React.js & Styled-Components) || πŸ”₯ Powered by Firebase!
πŸŽ™οΈ 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:35 Build Showcase
02:15 Hostinger Sponsorship
05:07 Next.js Introduction
05:59 Starting the Build
07:43 Tabnine Sponsorship
11:00 Continuing the Build
15:42 Implementing Styled Components
17:56 Creating the chat.js Page
21:03 Building the Sidebar Component (1/3)
48:30 Setting up Firebase
49:41 Setting up Firestore Database
56:25 Building the Sidebar Component (2/3)
1:03:57 Building the login.js Page
1:15:49 Building the Loading Component
1:20:54 Capturing and Storing User's Details
1:26:17 Building the Sidebar Component (3/3)
1:40:46 Building the Chat Component (1/2)
1:46:08 Building the getRecipientEmail Function
1:56:54 Building the Chat Component (2/2)
2:00:28 Building the [id] Component
2:22:37 Building the ChatScreen Component (1/3)
2:40:50 Creating the Message Component
2:41:53 Building the ChatScreen Component (2/3)
3:18:18 Building the Message Component
3:24:28 Building the ChatScreen Component (3/3)
3:27:57 Final Build Demo
3:28:53 Deploying to Vercel
3:37:22 Hosting on Hostinger
3:46:28 Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with WhatsApp 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.
#reactjs #nextjs #whatsapp

ΠšΠžΠœΠ•ΠΠ’ΠΠ Π†: 415
@SonnySangha
@SonnySangha Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
πŸ“¬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) πŸ‘‰ links.papareact.com/university
@jasonmai8695
@jasonmai8695 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Man Sonny, I was the worst in my class in high school, I've always wanted to be a programmer because I like logic, but every one of my friends said I suck at math and could not possibly be a programmer. But then I saw one of your videos with Qazi, I learn bits by bits through the videos, I worked as a marketing employee at a company I don't even like and now, after 1.5 years, I can build full-stack websites, work at a job I love ( even though the money is still to come ) thanks to you guys. I thank you
@SonnySangha
@SonnySangha 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
You are absolutely welcome dude!!! Keep on crushing it!!
@damaged804
@damaged804 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
Anything you wanna recommend for someone who wants to achieve the same as you?
@Vegetoyesh
@Vegetoyesh 8 місяців Ρ‚ΠΎΠΌΡƒ
@@damaged804 Stop asking. Start doing..
@LongBoy.0
@LongBoy.0 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
This guy is out here doing more than what high school or college ever did for me lol
@lPoliticallyFye
@lPoliticallyFye 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
facts
@aimanyounis8387
@aimanyounis8387 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
True
@tawsifhaque9360
@tawsifhaque9360 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
more than cs degree in college, agreed
@pedrolomeli5313
@pedrolomeli5313 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
@@aimanyounis8387 hbblbbuhh
@biksmokedoppermann8556
@biksmokedoppermann8556 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
@@pedrolomeli5313 ol Ok o
@SanjeevShrestha
@SanjeevShrestha 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Thank you Sonny! You are awesome! Always learning new with you!
@nishanthdipali6838
@nishanthdipali6838 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Amazing build Sonny and thanks for the one to one chat
@danieljayne8623
@danieljayne8623 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Just discovered your channel. Currently building a Google Keep clone in CRA and you've inspired me to give the stack you're using a go while doing that as it looks very slick! Keep up the good work man, no wonder you're growing fast.
@douglasduartecabral9412
@douglasduartecabral9412 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
P
@douglasduartecabral9412
@douglasduartecabral9412 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
P
@douglasduartecabral9412
@douglasduartecabral9412 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
P
@agustinlavalla8892
@agustinlavalla8892 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
that's excactly what I was waiting for. Thanks CRACK!
@pulindrambharath9189
@pulindrambharath9189 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Amazing Sonny ... Love your content ❀️
@shivampatel5989
@shivampatel5989 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Your clone projects helped me so much!! Great source ever
@tephlondandada156
@tephlondandada156 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
Do you know how to fix this error? I keep getting it when I run 'yarn start' "Failed to compile. Module not found: Error: Can't resolve '../features/counter/counterSlice' in '/Users/felixrumah/Desktop/mobile-app/netflix/netflix-build-youtube/src/app' ERROR in ./src/app/store.js 4:0-62 Module not found: Error: Can't resolve '../features/counter/counterSlice' in '/Users/felixrumah/Desktop/mobile-app/netflix/netflix-build-youtube/src/app' webpack compiled with 1 error"
@eleemthapa2518
@eleemthapa2518 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
sonny u are helping a lot a for our career thanks for helping us man love you
@kwabenaankamah5675
@kwabenaankamah5675 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Sonny you are a beast, words can not describe how much I appreciate your content
@csslectures
@csslectures 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
This is the best channel I have ever come across. Thank yo sonny for such great clones in react. keep uploading. awesome work.
@whisky8496
@whisky8496 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
You are amazing! I am new to your channel and everything is just hyping me up! I love the vibes! I'm glad I found your channel! I was looking for something else, and whenever I open a video on your channel, I CAN'T STOP DUDE! I JUST CAN'T STOP MYSELF! I hope you achieve your goal on whatever you are planning for. Thank you so much for your effort and this genuine content! Subscribed!
@user-vd6im6fc8r
@user-vd6im6fc8r Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
²²ìioìpl9
@rohandeysarkar8443
@rohandeysarkar8443 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
This week I was like "when will sonny do next js". And kaboom πŸ’£ Love u bro πŸ’œπŸ’œ
@jestornogueiro5862
@jestornogueiro5862 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Next level, Loved it ❀️πŸ”₯
@girikrishna7235
@girikrishna7235 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Sonny I love u mahn Istg I just completed building this clone and I can’t thank you enough❀️😭. Means a lot bro Waiting for more of your videos Take care bro.
@shivammakwan6409
@shivammakwan6409 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Really enjoyed thanks for this ❀️
@ammesidd6669
@ammesidd6669 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
Hey @Sonny Sangha your videos are amazing , helpful and easily implemented . Kindly make more tutorials for react native...
@dalestewart
@dalestewart Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
I'm smashing the thumbs up!. Great real world debugging session.
@emmanuelogbonnaukah8018
@emmanuelogbonnaukah8018 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
loving your work all the way from Nigeria Sonny
@Lokoislive
@Lokoislive 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Great clone tutorial, will you do a slider clone but this time with typescript?
@Rentaro_dev
@Rentaro_dev 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
I have paid fees for whole school and college and i have learnt more for free from this guy Th@nks Man
@flagshipbuilds
@flagshipbuilds 9 місяців Ρ‚ΠΎΠΌΡƒ
Sonny, great work! How much calculus do you use for coding? I use JavaScript with HTML and CSS now and have not had to come across it yet but would like to know if I need to know it for full stack web developement?
@goldensonu15
@goldensonu15 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
You are absolutely AWESOME :) Great man... U r just saving so many Lives :) Thank u...
@lostboy8154
@lostboy8154 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Sonny your content is amazing man πŸ”₯
@marwenbentalebali8310
@marwenbentalebali8310 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
I tried this example with firebase 9 and It's soo cool. lastSeen: 25 juillet 2022 Γ  21:12:08 UTC+2
@snssatyabhagavan
@snssatyabhagavan 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
I thought we could not do the one to one chat in a day. But you are simply nailed it.
@xtrzne
@xtrzne 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
quick question if you can help a lost soul: does this app send constant GET requests to be 'real-time'? How do you auto receive a message when some sends you one (without a page reload)? thanks :)
@Maxxxxxxxxxxxxxxxxxxxxxxxxxxxx
@Maxxxxxxxxxxxxxxxxxxxxxxxxxxxx 4 місяці Ρ‚ΠΎΠΌΡƒ
⁠@@xtrznesockets
@HolmesPatrick
@HolmesPatrick 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Great Sonny Sangha. Thanks for sharing knowledge.
@asamad9645
@asamad9645 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
u sense the trend much b4 the time..... keep uploading on next.js
@raoulguillermo
@raoulguillermo 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Thanks sooo much! Love it. Quick question. Safari doesn't seem to prevent the post from refreshing the page. Any idea?
@MarcusHammarberg
@MarcusHammarberg 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
TabNine is amazing. But what I like is that it's not making me faster only but also more accurate.
@xtrzne
@xtrzne 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
quick question if you can help a lost soul: does this app send constant GET requests to be 'real-time'? How do you auto receive a message when some sends you one (without a page reload)? thanks :)
@wonganikaunda7704
@wonganikaunda7704 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Channel discovered...awesome stuff
@yashchauhan5710
@yashchauhan5710 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
1:37:07 thattrick made my day
@maxmaksum4673
@maxmaksum4673 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
best of the best...simple, easy to follow,
@programming5383
@programming5383 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Thank you so much for all this content!!! I'm learning so much (and i was already good with React/Nextjs) Can you please share your favorite music list? I would love to give it a try :)
@SonnySangha
@SonnySangha 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Thanks so much! Sign up to the newsletter in the description and we send over the playlist for free!
@programming5383
@programming5383 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Never mind you did it later in the video :) www.epidemicsound.com/playlist/dguvxg1wo7ye19gdfa4y02s7s7xd8gqp/
@RandomMusicD
@RandomMusicD 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Dude!! you are amazing, thanks for all.
@digiporn7665
@digiporn7665 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Eu amo esse tipo de vΓ­deo! atΓ© me inscrevi.
@rdavil8361
@rdavil8361 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Loved it. Subscribed. ❀️❀️
@jaysendraneyjaysendraney2036
@jaysendraneyjaysendraney2036 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
I'm just watching this video and I'm really loving it but I'll like to understand firebase very well.
@reiniervarkevisser
@reiniervarkevisser 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Awesome Tutorial, Does sombody else having problems of not showing the avatar in the Whatsapp clone sidebar? n the sidebar header it is working fine
@LucianoSoares85
@LucianoSoares85 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Love your content. I would love to subscribe to your course, but in my currency it is very expensive.
@serveshchaturvedi2034
@serveshchaturvedi2034 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Hey Sonny, thanks for the wonderful video. I've a query. When u use the useffect in _app.js, is it not supposed to capture other users because I'm not able to render the user avatar image from photoURL. Also, there is only the logged in user in my firebase users collection. Please help me
@archimedesredes
@archimedesredes 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Thank you very much for the content.
@totalxasweare4784
@totalxasweare4784 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
yo sonny i didnt expect that u will answer but my question is why we use stringify at 2:17:29 what problem does it solve and if we send data in backend at what point in time ? sorry for eng btw)))
@maxmaksum4673
@maxmaksum4673 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
This is incredible..such high quality tutorial.
@rickyrozario1577
@rickyrozario1577 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Hi Sonny, great build man! I am stuck, how did you fix the Server Side Rendering? Mine is just loads and takes time to show the messages. Can anyone help me please?
@MarcusHammarberg
@MarcusHammarberg 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Amazing stuff as always! Learned SOOO much. Question: checking in Firebase keys? Is that ok or dangerous?
@SonnySangha
@SonnySangha 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Firebase public keys are all good! (The config is okay)
@xtrzne
@xtrzne 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
quick question if you can help a lost soul: does this app send constant GET requests to be 'real-time'? How do you auto receive a message when some sends you one (without a page reload)? thanks :)
@alicodes22
@alicodes22 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Loved the clone ✨ πŸš€
@snssatyabhagavan
@snssatyabhagavan 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Your clone was also amazing bro Starbucks and tesla.
@alicodes22
@alicodes22 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
@@snssatyabhagavan ❀️
@nr7343
@nr7343 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
nice, Some questions, why not render the side menu in _app assuming it is on a few pages? Check Email Can I activate the function in the side menu once ?! And user authentication really should always bring the HOOK and not do in one place?
@pjos2981
@pjos2981 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Mind boggling channel. Aag laga diya
@wellington18m
@wellington18m 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Hello there. Hey Sonny I was wondering if you could make a Point of sale system and inventory tutorial for mobiles . I love for work man. You are truly amazing . Thanks!
@NourMohamed-wy2jl
@NourMohamed-wy2jl 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
What is the best carousel library to use with next.js project?
@yannicksims9262
@yannicksims9262 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
who is this guy ? who is Sonny Damn. you're amazing Bro... Thanks for everything and your explanations. I hope i will one day do the same as you and inspire people just like you're doing
@xtrzne
@xtrzne 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
THANK YOU Sonny! quick question: does this app send constant GET requests to be 'real-time'? How does you auto receive a message when some sends you one (without a page reload)?
@sorriraindaeomelhorremedio3520
@sorriraindaeomelhorremedio3520 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
ParabΓ©ns pelo conteΓΊdo
@shaikhsanuar5339
@shaikhsanuar5339 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Wow this is insane!!
@sadiedickinson7151
@sadiedickinson7151 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
I CAN'T STOP DUDE! I JUST CAN'T STOP MYSELF!
@Mikkelzu
@Mikkelzu 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
My main gripe with these styled guides/tutorials is that it's incredibly distracting re-watching a livestream and every few minutes something happens like a donation or whatever that causes scene changes and a random topic that's not about what you're doing. might just be me though lol. other than that, good stuff though I'd do some things slightly differently
@LUKFUNTV
@LUKFUNTV 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Once you are not a beginner anymore, u don't feel lost.. But yes it's annoying . But I just skipp those moments 😁
@Mikkelzu
@Mikkelzu 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
@@LUKFUNTV 8 years in the industry professionally so i doubt I’m a beginner.
@LUKFUNTV
@LUKFUNTV 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
@@Mikkelzu U got me wrong totally.. It was my experience...
@LUKFUNTV
@LUKFUNTV 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Now I know that People could get annoyed as a beginner As well With 8+ years of experience... I presumed only beginnerrs would feel like that... Sorry..
@whotfami3368
@whotfami3368 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
It doesn't matter. This videos are for free so why to complain about that? It's the people that raises a youtuber's channel... If you don't like that you can pay for a course
@IwanSetiawan-yc8gt
@IwanSetiawan-yc8gt 4 місяці Ρ‚ΠΎΠΌΡƒ
Okey lanjut bosku πŸ‘πŸ™
@blackdeath7678
@blackdeath7678 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Sonny, I have a job because of you man πŸ’™ Thank you soooo much bro πŸ™
@andreacedeno2974
@andreacedeno2974 8 місяців Ρ‚ΠΎΠΌΡƒ
Espectacular 😊
@aayushdadhich9036
@aayushdadhich9036 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Does useAuthState gets current state from local storage/cookies of client?
@dalestewart
@dalestewart Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
A true professional programmer. Yes, Sonny => Keep on bringing the fire.
@ItsYourBoyMRAR
@ItsYourBoyMRAR 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Great Clone On Great Keep It Up
@tawsifhaque9360
@tawsifhaque9360 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
is this beginner friendly? Can i follow along this video if i know react only, without any knowledge of next js?
@kukudavid6646
@kukudavid6646 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Hey PapaReact, I'm just watching this video and I'm really loving it but I'll like to understand firebase very well to be able to use the various functions like getting a snapshot, useAuthState and the likes. Please where can I learn them from?
@jasonmai8695
@jasonmai8695 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
I think you can learn by reading the firebase documents, although it's not very clear you can always read the articles and examples, or learn about firebase react libraries
@simpleshorts389
@simpleshorts389 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Hey papa react it is possible to make chrome extension from Nextjs if is possible then can you make a dedicated video on this Great Experience when i see your video 🀟
@crazyzigi2749
@crazyzigi2749 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
How do you connect ist with your cms?
@aaronhawkins9141
@aaronhawkins9141 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Utopia Ecosystem is what you should know about cybersecurity and anonymity!
@emreaka3965
@emreaka3965 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
Thanks :)
@zahanahmad456
@zahanahmad456 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
What software do you use to go live and record this ?
@best1games2studio3
@best1games2studio3 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
I have created this exactly how you did it. I have no clue what and how works. Furthermore, the initial load of the first chat clicked on after a login takes 6 seconds to load and I have no clue how to change it.
@chandrum2901
@chandrum2901 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Bro I need your help, How to passing data from login page to signup page using react -router πŸ™ Please πŸ₯Ί help me
@VOLVIENDOANOSOTROSMISMOS
@VOLVIENDOANOSOTROSMISMOS 7 місяців Ρ‚ΠΎΠΌΡƒ
Very good
@zeeshan9991
@zeeshan9991 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
dude you made my day. ;)
@gurparkarsingh9690
@gurparkarsingh9690 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
Man you are genius
@pedroelton7040
@pedroelton7040 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
About the _rfce code snippet... Mine doesn't work. Only rfce, without the underscore. Did it change? Non of the ES7+ extension code snippets with underscore works here, only without it... I need to remove the auto import every single time. Bit annoying.
@mayankk2800
@mayankk2800 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
This is next level. Best channel on UKposts
@yeasinarafat1694
@yeasinarafat1694 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
What did use to make?
@danielbernstein6792
@danielbernstein6792 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
How does Sonny auto import components?
@swarangisatpute2153
@swarangisatpute2153 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Idk why I didn't get the same issue during the login page and I'm not being redirected to the login page as you are what could be the issue?
@alexbork8659
@alexbork8659 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
SUPER .............. !!!!!!!!!! You are the BEST ............... Ok from Russia !!!!!!!!
@deanbarber8851
@deanbarber8851 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Thank you for the great tutorial Sonny I am having issues with running the app on mobile web browsers. The app works perfectly fine on my laptop but when I use it on my phone the display is completely broken. Can you please tell me how I can solve this issue?
@SonnySangha
@SonnySangha 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Watch the Google clone tomorrow!
@GajendraSingh-lv3jw
@GajendraSingh-lv3jw 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
use media queries in css .. pages are broken because the size of the display in both devices are different. You should make responsive site if you want open it in multiple devices..
@xtrzne
@xtrzne 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
quick question if you can help a lost soul: does this app send constant GET requests to be 'real-time'? How do you auto receive a message when some sends you one (without a page reload)? thanks :)
@gopireddy7600
@gopireddy7600 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
Hi Sonny, this is good material. Please consider shrinking the video by half so it's more engaging. I think you can if you keep it to just the technical stuff.
@SonnySangha
@SonnySangha Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
We’ve done just that! Check out the next.js crash course in my channel!
@joaosaraiva1998
@joaosaraiva1998 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
@@SonnySangha with this code can we still get a stable version or it needs changes to make it stable now? Im asking this because this tuturial is 1 year old already
@codewithyug1129
@codewithyug1129 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Hey Sonny, awesome build. I have 2 questions: β€’ Can we use Netlify instead of Vercel and hostinger β€’ Why was I banned from the discord server when I didn't violate any rule
@SonnySangha
@SonnySangha 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Most likely age!
@codewithyug1129
@codewithyug1129 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
@@SonnySangha oh ok! But can we use Netlify or heroku instead of Vercel and hostinger? πŸ€”
@kalpitjindal688
@kalpitjindal688 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
congratulation :)
@shajin_KP
@shajin_KP 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Love!
@maxmaksum4673
@maxmaksum4673 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Great and awesome...
@pranitmoghe2731
@pranitmoghe2731 11 місяців Ρ‚ΠΎΠΌΡƒ
My messages are not getting aligned properly according to sender and reciever. I tried but it doesnt work for me , also rechecked the code.
@therealltrader2346
@therealltrader2346 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
brother ive been trying to resolve scroling in message container affter using scrollIntoView but its not working literally please help me i want to show this project in my upcoming internship interview
@jacopoguzzo4097
@jacopoguzzo4097 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
How did u make VSCode autoimport all the components once you write the tag in the JSX?
@SonnySangha
@SonnySangha 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Ctrl+spacebar at the end of the component name to bring up autocomplete and then it’s the first option usually!
@spicein_life
@spicein_life 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
At 3:10:15 time you forget to import getRecipientEmail from file
@brotat0
@brotat0 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Awesome video
@chandrashekharkotekar8453
@chandrashekharkotekar8453 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Hi, I am new to front-end development (dipping my toes in it after 5-6 years). I have one question that - what will happen if we keep style related code outside JS in external CSS file? How will it impact SSR? If I want to use Bootstrap for styling then most probably I will keep all the styling related information in CSS. Please enlighten. Many Thanks
@kader8811
@kader8811 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Nobody answer to you. becoz they are not programmers. They need money..
@debarajstha
@debarajstha 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
I have get the same bug I.e not getting users from chat database how to fix this...
@digiporn7665
@digiporn7665 2 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Bom demais isso, show
@axelblaze6379
@axelblaze6379 3 Ρ€ΠΎΠΊΠΈ Ρ‚ΠΎΠΌΡƒ
Can anybody help me when I try to add link of an image for the Logo, the picture don't display no matter which link I put.
@iamgroot494
@iamgroot494 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
I keep getting "Unhandled Runtime Error" Error: Hydration failed because the initial UI does not match what was rendered on the server. This happens during Loading. ( ) Where am I going wrong?
@jatingoyal853
@jatingoyal853 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
was working good in localhost 3000. Error 504 coming up after i deployed the app on vercel . how to resolve it ? plz help
@priyankaroberts1093
@priyankaroberts1093 Π Ρ–ΠΊ Ρ‚ΠΎΠΌΡƒ
Hey Jatin I hope your question was resolved. I wanted you know if you have been working on any react projects recently and would be interested in an internship/job opportunity in software development ?
@Hans_Magnusson
@Hans_Magnusson 5 місяців Ρ‚ΠΎΠΌΡƒ
So you just told me how WhatsApp is the ultimate back door πŸšͺ! πŸ˜‚πŸ˜‚πŸ˜‚
πŸ”΄ Let’s build a WEB SCRAPER with React! (Next.js 13.2, Firebase, Webhooks, TypeScript, Bright Data)
3:29:32
πŸ”΄ Let's build Deliveroo 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)
3:46:20
Sonny Sangha
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 836 тис.
АртСм ΠŸΠΈΠ²ΠΎΠ²Π°Ρ€ΠΎΠ² Ρ… Klavdia Petrivna - Π‘Π°Ρ€Π°Π±Π°Π½
03:16
Π­Ρ‚ΠΎΠ³ΠΎ ΠžΡ‚ НСго Никто НС ОТидал πŸ˜‚
00:19
Π“Π»Π΅Π± Π Π°Π½Π΄Π°Π»Π°ΠΉΠ½Π΅Π½
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 4,8 ΠΌΠ»Π½
My Ultimate Software Developer Desk & Office Setup Tour (Dubai 2024)
41:16
Sonny Sangha
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 6 тис.
Unveiling My Secret To Charging Software Clients | Vlog #8
13:26
Sonny Sangha
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 8 тис.
Π Π°Π·Π±ΠΈΡ€Π°Π΅ΠΌ основы Kafka ΠΈ RabbitMQ
26:54
Digital train | Alex Babin
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 6 тис.
πŸ”΄ Let's build Google 2.0 with Tailwind CSS & NEXT.JS! (Responsive, SSR React, Pagination)
3:12:44
Sonny Sangha
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 204 тис.
New OpenAI Model 'Imminent' and AI Stakes Get Raised (plus Med Gemini, GPT 2 Chatbot and Scale AI)
20:03
AI Explained
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 81 тис.
πŸ”΄ Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)
3:56:48
Data Modeling for Power BI [Full Course] πŸ“Š
2:34:41
Pragmatic Works
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Ρ–Π² 3,1 ΠΌΠ»Π½
Erim Kaur’s Formula for Luxury Brand Success - ByErim Founder reveals her 7-Figure blueprint | EP.16
40:23
πŸ”΄ Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete)
3:45:06