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

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: www.papareact.com/course
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!
🖥️ CODE
Get the code for my builds here: links.papareact.com/github
🎙️ 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
    @jasonmai86952 жыл бұрын

    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.03 жыл бұрын

    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
    @SanjeevShrestha3 жыл бұрын

    Thank you Sonny! You are awesome! Always learning new with you!

  • @shivampatel5989
    @shivampatel59893 жыл бұрын

    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"

  • @agustinlavalla8892
    @agustinlavalla88923 жыл бұрын

    that's excactly what I was waiting for. Thanks CRACK!

  • @pulindrambharath9189
    @pulindrambharath91893 жыл бұрын

    Amazing Sonny ... Love your content ❤️

  • @nishanthdipali6838
    @nishanthdipali68383 жыл бұрын

    Amazing build Sonny and thanks for the one to one chat

  • @eleemthapa2518
    @eleemthapa25183 жыл бұрын

    sonny u are helping a lot a for our career thanks for helping us man love you

  • @yashchauhan5710
    @yashchauhan57103 жыл бұрын

    1:37:07 thattrick made my day

  • @csslectures
    @csslectures2 жыл бұрын

    This is the best channel I have ever come across. Thank yo sonny for such great clones in react. keep uploading. awesome work.

  • @jestornogueiro5862
    @jestornogueiro58623 жыл бұрын

    Next level, Loved it ❤️🔥

  • @kwabenaankamah5675
    @kwabenaankamah56752 жыл бұрын

    Sonny you are a beast, words can not describe how much I appreciate your content

  • @lostboy8154
    @lostboy81542 жыл бұрын

    Sonny your content is amazing man 🔥

  • @emmanuelogbonnaukah8018
    @emmanuelogbonnaukah80182 жыл бұрын

    loving your work all the way from Nigeria Sonny

  • @danieljayne8623
    @danieljayne86233 жыл бұрын

    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

  • @shivammakwan6409
    @shivammakwan64093 жыл бұрын

    Really enjoyed thanks for this ❤️

  • @dalestewart
    @dalestewart Жыл бұрын

    I'm smashing the thumbs up!. Great real world debugging session.

  • @Rentaro_dev
    @Rentaro_dev3 жыл бұрын

    I have paid fees for whole school and college and i have learnt more for free from this guy Th@nks Man

  • @rohandeysarkar8443
    @rohandeysarkar84433 жыл бұрын

    This week I was like "when will sonny do next js". And kaboom 💣 Love u bro 💜💜

  • @RandomMusicD
    @RandomMusicD2 жыл бұрын

    Dude!! you are amazing, thanks for all.

  • @HolmesPatrick
    @HolmesPatrick2 жыл бұрын

    Great Sonny Sangha. Thanks for sharing knowledge.

  • @ammesidd6669
    @ammesidd6669 Жыл бұрын

    Hey @Sonny Sangha your videos are amazing , helpful and easily implemented . Kindly make more tutorials for react native...

  • @rdavil8361
    @rdavil83613 жыл бұрын

    Loved it. Subscribed. ❤️❤️

  • @wonganikaunda7704
    @wonganikaunda77043 жыл бұрын

    Channel discovered...awesome stuff

  • @goldensonu15
    @goldensonu153 жыл бұрын

    You are absolutely AWESOME :) Great man... U r just saving so many Lives :) Thank u...

  • @girikrishna7235
    @girikrishna72352 жыл бұрын

    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.

  • @maxmaksum4673
    @maxmaksum46732 жыл бұрын

    best of the best...simple, easy to follow,

  • @NarutoNineToadSage
    @NarutoNineToadSage3 жыл бұрын

    Great clone tutorial, will you do a slider clone but this time with typescript?

  • @digiporn7665
    @digiporn76652 жыл бұрын

    Eu amo esse tipo de vídeo! até me inscrevi.

  • @asamad9645
    @asamad96453 жыл бұрын

    u sense the trend much b4 the time..... keep uploading on next.js

  • @faizanmohiuddin
    @faizanmohiuddin9 ай бұрын

    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?

  • @archimedesredes
    @archimedesredes2 жыл бұрын

    Thank you very much for the content.

  • @whisky8496
    @whisky84963 жыл бұрын

    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

  • @MarcusHammarberg
    @MarcusHammarberg3 жыл бұрын

    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 :)

  • @maxmaksum4673
    @maxmaksum46733 жыл бұрын

    This is incredible..such high quality tutorial.

  • @raoulguillermo
    @raoulguillermo2 жыл бұрын

    Thanks sooo much! Love it. Quick question. Safari doesn't seem to prevent the post from refreshing the page. Any idea?

  • @snssatyabhagavan
    @snssatyabhagavan3 жыл бұрын

    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

    3 ай бұрын

    ⁠@@xtrznesockets

  • @alicodes22
    @alicodes223 жыл бұрын

    Loved the clone ✨ 🚀

  • @snssatyabhagavan

    @snssatyabhagavan

    3 жыл бұрын

    Your clone was also amazing bro Starbucks and tesla.

  • @alicodes22

    @alicodes22

    3 жыл бұрын

    @@snssatyabhagavan ❤️

  • @programming5383
    @programming53832 жыл бұрын

    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/

  • @marwenbentalebali8310
    @marwenbentalebali8310 Жыл бұрын

    I tried this example with firebase 9 and It's soo cool. lastSeen: 25 juillet 2022 à 21:12:08 UTC+2

  • @sorriraindaeomelhorremedio3520
    @sorriraindaeomelhorremedio35202 жыл бұрын

    Parabéns pelo conteúdo

  • @ItsYourBoyMRAR
    @ItsYourBoyMRAR3 жыл бұрын

    Great Clone On Great Keep It Up

  • @MarcusHammarberg
    @MarcusHammarberg3 жыл бұрын

    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 :)

  • @shaikhsanuar5339
    @shaikhsanuar53392 жыл бұрын

    Wow this is insane!!

  • @pjos2981
    @pjos29813 жыл бұрын

    Mind boggling channel. Aag laga diya

  • @LucianoSoares85
    @LucianoSoares853 жыл бұрын

    Love your content. I would love to subscribe to your course, but in my currency it is very expensive.

  • @sadiedickinson7151
    @sadiedickinson7151 Жыл бұрын

    I CAN'T STOP DUDE! I JUST CAN'T STOP MYSELF!

  • @rickyrozario1577
    @rickyrozario15773 жыл бұрын

    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?

  • @blackdeath7678
    @blackdeath76782 жыл бұрын

    Sonny, I have a job because of you man 💙 Thank you soooo much bro 🙏

  • @serveshchaturvedi2034
    @serveshchaturvedi20342 жыл бұрын

    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

  • @andreacedeno2974
    @andreacedeno29747 ай бұрын

    Espectacular 😊

  • @totalxasweare4784
    @totalxasweare47842 жыл бұрын

    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)))

  • @reiniervarkevisser
    @reiniervarkevisser3 жыл бұрын

    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

  • @jaysendraneyjaysendraney2036
    @jaysendraneyjaysendraney20362 жыл бұрын

    I'm just watching this video and I'm really loving it but I'll like to understand firebase very well.

  • @IwanSetiawan-yc8gt
    @IwanSetiawan-yc8gt4 ай бұрын

    Okey lanjut bosku 👍🙏

  • @xtrzne
    @xtrzne2 жыл бұрын

    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)?

  • @zeeshan9991
    @zeeshan9991 Жыл бұрын

    dude you made my day. ;)

  • @dalestewart
    @dalestewart Жыл бұрын

    A true professional programmer. Yes, Sonny => Keep on bringing the fire.

  • @nr7343
    @nr73432 жыл бұрын

    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?

  • @NourMohamed-wy2jl
    @NourMohamed-wy2jl2 жыл бұрын

    What is the best carousel library to use with next.js project?

  • @emreaka3965
    @emreaka3965 Жыл бұрын

    Thanks :)

  • @gurparkarsingh9690
    @gurparkarsingh9690 Жыл бұрын

    Man you are genius

  • @brotat0
    @brotat03 жыл бұрын

    Awesome video

  • @kukudavid6646
    @kukudavid66462 жыл бұрын

    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

  • @aaronhawkins9141
    @aaronhawkins91412 жыл бұрын

    Utopia Ecosystem is what you should know about cybersecurity and anonymity!

  • @alexandrpertov13
    @alexandrpertov132 жыл бұрын

    luv u PAPA

  • @Hans_Magnusson
    @Hans_Magnusson5 ай бұрын

    So you just told me how WhatsApp is the ultimate back door 🚪! 😂😂😂

  • @wellington18m
    @wellington18m2 жыл бұрын

    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!

  • @kalpitjindal688
    @kalpitjindal6883 жыл бұрын

    congratulation :)

  • @mayankk2800
    @mayankk28003 жыл бұрын

    This is next level. Best channel on KZread

  • @alexbork8659
    @alexbork86593 жыл бұрын

    SUPER .............. !!!!!!!!!! You are the BEST ............... Ok from Russia !!!!!!!!

  • @yannicksims9262
    @yannicksims92622 жыл бұрын

    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

  • @VOLVIENDOANOSOTROSMISMOS
    @VOLVIENDOANOSOTROSMISMOS6 ай бұрын

    Very good

  • @tawsifhaque9360
    @tawsifhaque93602 жыл бұрын

    is this beginner friendly? Can i follow along this video if i know react only, without any knowledge of next js?

  • @aayushdadhich9036
    @aayushdadhich90362 жыл бұрын

    Does useAuthState gets current state from local storage/cookies of client?

  • @shajin_KP
    @shajin_KP2 жыл бұрын

    Love!

  • @maxmaksum4673
    @maxmaksum46733 жыл бұрын

    Great and awesome...

  • @RoyceGerikChua
    @RoyceGerikChua3 ай бұрын

    Thanks

  • @SonnySangha

    @SonnySangha

    3 ай бұрын

    Thank you so much!!!! 🙏🏽

  • @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.

  • @deanbarber8851
    @deanbarber88513 жыл бұрын

    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 :)

  • @chandrashekharkotekar8453
    @chandrashekharkotekar84533 жыл бұрын

    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..

  • @Mikkelzu
    @Mikkelzu2 жыл бұрын

    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

  • @simpleshorts389
    @simpleshorts3893 жыл бұрын

    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 🤟

  • @chandrum2901
    @chandrum29013 жыл бұрын

    Bro I need your help, How to passing data from login page to signup page using react -router 🙏 Please 🥺 help me

  • @zahanahmad456
    @zahanahmad456 Жыл бұрын

    What software do you use to go live and record this ?

  • @codewithyug1129
    @codewithyug11293 жыл бұрын

    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? 🤔

  • @pedroelton7040
    @pedroelton70402 жыл бұрын

    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.

  • @prasheelchadotra7407
    @prasheelchadotra74073 жыл бұрын

    Ruler of web! OP

  • @digiporn7665
    @digiporn76652 жыл бұрын

    Bom demais isso, show

  • @rossrivalbendillo5582
    @rossrivalbendillo5582 Жыл бұрын

    Can you do ReactJS or NEXTJS with Laravel?

  • @crazyzigi2749
    @crazyzigi27492 жыл бұрын

    How do you connect ist with your cms?

  • @jacopoguzzo4097
    @jacopoguzzo40972 жыл бұрын

    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!

  • @KlorofilASN
    @KlorofilASN2 жыл бұрын

    omg, so cool

  • @HotSteamingJustice
    @HotSteamingJustice2 жыл бұрын

    Great content, thanks. Rated those spammers 1 star.

  • @mhk6516
    @mhk6516 Жыл бұрын

    Ultimate

  • @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?

  • @therealltrader2346
    @therealltrader23463 жыл бұрын

    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

  • @danielbernstein6792
    @danielbernstein67923 жыл бұрын

    How does Sonny auto import components?

  • @yeasinarafat1694
    @yeasinarafat16943 жыл бұрын

    What did use to make?