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

Поделиться
HTML-код
  • Опубликовано: 23 авг 2024

Комментарии • 418

  • @SonnySangha
    @SonnySangha  Год назад +3

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

  • @jasonmai8695
    @jasonmai8695 3 года назад +101

    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  3 года назад +17

      You are absolutely welcome dude!!! Keep on crushing it!!

    • @damaged804
      @damaged804 Год назад +1

      Anything you wanna recommend for someone who wants to achieve the same as you?

    • @Vegetoyesh
      @Vegetoyesh Год назад

      @@damaged804 Stop asking. Start doing..

  • @LongBoy.0
    @LongBoy.0 3 года назад +111

    This guy is out here doing more than what high school or college ever did for me lol

  • @rendoesmath
    @rendoesmath 3 года назад +3

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

  • @shivampatel5989
    @shivampatel5989 3 года назад +14

    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"

  • @danieljayne8623
    @danieljayne8623 3 года назад +9

    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.

  • @SonnySangha
    @SonnySangha  3 года назад +28

    Watch my REACT BASICS 101 class for FREE with 1 month FREE SkillShare access here (First 1000 people) skl.sh/2Srfwuf

    • @letswalk4168
      @letswalk4168 3 года назад +10

      Thank you so much sonny for your tutorials . i have learnt so many things in react by just watching it..you're really awesome :)

    • @927titansfan
      @927titansfan 3 года назад

      @@letswalk4168 io

    • @927titansfan
      @927titansfan 3 года назад +1

      @@letswalk4168 ion

    • @mdsabirsabir2824
      @mdsabirsabir2824 2 года назад

      @@oonewayyy thgmhm

    • @mdsabirsabir2824
      @mdsabirsabir2824 2 года назад

      @@oonewayyy hmhfggmb

  • @snssatyabhagavan
    @snssatyabhagavan 3 года назад +13

    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 7 месяцев назад

      ⁠@@xtrznesockets

  • @agustinlavalla8892
    @agustinlavalla8892 3 года назад +4

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

  • @rohandeysarkar8443
    @rohandeysarkar8443 3 года назад +6

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

  • @yashchauhan5710
    @yashchauhan5710 3 года назад +5

    1:37:07 thattrick made my day

  • @MarcusHammarberg
    @MarcusHammarberg 3 года назад +7

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

  • @SanjeevShrestha
    @SanjeevShrestha 3 года назад +4

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

  • @dalestewart
    @dalestewart 2 года назад +2

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

  • @eleemthapa2518
    @eleemthapa2518 3 года назад +2

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

  • @asamad9645
    @asamad9645 3 года назад +2

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

  • @wonganikaunda7704
    @wonganikaunda7704 3 года назад +2

    Channel discovered...awesome stuff

  • @Lokoislive
    @Lokoislive 3 года назад +4

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

  • @alicodes22
    @alicodes22 3 года назад +6

    Loved the clone ✨ 🚀

    • @snssatyabhagavan
      @snssatyabhagavan 3 года назад +1

      Your clone was also amazing bro Starbucks and tesla.

    • @alicodes22
      @alicodes22 3 года назад

      @@snssatyabhagavan ❤️

  • @girikrishna7235
    @girikrishna7235 3 года назад

    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.

  • @csslectures
    @csslectures 3 года назад +2

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

  • @sadiedickinson7151
    @sadiedickinson7151 2 года назад

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

  • @nishanthdipali6838
    @nishanthdipali6838 3 года назад +3

    Amazing build Sonny and thanks for the one to one chat

  • @pjos2981
    @pjos2981 3 года назад +2

    Mind boggling channel. Aag laga diya

  • @goldensonu15
    @goldensonu15 3 года назад +1

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

  • @mayankk2800
    @mayankk2800 3 года назад +2

    This is next level. Best channel on RUclips

  • @whisky8496
    @whisky8496 3 года назад +1

    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!

  • @kwabenaankamah5675
    @kwabenaankamah5675 3 года назад

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

  • @dalestewart
    @dalestewart 2 года назад +1

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

  • @Mikkelzu
    @Mikkelzu 3 года назад +10

    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 года назад +1

      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

  • @HolmesPatrick
    @HolmesPatrick 3 года назад +1

    Great Sonny Sangha. Thanks for sharing knowledge.

  • @flagshipbuilds
    @flagshipbuilds Год назад +1

    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?

  • @pulindrambharath9189
    @pulindrambharath9189 3 года назад +1

    Amazing Sonny ... Love your content ❤️

  • @lostboy8154
    @lostboy8154 3 года назад +1

    Sonny your content is amazing man 🔥

  • @ammesidd6669
    @ammesidd6669 Год назад +1

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

  • @emreaka3965
    @emreaka3965 2 года назад +1

    Thanks :)

  • @saksham2892
    @saksham2892 3 года назад +5

    Papa React is now Daddy Next. Js

  • @marwenbentalebali8310
    @marwenbentalebali8310 2 года назад

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

  • @aaronhawkins9141
    @aaronhawkins9141 2 года назад +1

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

  • @emmanuelogbonnaukah8018
    @emmanuelogbonnaukah8018 3 года назад

    loving your work all the way from Nigeria Sonny

  • @maxmaksum4673
    @maxmaksum4673 3 года назад +2

    This is incredible..such high quality tutorial.

  • @blackdeath7678
    @blackdeath7678 3 года назад

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

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

  • @Hans_Magnusson
    @Hans_Magnusson 9 месяцев назад

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

  • @MarcusHammarberg
    @MarcusHammarberg 3 года назад +3

    Amazing stuff as always! Learned SOOO much.
    Question: checking in Firebase keys? Is that ok or dangerous?

    • @SonnySangha
      @SonnySangha  3 года назад +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 :)

  • @raoulguillermo
    @raoulguillermo 3 года назад

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

  • @programming5383
    @programming5383 3 года назад +1

    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  3 года назад

      Thanks so much!
      Sign up to the newsletter in the description and we send over the playlist for free!

    • @programming5383
      @programming5383 3 года назад

      Never mind you did it later in the video :)
      www.epidemicsound.com/playlist/dguvxg1wo7ye19gdfa4y02s7s7xd8gqp/

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

  • @RandomMusicD
    @RandomMusicD 2 года назад

    Dude!! you are amazing, thanks for all.

  • @jaysendraneyjaysendraney2036
    @jaysendraneyjaysendraney2036 2 года назад

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

  • @LucianoSoares85
    @LucianoSoares85 3 года назад +1

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

  • @tawsifhaque9360
    @tawsifhaque9360 2 года назад

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

  • @shivammakwan6409
    @shivammakwan6409 3 года назад

    Really enjoyed thanks for this ❤️

  • @jestornogueiro5862
    @jestornogueiro5862 3 года назад

    Next level, Loved it ❤️🔥

  • @rohancoder2155
    @rohancoder2155 3 года назад +2

    i am the youngest coder at school thanks to you

  • @NourMohamed-wy2jl
    @NourMohamed-wy2jl 2 года назад

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

  • @maxmaksum4673
    @maxmaksum4673 3 года назад

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

  • @rdavil8361
    @rdavil8361 3 года назад

    Loved it. Subscribed. ❤️❤️

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

  • @jatingoyal853
    @jatingoyal853 2 года назад +1

    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 ?

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

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

  • @HotSteamingJustice
    @HotSteamingJustice 3 года назад +1

    Great content, thanks. Rated those spammers 1 star.

  • @kukudavid6646
    @kukudavid6646 3 года назад

    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 3 года назад +1

      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

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

  • @digiporn7665
    @digiporn7665 2 года назад

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

  • @Lolnigaaaaaaaaa
    @Lolnigaaaaaaaaa 2 года назад

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

  • @pranavrajesh5550
    @pranavrajesh5550 3 года назад +1

    The sponsor is worth it...

  • @chandrum2901
    @chandrum2901 3 года назад +1

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

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

  • @shaikhsanuar5339
    @shaikhsanuar5339 2 года назад

    Wow this is insane!!

  • @alexbork8659
    @alexbork8659 3 года назад

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

  • @archimedesredes
    @archimedesredes 3 года назад

    Thank you very much for the content.

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

  • @ohmpatel6563
    @ohmpatel6563 2 года назад +2

    TypeError: Cannot read properties of undefined (reading 'apps') in firebase.js
    HOW TO FIX THIS??? @Sonny Sangha

    • @quintonpangyixuan3990
      @quintonpangyixuan3990 2 года назад

      Code in description ruclips.net/video/tcTme7JS6bs/видео.html

  • @adrienveidt8273
    @adrienveidt8273 3 года назад

    can someone tell me how do i make a group chat feature?

  • @ItsYourBoyMRAR
    @ItsYourBoyMRAR 3 года назад +1

    Great Clone On Great Keep It Up

  • @manvendrasingh7838
    @manvendrasingh7838 3 года назад

    hostinger website offer countdown never ends.

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

  • @IwanSetiawan-yc8gt
    @IwanSetiawan-yc8gt 8 месяцев назад

    Okey lanjut bosku 👍🙏

  • @ElbinBinil
    @ElbinBinil 3 года назад +1

    For me scroll to bottom function is not working

  • @andreacedeno2974
    @andreacedeno2974 11 месяцев назад

    Espectacular 😊

  • @simpleshorts389
    @simpleshorts389 3 года назад +1

    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 🤟

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

  • @ghita2003able
    @ghita2003able Год назад

    is it functional or just UI based ?

  • @aayushdadhich9036
    @aayushdadhich9036 3 года назад

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

  • @MaddyAhmed
    @MaddyAhmed 3 года назад +1

    Oh you were here.. but i watching day 2 of Amazon clone 🔥

  • @lucasgazzola
    @lucasgazzola 2 года назад

    Hi, I'm from Argentina. I want to see your live steams, how can I do it?

  • @bhupeshbhatt4334
    @bhupeshbhatt4334 3 года назад +1

    I didn't know that R Ashwin knows programming also

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

  • @csslectures
    @csslectures Год назад

    Is this only front end?

  • @abhaytiwari6411
    @abhaytiwari6411 3 года назад +6

    Next video on cloning Star Bucks website with React js.

  • @Adnanakabab
    @Adnanakabab 2 года назад +1

    Correct me if I'm wrong, but you never actually rendered the data we passed down as props from the server-side. When rendering the messages, you still render them from firebase, which is not as instantaneous. I am able to log the serverside data in the console, but when it comes to mapping the array and rendering each message, it tells me that "messages.map" is not a function. How can I go about rendering the data from the serverside?

    • @webpapi
      @webpapi 2 года назад

      Same situation for me. I'm just pushing all collections(db, 'users',) and then getDocs... i'm now facing the issues on the const chat. :/ were you able to resolve this for Fb9?

    • @Adnanakabab
      @Adnanakabab 2 года назад +1

      @@webpapi I was not able to :/ the main reason why I was trying to render from server side is because FB9 was not sending the data in chronological order, which makes the messages come in a random order. My goal was to sort the messages in order on the server-side and then show them to the user. Unfortunately, FB9 nor server-side wants to cooperate with me. I also just decided to deploy this today and it works fine, but when I try to open a chat, I get an error 500 (internal server error).

  • @deanbarber8851
    @deanbarber8851 3 года назад +1

    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 года назад +1

      Watch the Google clone tomorrow!

    • @GajendraSingh-lv3jw
      @GajendraSingh-lv3jw 3 года назад +1

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

  • @yeasinarafat1694
    @yeasinarafat1694 3 года назад

    What did use to make?

  • @rossrivalbendillo5582
    @rossrivalbendillo5582 Год назад

    Can you do ReactJS or NEXTJS with Laravel?

  • @tephlondandada156
    @tephlondandada156 2 года назад

    Why have they changed from "@material-ui" to "@mui/material". The syntax looks different and I'm getting errors. Why can't they just leave things alone? It confuses beginners like myself.

  • @imabhisht
    @imabhisht 3 года назад +3

    Hey Sonny!! I need help! The Chats appear for ~1 sec and then disappered!! Please Help.

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

  • @tephlondandada156
    @tephlondandada156 2 года назад

    I don't get it. My code looks exactly like yours, I've followed everything to the letter and I'm getting errors. I give up.