🔴 Realtime Chat App with React, Node.js, Socket.io and MongoDB

Поділитися
Вставка

КОМЕНТАРІ • 727

  • @KishanSheth21
    @KishanSheth21  2 роки тому +94

    Hope you guys like this video. If you need more tutorials like this comment down here and I will make them😀

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

      Awesome tutorial brother, try writing nodejs codes in es6 format

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

      урок очень полезный, спасибо тебе)

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

      привет из России, Санкт-Петербург

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

      я подписался и поставил лайк. жду от тебя ещё подобного контента

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

      Hello . Can I get report for this project?

  • @NZJonosong
    @NZJonosong 2 роки тому +9

    This is exactly what I've been looking for! Cheers mate!!

  • @sevinjyagubzade5544
    @sevinjyagubzade5544 6 місяців тому +2

    exactly what I was looking for! it's incredible, thank you

    • @shubhammukherjee3832
      @shubhammukherjee3832 6 місяців тому

      By the end of set avatar section i am having 400 axios error. Can u pls help... set avatar functionality is not working

    • @sagar_singh989
      @sagar_singh989 6 місяців тому

      Please help me my code is not working firstly when he uses npx to create chat-app in public then hi is using yarn start to run it how is this possible

    • @sagar_singh989
      @sagar_singh989 6 місяців тому

      Please help me my code is not working firstly when he uses npx to create chat-app in public then hi is using yarn start to run it how is this possible

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

    God Bless you Thanks Kishan Sheth (Lerato from South Africa)

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

    Every minute was an hour of lesson, thanks.🙌

    • @nidhikumar1392
      @nidhikumar1392 7 місяців тому

      hey .in my code socket is not working what should i do any idea?

    • @zealtesfaye3052
      @zealtesfaye3052 7 місяців тому

      @@nidhikumar1392 There is the source code in the description, You can follow up from there

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

      Happy to help 🙌

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

    Thank you for making this, forever grateful🙏

  • @maheshthombare-no8ze
    @maheshthombare-no8ze Рік тому +4

    Really nice tutorial brother! Thank you for sharing your knowledge. Really appreciate it

  • @theblacknerd3185
    @theblacknerd3185 2 роки тому +8

    Best tutorial ever on UA-cam! This is what we want not half videos showing how to do just a small part of a big program like all their viewers where professionals 🤦
    Thanks alot

  • @WillSmith-qt7me
    @WillSmith-qt7me 2 роки тому +4

    Great MERN chat tutorial. Thanks, friend.

  • @mritunjay7065
    @mritunjay7065 2 роки тому +8

    Really super awesome tutorial .
    Awesome UI with superb explanation !
    Go for it even if you are starting with reactJS

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

      Sure Thing. Glad you liked the video. More advanced stuff coming in very short time.

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

      Stay Tuned.

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

      I got axios error.....that post:Err_connection_refused.......how can i resolve this...

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

      @@rupalisharma2674 same

    • @manasparatane1855
      @manasparatane1855 11 місяців тому

      @@rupalisharma2674 did u got the solution why you were getting that error , cuz i am also getting the same error

  • @sohanYT69
    @sohanYT69 2 роки тому +17

    awesome stuff man, thanks for keeping the proceess simple and clean. Learned a lot many things
    :)

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

      Glad you liked it!

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

      @@KishanSheth21 Mern ( mongodb, express js, react native, Nord js) vs flutter + kotlin (Android studio)
      I know kotlin,html,css and bit js should I learn mern or Flutter ?
      1. Mern
      2. Flutter + kotlin
      Which is best ?

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

      @@KishanSheth21 1. MERN - MONGODB, EXPRESS JS, REACT JS, NODE JS
      2. MONGODB, EXPRESS JS,REACT NATIVE, NODE JS
      WHICH IS BEST FOR CROSS PLATFORM APP LIKE NETFLIX OR DISNEY+ HOTSTAR?

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

      I got axios error.....that post:Err_connection_refused.......how can i resolve this...

    • @HITESHKUMAR-dv6se
      @HITESHKUMAR-dv6se Рік тому

      @rupalisharma2674 will you let me know whether your error is fixed or not

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

    i love this tutorial as a beginner my man🤩🤩🤩🤩

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

    The best one real time app tutorial

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

    Awesome bro. Keep up making such incredible projects

  • @candelasmezauriel6806
    @candelasmezauriel6806 9 місяців тому +2

    You're the best, i've learn much in this video 👌

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

      has he deployed and provided everything?shall i proceed with this course??

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

      Sure, i don't have any problem

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

    Very beautiful big man. Awesome.

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

    i lost my nervous during when i did this project, because some times Kishan don't explain, what he do, but i finished this project with Kishan, and say him THANKS

    • @JohnCena-uf8sz
      @JohnCena-uf8sz 6 місяців тому

      brroo will it work if a beginner a biginner follow the whole exact video plzzz reply

    • @JohnCena-uf8sz
      @JohnCena-uf8sz 6 місяців тому

      and also provide some description and title to put in my resume

  • @luan3762
    @luan3762 Рік тому +4

    Thank you, this project helped me land my first interview. Also, I learned a lot and how to consume API's in this tutorial.

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

      Great to hear!

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

      21:52 form container is showing undefined ! What should be imported??

    • @akshitasharma9207
      @akshitasharma9207 11 місяців тому

      having axios error after connecting to mongodb. Badly stuck .Could you please help?

    • @luan3762
      @luan3762 11 місяців тому

      @@akshitasharma9207 what's your code

    • @luan3762
      @luan3762 11 місяців тому

      ​@@vanshikasrivastava132check the github code and your code, probably you forgot something

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

    Wow! Your explaination is really simple. Thanks Bhai..😄

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

    Nice content dude! Thank you!

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

    So cool! It helps me a lot. Thank you so much!!!!!

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

    Great work brother, keep them coming.

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

    perfect video , perfect content , perfect coding style .
    keep going for us underdeveloped developers .
    100/100....................
    thank you .

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

      if i wanted to code my own fucking chat thing for my imp website i would have asked the fucking devil

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

      1. MERN - MONGODB, EXPRESS JS, REACT JS, NODE JS
      2. MONGODB, EXPRESS JS,REACT NATIVE, NODE JS
      WHICH IS BEST FOR CROSS PLATFORM APP LIKE NETFLIX OR DISNEY+ HOTSTAR?

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

      Can we make Mobile apps with react js or should we use react native ?

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

      For mobile applications you would need react native... React js won't help
      (although if you already have react js knowlege then it will make learning react native easier)

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

    Really nice tutorial, cant thank you enough, I'll donate to support once I graduate and got a job ❤️❤️

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

      Glad to hear it out.

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

      @@KishanSheth21 i don't know why kotlin is Android official language with no real app or no big app clones.
      Flutter have all Big apps clone + node js and mongodb and everything for a Real App to make money.

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

      I got axios error.....that post:Err_connection_refused.......how can i resolve this...

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

    Good Job bud - You done pretty well

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

    Thanks a lot sir. Pls keep this kind of vids incoming ....

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

    Best tutorial for chat application. ❤❤
    I've a suggestion bro, can you please create a system for that, if any one send a message from another user, then show a notification in the ui, just like a notification bell.

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

    good work there, we love it.

  • @ALMUMTAZELECTRONICS-jv5uj
    @ALMUMTAZELECTRONICS-jv5uj Рік тому +1

    great work dude....appreciated

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

    for anyone who runs into the problem of hitting API limit, just register for an API key. You get 200 000 requests per month.

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

      I'm kinda dumb, can you explain it better or more in depth?

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

    Really useful tutorial! thanks for shearing

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

    Just a remembered coding project with no explanations at all

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

    Thank you so much man it was so helpful

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

    Please make a video on how to deploy this app online. So that we can showcase this on our portfolio.

  • @MMohsin-gx1sv
    @MMohsin-gx1sv Рік тому +1

    way of explanation outstanding 😊

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

    Excellent. Thx much!

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

    Thanks for this video , i have learned a lot from this project also faced some issue like in setting avatar and happy to fix them ,thanks man

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

      Glad to hear that.

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

      Hw did you fix that error?
      Error was in when u click once we get error,should press twice to set avatar

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

      I got axios error.....that post:Err_connection_refused.......how can i resolve this...

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

      @@rupalisharma2674 brief more

    • @akshitasharma9207
      @akshitasharma9207 11 місяців тому

      @@HarshitMaurya after connecting to mongodb , I am having the same error. The database and connection is visible on the mongodb atlas but when I am filling the form and pressing the registration button , I can't see the entries there in the database + its not showing anything that I've wrote inside console.log().

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

    wonderful tutorial!!

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

    Bro also add feature of like showing how many messages are sent by that user too. You didn't even showed who sent this message . Just like whatsApp . Please

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

    Thanks Alot! very helpful😇

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

    Thank you for giving us this content ❤❤

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

    Thank You very much sir... for this amazing react chat app... 🙏🙏

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

    The tutorial was enjoyable to complete. Thanks.

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

    You really awesome !!!

  • @himanshusenjaliya4693
    @himanshusenjaliya4693 11 місяців тому +4

    Sir 1:43:0 per setAvatar Vala page he us me mereko destroy is not a function Vala error aa raha he please Solve this Error🙏🙏🙏

  • @snakevenom8039
    @snakevenom8039 7 місяців тому +3

    intresting video thanks author for video

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

    great job bro it works fine thank you

  • @user-pf2lb6no3p
    @user-pf2lb6no3p 5 місяців тому

    great tuto, thanks !

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

    ufff thanks for this tutorial, it was amazing greetings form Perú 🙋‍♂

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

    Good Job 👌

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

    Thank you so much 🥰🧡

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

    thanks, i finished this video 😃

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

      Great thing. Glad it was helpful ☺️

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

    Awesome
    You got a subscriber

  • @OPGAMER.
    @OPGAMER. 2 роки тому +25

    1:37:29 It is not recommended to use async function directly in useEffect() instead write like this:
    useEffect(() => {
    const fetchData = async () => {
    const data = [];
    // foreach doesn't work with APIs
    for (let i = 0; i < 4; i++) {
    const image = await axios.get(
    `${api}/${Math.round(Math.random() * 1000)}`
    );
    const buffer = new Buffer(image.data);
    data.push(buffer.toString("base64"));
    }
    setAvatars(data);
    setIsLoading(false);
    };
    fetchData();
    }, []);

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

      thank u so much you have really helped alot :) i also was struggling with this for a bit.

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

      thanks a lot man. this bit was really helpful

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

      Thanks Man 😊

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

      Thanks Man !

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

      Thank youu soo much..I was stuck here:)

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

    great video !! Could you please also post a tutorial on how to deploy this project

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

    i love you, my brother. HOW YOU DID EVERY THIS IN JUST FOUR HOURS

  • @muhammadtalha8365
    @muhammadtalha8365 11 місяців тому

    Amazing tutorial brother, it really helped alot. Can you please tell which vs code theme are you using it just looks really cool 🤯

  • @mangleshyadav632
    @mangleshyadav632 8 місяців тому +2

    How the async function working in useEffect hook in your code😢.. I guess we should not use async function inside useEffect as it always returns a promise

  • @IrfanAli-vy2gl
    @IrfanAli-vy2gl 2 роки тому

    Great Video Bro

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

    thanks, bro!, very helpful

  • @ritabratapaul6492
    @ritabratapaul6492 2 роки тому +5

    Sir I have some issue in setAvatar.jsx file .. sir please help !

  • @javagod7777
    @javagod7777 4 місяці тому +1

    thank you very much for this project sir and sir i want to change contacts to my right side so what should i do ? please replay me sir

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

    Cool project.Actually i was thinking of building a full stack web based chat app along with integration for video calling and within video calling a support for sign language detection(so a combo of Fullstack+AI). I am not sure whether this is feasible or not, but will definitely try.

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

    Great job, thank you.

  • @devxlegacy
    @devxlegacy 11 днів тому +1

    bro my guide asking..what is speical in your project with compare to other chat applications...pls tell the answer for this question

  • @aniketbond0072
    @aniketbond0072 18 днів тому +1

    2:23:40 here contacts are not rendering, i don't understand how he get those contacts , did you get those from monodb or what?
    please help , If someone knows plese tell me 🙏🙏

  • @explodingpaprika
    @explodingpaprika 2 роки тому +9

    Great tutorial! can you make a tutorial on the deployment as well?

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

    bahut badhiya 👍

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

    I've seen a bug in your application.
    When more than one person sends a message to a specific person if a user keeps the chat open, then the messages sent by other users with whom the chat is kept open can be seen in the inbox feed, then after refreshing it is fixed.

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

      +1

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

      @@jayvadgama4550 Sorry, I didn't understand what are you saying.
      can please knock me on Whatsapp? or give me your Whatsapp number?

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

    great tutorial!

  • @Riya.1510
    @Riya.1510 2 роки тому +4

    Hii!!! It's the best video for learners. Thanks for uploading. I am having issue in clicking button of create user and login, like when i click on it it doesn't go on chat screen. and not either storing the user database in mongodb table... please help me out.

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

      Please check out the source code from the github link provided in the description.

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

      Did you find the solution?

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

    Merci 🇨🇵

  • @nisargvibhakar8900
    @nisargvibhakar8900 Рік тому +3

    Hey ! first of all great video but at 2:23:15 you were getting empty arrays of users and i am also stuck in that part, can you please help, i do have users in database and i tried console logging contacts, its undefined

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

      i have some problems, he just paused video and restart, and don't axplain, how did he fix the problem

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

      You solved it?

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

      idk if this gonna help but check if you are getting the contacts by adding a console.log(contacts) before the return function

    • @aniketbond0072
      @aniketbond0072 18 днів тому

      i am also having same issue , please help if anyone know about it...!

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

    It was highly useful tutorial please add capabilities of sensing video audio and image to this your project. Thanks a lot

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

    Just starting my MERN journey with this🤩superexcited

  • @TJ-hs1qm
    @TJ-hs1qm 10 місяців тому

    very nice thanks!

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

    Awwesome app! I Learned a lot and tanks for that. The next could you do until the deploy?

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

      1. MERN - MONGODB, EXPRESS JS, REACT JS, NODE JS
      2. MONGODB, EXPRESS JS,REACT NATIVE, NODE JS
      WHICH IS BEST FOR CROSS PLATFORM APP LIKE NETFLIX OR DISNEY+ HOTSTAR?

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

    Very good your class of web developer

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

    if anyone has a problem in update localstorage in setAvatar and appear toast error at first time go to setAvatar contoller and set third argument in findByIdAndUpdate like this {new : true}

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

      Hey There, I see that you would have fixed an bug. Would you like to give me a pull request in github for the bug fix you have done. Doing this will add you into the project contributors. If you want we can do this or else I can push the code myself. Thankyou for the fix.

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

      @@KishanSheth21 thanks so much your are amazing and l learn so much from you and l think you forget fix this in the video but this done on your code in github thanks so much man

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

      @@ahmedelhelw3147 Oh is that so. Thankyou for pointing this out. Glad my content is helpful. If you need any kind of other specific tutorials please let me know. I always make the tutorials that my subscribers want.

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

      Thanks @Ahmed Elhelw for the solution... :)
      There is a another problem that i'm facing in setAvater.jsx file... inside the useEffect of "api"... I'm getting like this
      Error 1:- Effect callbacks are synchronous to prevent race condtions. Put the async function inside.
      Error 2 :- React Hook useEffect has a missing dependency : 'api' . Either include it or remove the dependency array
      Block of Code in setAvatar.jsx :-
      useEffect(async () => {
      const data = [];
      for (let i = 0; i < 4; i++) {
      const image = await axios.get(
      `${api}/${Math.round(Math.random() * 1000)}`
      );
      const buffer = new Buffer(image.data);
      data.push(buffer.toString("base64"));
      }
      setAvatars(data);
      setIsLoading(false);
      }, []);
      can you help me in solving this issue it would be very helpful for me...

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

      @@ranasauravsingh make it like this
      useEffect(() => {
      const setAvatar = async () => {
      const data = [];
      for (let i = 0; i < 2; i++) {
      const image = await axios.get(
      `${api}/${Math.round(Math.random() * 1000)}`,
      { params: { apikey: process.env.REACT_APP_API_KEY } }
      );
      const buffer = new Buffer(image.data);
      data.push(buffer.toString("base64"));
      }
      setAvatars(data);
      setIsLoading(false);
      };
      setAvatar();
      }, []);
      but remove this { params: { apikey: process.env.REACT_APP_API_KEY } } and this to increase the number of requests to get random image

  • @suraj-kumar-gupta
    @suraj-kumar-gupta 8 місяців тому

    #Bug #Error . When we send message from one chat to another. Even if any chat is open in other user screen the message appears in his chat.eg:- Let there are three user A, B and C, so if A send msg to C and on C's screen B's chat is open , the message from A appears in B's chat in C's screen.

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

    Why can't I use yarn start around 14.00 minutes?

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

    good job bro 😊😊😊

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

    With reference to this project can you share any leads reading deployment of the project... Or you have any tutorial/video so that we can make it to live... It would be very helpful... Project is working properly on local server...n want to make it live on web... Any suggestions...?
    N thanks for the video...😇

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

      Will upload soon for the hosting.

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

      Hey Saurav did you deploy this project, if you did, would you help me?

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

      I got axios error.....that post:Err_connection_refused.......how can i resolve this...

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

    Amazing ❤️

  • @faisalkhan-gy5ef
    @faisalkhan-gy5ef Рік тому +4

    Nice tutorial, but why did you use ref instead of state, and if that's because of persisting data b/w DOM re-renders. then, why you did not use Global variable?

    • @hoshankumaran
      @hoshankumaran Рік тому +4

      Great question!
      The reason I used ref instead of state is because ref is better suited for storing mutable data that needs to persist between renders, without triggering a re-render. This is useful when you need to keep track of data that is not directly related to the UI and does not affect the rendering of the component.
      Using state for such data could cause unnecessary re-renders, which can be expensive in terms of performance. Additionally, when using ref, the data can be easily accessed and updated without needing to go through the component's render cycle.
      As for your second question, using a global variable might seem like a valid option, but it can introduce some potential issues, such as:
      Global variables can make it difficult to reason about the state of your application, especially as it grows in complexity.
      Global variables can be accessed and modified from anywhere in your codebase, making it harder to track down where issues are occurring.
      Global variables can also lead to naming conflicts, especially if you are using third-party libraries or have multiple developers working on the same codebase.
      Overall, using ref is a better option when you need to store mutable data that should persist between renders, without causing unnecessary re-renders. While using a global variable may seem like a viable option, it can introduce potential issues and make it harder to reason about the state of your application.

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

    Great tutorial. But there is a small bug, for example when we have three users and when first user send message second user, then first user send message third user, then second user send back first user, then third user also send back message to first user - in that case first user is in problem with frontend. Can I ask you to resolve problem? Besides that it is AWESOME tutorial.

    • @krishnadev.v8867
      @krishnadev.v8867 Рік тому

      maybe you forget add users model .when we find messages using from _id and to _id in messagecontroller part in getAllMessage we need to write
      const messages = await Messages.find({
      users: { $all: [from, to] },
      });

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

      @@krishnadev.v8867 I've encountered the same problem and the bug seems to be not on the db query but the socket. There's two way that a user can receive message in this app, either through/getmsg API or get directly from ws when two parties on the chat are online. Due to incoming messages WebSocket not identifying its origin on the client side, incoming message from any user will be displayed as if it were sent by the user on the current chatpage. This shoubld be fixed by identifying the sender on the client side when dealing with sockets.

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

      i found a workaround by putting a condition in the pushing of the arrivalMessage to the messages useEffect. I also passed the whole data and not the message only from the emitted "msg-receive" for me to get the Id of the sender of the message. now, when setting the arrivalMessage, you can put a new property "from" and extract the data from the props sent from the emitted "msg-receive". lastly, you can compare the current chat id to the "from" property in the arrivalMessage then if true, you can then push the arrivalMessage to the messages state. Hope this helps!

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

      @@reynaldsampelo3527 can you give me code?

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

      ​@@reynaldsampelo3527thanks bro....i wasted my previous 2 days for this shit.... saviour 🫂🙏

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

    great bro 😇

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

    great tutorial

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

    Thank you sir
    It is too helpfull
    And teaching is good but slow also

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

    Your vs code theme is looking very beautiful, Can you share the the name of the Theme please?

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

    great video brother,, keep posting...

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

    Amazing video!!
    Is it enough to be presented as final year college project?

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

      To be honest. This might not be. We used to make full stack projects with much more functionalities than this. And for the final year project you should make something unique, not a project copied from any tutorial. You will learn a lot.

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

      @@KishanSheth21 Thanks for such an honest reply sir , I'll definitely make a project on my own but I just wanted to ask that a project somewhat like a chat app like Facebook is good enough as final year project?

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

      I got axios error.....that post:Err_connection_refused.......how can i resolve this...

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

    Nice thanks

  • @silasromero4502
    @silasromero4502 7 місяців тому

    Hi Kishan, It was an amazing lesson. Learnt allot. Just a question though how could we highlight the chats that has recent unread messages? Would reall help. Thanks a bunch.

  • @ashishmakawana2090
    @ashishmakawana2090 11 місяців тому +1

    Hey i have started making this project but initially i have an error on installing bcrypt. I don't know but in my system using npm I don't install the bcrypt module

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

    Great Video!! Please make a video on Zomato clone too using MERN

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

      Sure Thing Dude, that's a great Idea. List out all of the features that you want me to add in it. And I will start the development as soon as possible for the clone.

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

      @@KishanSheth21 Make it as a multi-vendor food delivery app like there should be dashboard for seller and with google map api.

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

    I like your work so much can i reuse some of the componets

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

    When running the query to update the avatar image I ran into another issue where I couldn't just use the props on the user. I had to say user_data._update.prop. This is my first time using mongo so Im not sure if this was something that was changed recently but if you guys are having the issue where the image sets in the backend but on the front end you are getting back and empty response use this in the user controller:
    return res.json({
    is_set: user_data._update.is_avatar_img_set,
    image: user_data._update.avatar_image,
    });
    Just be sure to update the props accordingly as I have been using underscores instead of camel case for variable names :)

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

    amazing tutorial

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

    Thank you very much