Build A Realtime Chat App In ReactJS and NodeJS | Socket.io Tutorial | MERN Chat App Using ReactJs

Поділитися
Вставка
  • Опубліковано 3 жов 2024

КОМЕНТАРІ • 215

  • @sujayonly3887
    @sujayonly3887 Рік тому +8

    i found this video after going through dozens of videos from big channels
    this video is great because :
    1. great code structure and file structure
    2. very concise
    3. good explaination

    • @mdshaheer181
      @mdshaheer181 Рік тому

      hi is final project is working? please reply

    • @flowka8204
      @flowka8204 3 місяці тому

      @@mdshaheer181 Yes

  • @-remoro8133
    @-remoro8133 2 роки тому +7

    I will finish your previous project and I will finish this, you are gonna improve our skills to the next level ! Thank you

    • @ZAINKEEPSCODE
      @ZAINKEEPSCODE  2 роки тому +1

      Thank you too!

    • @Duke_Randomzzz
      @Duke_Randomzzz 2 роки тому

      @@ZAINKEEPSCODE Brother i didn't found the video of integration of social media backend and frontend please provide.

  • @sheikhmohsin6756
    @sheikhmohsin6756 2 роки тому +21

    Extremely good content, your way of teaching is simple and straightforward , and your hard-work is really appreciable.

  • @gebreigziabherabadi3125
    @gebreigziabherabadi3125 2 роки тому +6

    Awesome! Easy and clean code. You can make it complete MERN stack dev by adding: comments on post, share post, view profile, etc. Keep it up.

    • @aashish94
      @aashish94 2 роки тому +1

      will u please share some resourses to add the functionly which u just added in the comment

  • @mehdiostadd
    @mehdiostadd Рік тому +7

    I learned a lot during this tutorial, You improved my skill extremely. Thank you bro❤.

  • @munazzaimanabbasi3363
    @munazzaimanabbasi3363 2 роки тому +4

    Brilliant Effort ... Helped a lot in my first year internship project .

  • @kaidongchong3371
    @kaidongchong3371 2 роки тому +3

    Liked before watching. Thanks for the great content always.

  • @mehrdad1068
    @mehrdad1068 2 роки тому +1

    One of best tutorial in UA-cam 🙏🙏🌻

    • @ZAINKEEPSCODE
      @ZAINKEEPSCODE  2 роки тому

      Thanks for like the content. Keep learning

  • @ankitkanyal8392
    @ankitkanyal8392 2 роки тому +1

    Bro your channel is gem for frontend devs plz keep up the great work.

    • @Hafsa0526
      @Hafsa0526 2 роки тому

      Hi Ankit. Are you a fresher and open to opportunities in web development? Have you done projects on ReactJs?

  • @codewithkumar8165
    @codewithkumar8165 2 роки тому +7

    Suggestion: Add functionality to start chat with other users

  • @amitanshusahu1079
    @amitanshusahu1079 Рік тому

    the best one i have seen on youtube so far

  • @kevinasar1609
    @kevinasar1609 10 місяців тому

    Thanks man Your tutorial is so awesome, i hope u success in ur journey and happy always 🙏🙏🙏🙏

  • @Friday77
    @Friday77 2 роки тому +1

    Thanks dude you gave Me New reason to learn react js

  • @jaifmd4691
    @jaifmd4691 Рік тому

    You did really great job man only the website needed to be responsive

  • @mr.shoaibmalik2488
    @mr.shoaibmalik2488 2 роки тому +2

    wow thank you so much sir for this beautiful project😍

  • @abdulahnaser6292
    @abdulahnaser6292 2 роки тому +1

    Very cool, I hope Deployment Heroku works with this wonderful explanation to complete everything

  • @koukifares9728
    @koukifares9728 7 місяців тому +1

    this video works , thank you

  • @jasonhackson2805
    @jasonhackson2805 2 роки тому

    You just are damn good, You just earned a subscriber..
    can't wait to see more of your work..

  • @reactnative6644
    @reactnative6644 2 роки тому

    we love you bro you're fantastic !!

  • @jagatjibansahoo329
    @jagatjibansahoo329 Рік тому

    thank you so much bro for your very use full tutorial

  • @umairkhan5031
    @umairkhan5031 2 роки тому +1

    very nice Amazing Masha Allah keep it up

  • @jerrymathew5689
    @jerrymathew5689 Рік тому

    Completed successfully 👌 🙌

  • @clevertag1281
    @clevertag1281 2 роки тому

    I really appreciate this sir, It's just like I'm the one you did this for

  • @developerdeepu6318
    @developerdeepu6318 2 роки тому +6

    Create separate playlist related to this project.

  • @olaoluafolami5822
    @olaoluafolami5822 2 роки тому

    Top notch tutorial man, help deploy it too

  • @successmotivation83
    @successmotivation83 Рік тому

    Such an Amazing tutorial. Thank you!

  • @snoudev
    @snoudev Рік тому

    Thanks a lot for your video, really love it ❤

  • @clevertag1281
    @clevertag1281 2 роки тому

    I sure! I was about to do this. Thanks so much

    • @adhitamaputra-73
      @adhitamaputra-73 3 місяці тому

      .b.i.n. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.

  • @himanshumishra5857
    @himanshumishra5857 2 роки тому

    Awesome work!

  • @kuba6269
    @kuba6269 Рік тому

    Great tutorial i learnedd react with your healp i apricot it

  • @rohit.1232
    @rohit.1232 5 місяців тому

    thanks i learn alot from this video.

  • @gamerfunky
    @gamerfunky 4 місяці тому

    Hey bro, can you please add a feature to create new chats for new users?
    Chat does not display new users
    I have to do it using thunder client
    You made a amazing app i really liked it and built it for my college project 😀😀😀😀😀😀😀😀

  • @sitymariam9284
    @sitymariam9284 Рік тому

    Smart person I ever know ✨

  • @OmgFactsTamizhan
    @OmgFactsTamizhan Рік тому +1

    How to Deploy this Project Please Upload Video

  • @shubhamrajan2488
    @shubhamrajan2488 2 роки тому +4

    Great work man, really appreciate it. Please add a video of this application deployment that will really make this project the best tutorial based full stack MERN project.

    • @Hafsa0526
      @Hafsa0526 2 роки тому

      Hey Shubham. Have you created a project on ReactJs? Are you interested in exploring job/internship opportunities in software development?

    • @shubhamrajan2488
      @shubhamrajan2488 2 роки тому

      @@Hafsa0526 Yes I have done some projects. I am interested in job opportunity.

    • @Hafsa0526
      @Hafsa0526 2 роки тому

      @@shubhamrajan2488 Hey Shubham. Thanks for responding. For more discussions on the opportunities in software development, you can connect with me using the contact information on my channel.

    • @rachanasrachanas5905
      @rachanasrachanas5905 Рік тому

      I am also looking for a job

  • @viralshorts5249
    @viralshorts5249 2 роки тому

    you are amazing budddy...

  • @jokerbanny
    @jokerbanny 2 роки тому

    This is the amazing!

  • @amjadawan4150
    @amjadawan4150 Рік тому

    content is awesome sir. i learn a lot. one thing i will say, keyboard buttons voice is too much

  • @Vortx110
    @Vortx110 2 роки тому +1

    Amazing tutorial bro...by the way how old you are bro

  • @iamakashkumarram
    @iamakashkumarram Рік тому +2

    Sir please make a video on how to Deploy Your Social Media app on Vercel.

  • @shekharchauhan2569
    @shekharchauhan2569 2 роки тому +2

    Please implement comment functionality in social media app

  • @Code_With_Aman1
    @Code_With_Aman1 8 місяців тому

    Amazing ❤❤ bro you have made actual clone of whatsapp

  • @harshitakumawat3917
    @harshitakumawat3917 2 місяці тому

    Can you please provide the deployment tutorial of this project

  • @CRNikolas
    @CRNikolas 2 роки тому

    Thank you!!!

  • @anandagharami2535
    @anandagharami2535 Рік тому

    thanks you sir for this Aswome projects

  • @renishsalakhana5603
    @renishsalakhana5603 Рік тому

    It's extremely good content but you haven't explained abt how to creates a clusters and some extra stuffs we faced problems there.
    it was very good tutorials but need these. bcoz I m frontend dev not much ideas about backend but if you provided short glimpse then it could be better to do it parallelly with u.

  • @sukanyaa1110
    @sukanyaa1110 2 роки тому

    Thank you ❣️

  • @judeifeanyiokpe3041
    @judeifeanyiokpe3041 2 роки тому

    You makes coding so much easy for me

  • @abdulragib6004
    @abdulragib6004 5 місяців тому

    awesome bro , add some new features also like story, comments, repost

  • @rcharles268
    @rcharles268 2 місяці тому +1

    Include file sharing

  • @safadkhili2844
    @safadkhili2844 2 роки тому

    Vraiment waw 👏👏

  • @skirllexrude8170
    @skirllexrude8170 2 роки тому

    Zain can you make any prerequisite video that will make comfortable before starting out you mern stack video. I know javascript but dont know anything about react,node,socket and mongo.

  • @binarybulletin
    @binarybulletin 3 місяці тому

    Why you don't provide any middleware to chat and massagemodel like authentication 🙂

  • @petchimuthup2174
    @petchimuthup2174 Рік тому +1

    Sir please upload how to develop this project

  • @devhabib
    @devhabib 9 місяців тому

    again nice

  • @adityapatil7972
    @adityapatil7972 8 місяців тому +1

    can I make it as seperate project

  • @ABC-ks8ir
    @ABC-ks8ir 2 роки тому

    Please make a video on deployment also

  • @mausoof9143
    @mausoof9143 Рік тому

    I have subscribed sir

  • @vishal_rajpoot_
    @vishal_rajpoot_ 2 роки тому

    Amazing

  • @DanhNguyen-dd9hk
    @DanhNguyen-dd9hk 2 роки тому

    Thank you

  • @umairkhan5031
    @umairkhan5031 2 роки тому

    please bro make a complete series of MERN Stack development

  • @talhamikaaiyl5483
    @talhamikaaiyl5483 2 роки тому

    Suggestion: Add functionality to view other profile and start chat with other users

  • @sire906
    @sire906 Рік тому

    good work bro but how do we find another user to chat with ?

  • @pramodghodke8005
    @pramodghodke8005 Рік тому

    sir, no doubt extremely grt tutorail, you keep it very simple and staright to point, but , the + icon right left to chat input does it support file sharing features , if it is, i am damn happy, its made my year....but if you didnt explained it, you make this all effrots worst sir,

  • @Leo-es3fq
    @Leo-es3fq 2 роки тому

    Awesome

  • @SanjayNG125
    @SanjayNG125 8 місяців тому

    Is it necessary to complete ur social media app to build this chat app or can i just build this seperately...?? please reply

  • @ThanhLe-vt4je
    @ThanhLe-vt4je 2 роки тому

    you're awesome

  • @nothing7410
    @nothing7410 2 роки тому

    good cours

  • @s4shibam
    @s4shibam 2 роки тому +1

    I just learned JS (HTML, CSS done too..) but I'm totally worried about what to do next ... planning to do some basic projects. But all these term like React, Node js, Mongodb, Mongoose, next js, particle js, express js seems jargon to me!! now u used socket io... what to do??

    • @Rahmannugar
      @Rahmannugar 2 роки тому

      First start with react and build some projects with it before moving to the next.

  • @flickboi2322
    @flickboi2322 Рік тому

    Brother Please make a video on how to Deploy this Project on Vercel.

  • @kasunisarangi1039
    @kasunisarangi1039 7 місяців тому +1

    Can we make group chats?

  • @malikkashifsaeed1938
    @malikkashifsaeed1938 Рік тому +1

    the css file you provided in the github is not correct as in video there are more than 170+ css lines of code and in github there is only 73

  • @TarekAli-y8p
    @TarekAli-y8p 10 місяців тому

    Thanks but can you order these videos to know the right way to see them

  • @coletwins760
    @coletwins760 2 роки тому

    Pls as a beginner I want to learn how to setup Vs code to the level that will help me improve my performance.

  • @ListeningBeauty
    @ListeningBeauty 2 роки тому

    which extention are you using for node js to give auto suggestion of API in controller

  • @transformme1
    @transformme1 2 роки тому

    Wow!

  • @varadaraj.a1566
    @varadaraj.a1566 2 роки тому

    In your previous video of 3rt part of MERN stack social media app please can you implement a error message if username or password doesn't match or doesn't exist in the database please

  • @sibananadanayak1174
    @sibananadanayak1174 2 роки тому +1

    the title should be backedend for chat application....here no eplanation how ui is created...

  • @man-fuji
    @man-fuji 2 роки тому

    Is tailwind used for the styling ??

  • @smrutisahoo9929
    @smrutisahoo9929 Рік тому

    What about the functionality of comment and share icon??

  • @rey8473
    @rey8473 Рік тому

    Why socket has a separate package.json and folder from the server? does it mean it has also a separate host server?

  • @NaJMStudio
    @NaJMStudio 2 роки тому

    Please make post view with comments and share options. And making others profile Viewable

  • @musicvideos4762
    @musicvideos4762 2 роки тому

    greatsss

  • @devhabib
    @devhabib 9 місяців тому

    nice

  • @rollinglanes
    @rollinglanes Рік тому

    Its a group chat or we can create a new chat?

  • @adventurewithanuj6390
    @adventurewithanuj6390 Рік тому

    nice

  • @sumit9100
    @sumit9100 2 роки тому

    can we add this chat app in your previous social media app?

  • @beardo_fit3160
    @beardo_fit3160 7 місяців тому +2

    i used your github repo, i setted up mongodb and front end as well but my chat is not working, i dont know what i am missing but that page is blank, any idea ????????

    • @code_geeky1231
      @code_geeky1231 4 місяці тому

      same for me

    • @code_geeky1231
      @code_geeky1231 4 місяці тому

      did you fix that error

    • @gamerfunky
      @gamerfunky 4 місяці тому

      Bro for chat you have to install dependency in socket and run the socket folder

  • @programmeraman
    @programmeraman 2 роки тому

    How to deploy it on Github Please made a video on it

  • @NotsoAman
    @NotsoAman Рік тому

    please upload a video on how to deploy this social media application

  • @mikasaackerman-lf2tw
    @mikasaackerman-lf2tw 6 місяців тому

    please link for the previous tutorial for server side. I can't find it.

  • @yassinyassin5251
    @yassinyassin5251 Рік тому +1

    21:29 how VsCode help you to CODE

  • @sarthakkashyap5235
    @sarthakkashyap5235 2 місяці тому

    Is it responsive??

  • @VishalRaj-hd3nv
    @VishalRaj-hd3nv 6 місяців тому

    Brother when I am using your code I'm not getting followers in my conversation component and if I am creating chatId manually through postman then I'm able to see followers in conversation component to chat them but I want when I follow someone and he also follow me then automatically cheated should be create and I should be able to see in my conversation component

  • @ME-er5jd
    @ME-er5jd 2 роки тому

    Please, make an eCommerce application with mern stack.

  • @zonefortyeight349
    @zonefortyeight349 Рік тому

    Hey, how to add conversations automatically by adding friend?

  • @davidjunior390
    @davidjunior390 3 місяці тому

    pls i have an issue, the message gets saved twice, did anyone else have this issue?

  • @RaviSharmayt
    @RaviSharmayt Рік тому +1

    Can we create the main server and socket server in one file or server

  • @sanchitchaple7756
    @sanchitchaple7756 Рік тому

    Can someone tell which intellisense or snippet he is using which automatically show the code