MERN Stack Project: Realtime Chat App Tutorial - React.js & Socket.io

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น • 275

  • @AdityaVerma-rn9jn
    @AdityaVerma-rn9jn 10 วันที่ผ่านมา +9

    Finished the Whole thing,
    This is an absolute goldmine if somebody is beginning because it covers
    auth,real-time communication, using UI libraries,deployment,advanced react,global state managment..etc
    I will now create my own projects while looking at this repo as a reference of best practices.
    Thank you so much man

    • @djfhsusbruh6698
      @djfhsusbruh6698 8 วันที่ผ่านมา

      I am getting an error "Cannot GET /api/auth/signup" when I try to run the initial routes set up.
      Did you get the same?

    • @michael1477
      @michael1477 6 วันที่ผ่านมา

      @@djfhsusbruh6698 its because signup endpoint is of POST method, not GET, while sending request select post method in postman, or if you are using axios then use axios.post()

    • @AdityaVerma-rn9jn
      @AdityaVerma-rn9jn 5 วันที่ผ่านมา

      @@djfhsusbruh6698 check for typos(you could be writing Signup in backend and calling signup in frontend check very carefully) and more importantly save the changes you make.
      And try to debug the issues using console logs to check where is it going wrong step by step.

    • @coderblip8435
      @coderblip8435 3 วันที่ผ่านมา

      @@djfhsusbruh6698 has this been solved?

    • @AsK-z3t
      @AsK-z3t 2 วันที่ผ่านมา

      please tell me vs code theme name

  • @Glorian692
    @Glorian692 หลายเดือนก่อน +38

    Bro the thing i will never regret in my life is subscribing to your channel. You are really a mentor.

    • @asaprogrammer_
      @asaprogrammer_  หลายเดือนก่อน +8

      Appreciate it!

    • @peterchinoko4339
      @peterchinoko4339 หลายเดือนก่อน

      ​@@asaprogrammer_ bro can you teach us docker also

    • @__sandeepkuyadav
      @__sandeepkuyadav 28 วันที่ผ่านมา

      @@asaprogrammer_ will it be possible for you to make canva clone

    • @VarnikaGangwar
      @VarnikaGangwar 22 วันที่ผ่านมา

      can you please tell me.. have he used daisyUi for whole fronted?

    • @kartal-ib4gf
      @kartal-ib4gf 15 วันที่ผ่านมา

      When I log in as a new user, it goes directly to the chat page. The sign-in section does not open. Why is this? Can you help me?

  • @pastorjorgeaguilar
    @pastorjorgeaguilar หลายเดือนก่อน +11

    At the end, you dont know how much i am waiting for this proyect. Thanck you zenzei

  • @srutikanadas4151
    @srutikanadas4151 5 วันที่ผ่านมา +1

    this is best mern stack project I have seen in TH-cam . no other youtuber shows the deployment process. Going to subscribe your channel from now.

    • @AsK-z3t
      @AsK-z3t 2 วันที่ผ่านมา

      please tell me vs code theme name

  • @DellG15-e3h
    @DellG15-e3h หลายเดือนก่อน +8

    It is the first project that made me compelled to build it since i saw it.Thanx for such a valuable content and appreciating u a lot❤!!

  • @Amaster-tw5mo
    @Amaster-tw5mo 3 วันที่ผ่านมา +1

    Its great man, I loved it because it teaches so much and yet leaves a lot to try by ourselves, I personally made a lot of things by myself but this video always helped me figure out things

  • @nelsonke6840
    @nelsonke6840 หลายเดือนก่อน +5

    Back with another banger video 🥳

  • @shoaibshuja2004
    @shoaibshuja2004 วันที่ผ่านมา +1

    Great Job! 👍

  • @kamranbhatti8104
    @kamranbhatti8104 3 วันที่ผ่านมา

    this is first time i'm watching your video and you won my heart buddy way of explanation is so good you test your code as you write instead of writing whole application code (which confused me alot ) then test it. great brother keep it up.

  • @SAMUEL__DEV2
    @SAMUEL__DEV2 หลายเดือนก่อน +3

    At last the course I've been waiting for ❤❤❤

  • @aayushsubedi2879
    @aayushsubedi2879 หลายเดือนก่อน +2

    Was just scrolling on your profile , to see if any new video is there and here it is 🎉

  • @malik-pureheart3452
    @malik-pureheart3452 13 วันที่ผ่านมา +1

    Bro! I follow along complete video and deploy the app in production successfully. Thanks a lot❤🎉

  • @gabrielchima3257
    @gabrielchima3257 5 วันที่ผ่านมา +1

    Always the best💕💕💕💕

  • @mohammedimthiyaz5225
    @mohammedimthiyaz5225 หลายเดือนก่อน +2

    Omg!! you are a blessing to coding community

  • @sonalkumar3366
    @sonalkumar3366 หลายเดือนก่อน +3

    Hey you are really amazing because I have learnt a lot from you. It would be great if you showed us like in a short or a short video separately how to deploy it in Vercel or Netlify. Keep doing the great stuff buddy! 💪🏻

  • @CRCE__Hardik_Prajapati
    @CRCE__Hardik_Prajapati หลายเดือนก่อน +1

    thank you so much for this. I am preparing for full stack roles. this would definetly help.

  • @JeanBaptisteChabi
    @JeanBaptisteChabi หลายเดือนก่อน +4

    Thanks for that statement, windows fans here, and yes windows is better❤❤

  • @swarnabhamajumder9561
    @swarnabhamajumder9561 หลายเดือนก่อน

    Superb project sir, I have been follwoing this channel for a while now and I have learned a lot form you. Can expect some nextjs project next or mern project but in full typescript, it would be great to learn all of it from you. Thank you again for this amazing project learned a lot.

  • @hardikpateriya2692
    @hardikpateriya2692 หลายเดือนก่อน +1

    you gained a sub, hats off

  • @KaisanCode
    @KaisanCode 10 วันที่ผ่านมา

    This channel gonna hit 1M sub soon

  • @panzagamesplay902
    @panzagamesplay902 หลายเดือนก่อน

    One of the best channel for MERNSTACK,I have learn alot from your tutorials, Please can you do video on Blog apps,where there is admin dashboard

  • @sarthakitaliya7660
    @sarthakitaliya7660 28 วันที่ผ่านมา +1

    thanks a lot. I learnt a lot from the tutorial

  • @_sujit004
    @_sujit004 หลายเดือนก่อน

    Thank you, i build my another project by following you 💞

  • @chintanmakwana9262
    @chintanmakwana9262 หลายเดือนก่อน

    you are just genius.....out of words ......great work

  • @robertocastro1120
    @robertocastro1120 27 วันที่ผ่านมา

    Thank you bro, i have just finished and it worked well

  • @mohammadanas7620
    @mohammadanas7620 6 วันที่ผ่านมา

    From the start of making front end daisy UI is instatlled and use keep a check over it and revise for further use and 2:02:00 toaster of react revise it again after completing the project

  • @samadnisar289
    @samadnisar289 23 วันที่ผ่านมา

    This channel is the best thing ever happend to youtube, i love your voice tho.

  • @kiyoutakaayanokouji3701
    @kiyoutakaayanokouji3701 14 วันที่ผ่านมา +1

    This dude is the best

  • @shakirkamal4958
    @shakirkamal4958 9 วันที่ผ่านมา

    Thank you so much for this, i really like your explanation ,thank youu

  • @marvellousodili5941
    @marvellousodili5941 หลายเดือนก่อน

    Thank you
    This is just what I wanted

  • @KaisanCode
    @KaisanCode 15 วันที่ผ่านมา +1

    Perfect video thanks

  • @lucasromanowskicorso9897
    @lucasromanowskicorso9897 หลายเดือนก่อน

    Amazing project. Thanks.

  • @ajayupadhyay-x4m
    @ajayupadhyay-x4m 28 วันที่ผ่านมา +1

    Bro, you're an amazing mentor! The way you explain and teach is fantastic. Thanks, brother! I completed it in 2 days with a much better understanding.

    • @vasusrivastav
      @vasusrivastav 28 วันที่ผ่านมา +2

      Really did you complete it
      As I have facing the errors of pictures and profilepic not uploaded on cloud
      Could you share host url ,
      As I have doubt because it's source code also broken and hosted url is not available

    • @ajayupadhyay-x4m
      @ajayupadhyay-x4m 24 วันที่ผ่านมา

      @@vasusrivastav ok

    • @kartal-ib4gf
      @kartal-ib4gf 19 วันที่ผ่านมา

      @@vasusrivastav tailwindss does not print hello text to the screen, I tried everything

    • @vasusrivastav
      @vasusrivastav 19 วันที่ผ่านมา +1

      @@kartal-ib4gf bro tailwind is for style purpose

    • @zohaibakhtar1256
      @zohaibakhtar1256 10 วันที่ผ่านมา

      @@ajayupadhyay-x4m bro can you please send your repo link.

  • @Aitool-r3q
    @Aitool-r3q 18 วันที่ผ่านมา

    I completed this awesome project ❤❤

  • @kfcboys5316
    @kfcboys5316 11 วันที่ผ่านมา

    Amazing project

  • @BLINKBOXHD
    @BLINKBOXHD หลายเดือนก่อน

    Hello, another great tutorial as always! Could you do more beginner projects? You explain new concepts way better than most courses I have paid for

  • @shreerammutukundu3149
    @shreerammutukundu3149 หลายเดือนก่อน +2

    Loved your videos bro, Could you start nextjs based projects

  • @aryansameer7719
    @aryansameer7719 21 วันที่ผ่านมา

    im almost done with the chat app that u made last time and today i found this video in my feed😢😢

  • @MakeHappyBeHappy2426
    @MakeHappyBeHappy2426 หลายเดือนก่อน +1

    Hi,
    I hope you're doing well! I’m a big fan of your content and have learned so much from your tutorials. They’ve been incredibly helpful in improving my skills in web development.
    I was wondering if you could consider creating a crash course on Next.js.
    Thank you for all the effort you put into creating valuable content. Looking forward to your reply!

  • @tanjimitsolution8449
    @tanjimitsolution8449 หลายเดือนก่อน

    Thank you so much for this amazing content. Please make next time banking system

  • @JONAHIDEAS
    @JONAHIDEAS 14 วันที่ผ่านมา

    New fan from germany here

  • @johndemon5651
    @johndemon5651 28 วันที่ผ่านมา +4

    When I try to upload the file, this error is showing. And the file is 100kb image file. How can I solve this ?
    "PayloadTooLargeError: request entity too large"

    • @InternMail-r6c
      @InternMail-r6c 28 วันที่ผ่านมา

      yes i'm facing the same issue

    • @Pwnmhjn22
      @Pwnmhjn22 11 วันที่ผ่านมา

      app.use(express.json({ limit: "10mb" }))
      app.use(express.urlencoded({ limit: '10mb', extended: true }));

    • @Pwnmhjn22
      @Pwnmhjn22 11 วันที่ผ่านมา

      try this in backend index.js file

    • @AsK-z3t
      @AsK-z3t 2 วันที่ผ่านมา

      please tell me vs code theme name

    • @vpsrohan9670
      @vpsrohan9670 2 วันที่ผ่านมา

      did u get any solution

  • @mdarifislam6014
    @mdarifislam6014 26 วันที่ผ่านมา

    Thank you very much bro :)

  • @-mohammadalakedy5417
    @-mohammadalakedy5417 หลายเดือนก่อน +1

    Thanks burak , We Want Build lms courses platform with nextjs bro ❤

  • @hamudxd9497
    @hamudxd9497 หลายเดือนก่อน

    KEEP IT UP ❤

  • @mohammadanas7620
    @mohammadanas7620 6 วันที่ผ่านมา

    2:08:00 continue from here why not getting the error when filling wrong details and still its not showing the error.

  • @devShahriar
    @devShahriar วันที่ผ่านมา

    You missed a simple feature of typing notification that's the only thing I didn't get on these project everything is done in amazing way

  • @tanduong-js5ls
    @tanduong-js5ls 2 วันที่ผ่านมา

    I have a trouble, render show error that sh 1: vite: not found => build failed. How I can fix this

  • @dakiworld
    @dakiworld 13 วันที่ผ่านมา

    Let's get started

  • @pastorjorgeaguilar
    @pastorjorgeaguilar หลายเดือนก่อน +1

    If its posible a Udemy clone Whit react and mern stack, no next js, only react Like you have done the other proyect, nobody have done something like that. Thanks

  • @Sneakingmentor
    @Sneakingmentor หลายเดือนก่อน +1

    Fully excited. Bro can you bring a mini ecommerce platform in Next js with payment gateway

  • @AtikurRahman-bq3cr
    @AtikurRahman-bq3cr วันที่ผ่านมา

    It's a nice project, but I have a small problem: When I write something in one message input and don't send it, and then go to another chat, it contains the previous message input.

  • @rakibhasan5307
    @rakibhasan5307 27 วันที่ผ่านมา

    what extension did you use?the details of any library is showing nicely whle coding

  • @Hassanfarooq1033
    @Hassanfarooq1033 หลายเดือนก่อน

    .Amazing content on TH-cam🔥... Thanks alot ❤

  • @sinan193
    @sinan193 27 วันที่ผ่านมา

    keep it up kardes!

  • @ethanarcharvin
    @ethanarcharvin 18 ชั่วโมงที่ผ่านมา

    help bro, my login "data" and signup "data" are undefined. like (reading 'data'). help sir

  • @peterchinoko4339
    @peterchinoko4339 หลายเดือนก่อน

    🎉Bro, is not in the kitchen but he cooked ❤

  • @BrandonTraviss
    @BrandonTraviss หลายเดือนก่อน +2

    1:23:22
    res.status(500).json({ error: "Internal Server Error" });
    should be
    res.status(500).json({ message: "Internal Server Error" });
    or every other
    res.status(500).json({ message: "Internal Server Error" });
    should be
    res.status(500).json({ error: "Internal Server Error" });
    Just to be consistent. Since we have not touched the frontend yet in the video I do not know which so I am just going with message and will change all to error later if need be to make clientside errors easier to display by checking if error exists in the response object

    • @AsK-z3t
      @AsK-z3t 2 วันที่ผ่านมา

      please tell me vs code theme name

    • @BrandonTraviss
      @BrandonTraviss 2 วันที่ผ่านมา

      @@AsK-z3t I didnt have an issue with the theme section of this video. Check the source code and compare your code if you are having issues is my suggestion. :)

  • @johanvillamizar630
    @johanvillamizar630 2 วันที่ผ่านมา

    Hello, I am doing all the steps in the video, I am in the check part, when I send the check request from PostMan it gives me the error: Error in protectRoute middleware: Cannot read properties of undefined (reading 'jwt')
    I verified the code and I have it the same as the video, can you please help me?

  • @khaledhussein957
    @khaledhussein957 หลายเดือนก่อน

    I liked it 😊 please next video build freelancer websites using mern 🙂

  • @KaustubhVatsa-p2m
    @KaustubhVatsa-p2m 3 วันที่ผ่านมา

    hello bro thanks for the detailed tutorial ... learnt a lot here ... and that too in detail ...
    also a req .. could you please upload the tutorial on how to handle googleoauth 2.0 i.e signin with google method .. using Jwt token ... also one more question .. isnt saving the message in our database like this a privacy issue ? how can we use encryption methods in here .. expecially in terms of images ?
    once again thanks a lot.

  • @botpiyush1922
    @botpiyush1922 22 วันที่ผ่านมา +1

    Does anyone got the error users.map is not a function at 2:55:45

    • @Radhamani-hj6le
      @Radhamani-hj6le 19 วันที่ผ่านมา

      Yes 😢

    • @KRISH-i5h
      @KRISH-i5h 13 วันที่ผ่านมา

      Yes bro did you found any solution

    • @botpiyush1922
      @botpiyush1922 12 วันที่ผ่านมา

      @KRISH-i5h yea... just check how you are sending messages on server side in backend.!

  • @shashikaushalsingh1912
    @shashikaushalsingh1912 หลายเดือนก่อน +1

    Bro i got error in deployment
    only backend part is deployed

  • @CRCE__Hardik_Prajapati
    @CRCE__Hardik_Prajapati หลายเดือนก่อน

    Can you please share the Diagram you made at 30:01 it would be too helpfull to make notes for me.

  • @dakiworld
    @dakiworld 10 วันที่ผ่านมา

    1:27:45 Finalised the backend Part

  • @dakiworld
    @dakiworld 13 ชั่วโมงที่ผ่านมา

    53:50 Login/Logout/Singup function

  • @bilal5488
    @bilal5488 หลายเดือนก่อน

    🥺thankewwww sooooooo muchhhhhhhhhhh ap looking for that and i have list out 2 to 3

  • @AllInOne-vz3cm
    @AllInOne-vz3cm หลายเดือนก่อน

    Very Informative video Sir,
    How to Implement the Emoji Picker in text area and set the lock concept for privacy
    Please guide Sir

  • @dogzrgood
    @dogzrgood หลายเดือนก่อน

    you never declared authRoutes function 8:27. so how come you are able to import it?

  • @technicalgaming6941
    @technicalgaming6941 23 วันที่ผ่านมา

    What's the theme? And how the code is automatically generation? Give the both extension name plz

  • @avijitmalik5290
    @avijitmalik5290 หลายเดือนก่อน

    Thanks❤

  • @furry2fun
    @furry2fun 6 วันที่ผ่านมา

    i have run this code but i get not found error, cannot acess /get

  • @robertocastro1120
    @robertocastro1120 หลายเดือนก่อน

    It’s possible to make a uml diagram and the relations between classes?

  • @malik-pureheart3452
    @malik-pureheart3452 14 วันที่ผ่านมา

    Bro At the time of deployment build command not working..._! Please guide me?

  • @vpsrohan9670
    @vpsrohan9670 2 วันที่ผ่านมา

    hi am getting a payload error while updating the profile pic ,any fix ?

  • @Abdul_rafey
    @Abdul_rafey หลายเดือนก่อน

    What vscode extention you use for convert folders files into icon plzz tell me

  • @frisupremacyday04
    @frisupremacyday04 25 วันที่ผ่านมา

    bro which vs code theme you are using?

  • @GrayCodeGaming
    @GrayCodeGaming 13 วันที่ผ่านมา

    The code is best practices and production level ? Can u give the documentation link also ?

  • @KaisanCode
    @KaisanCode 12 วันที่ผ่านมา

    54:14 - update
    1:02:25 - cloudinary

  • @georgekibe1786
    @georgekibe1786 หลายเดือนก่อน

    This is so great, I love this and needed it, would you show us how to dockerize this using nginx for production?
    Keep on educating us

  • @divyanshkrishnatreya4594
    @divyanshkrishnatreya4594 หลายเดือนก่อน

    hey brother thanks a ton for the project tutorial but as i am signing up as a user its showing nothing after clicking the signup button. do you have any diagnostics for that??

  • @navdeepsingh6905
    @navdeepsingh6905 19 วันที่ผ่านมา

    can you make video on which vscode extensions you use

  • @kuruvi8595
    @kuruvi8595 9 วันที่ผ่านมา

    How mongodb user_db ,user shown ,we create or it automatically created. Tell Step by step . How to saw stored data ??

    • @CodeWithYajat
      @CodeWithYajat 8 วันที่ผ่านมา

      Sechma variable name for example, Users then the function that you wanna use like Users.save, Users.create, Users.find, etc

  • @darshantawte7435
    @darshantawte7435 18 วันที่ผ่านมา

    Can you please use a components library like shadCN or MaterialUI in next fullstack app ?

    • @coderblip8435
      @coderblip8435 18 วันที่ผ่านมา

      he uses shadCn in his spotify clone

  • @ABHISHEKSINGH-qc3or
    @ABHISHEKSINGH-qc3or 4 วันที่ผ่านมา

    thanks man 👨 👨

  • @mohammadabbas1623
    @mohammadabbas1623 หลายเดือนก่อน

    great job

  • @afaqahmad8918
    @afaqahmad8918 15 วันที่ผ่านมา +1

    Hey What is the name of your vs code theme?

    • @asaprogrammer_
      @asaprogrammer_  14 วันที่ผ่านมา +1

      Houston - from Astro

    • @afaqahmad8918
      @afaqahmad8918 13 วันที่ผ่านมา

      @@asaprogrammer_ Thank you . and I've completed this app from your video.

  • @AshwiniKumar-s7c
    @AshwiniKumar-s7c 28 วันที่ผ่านมา

    fab project

  • @Pratiyank
    @Pratiyank หลายเดือนก่อน

    Bro i have created this one myself just on thing is missing that is sending media i will try to implement that also in future

  • @EsamGirgis
    @EsamGirgis หลายเดือนก่อน

    Can you add apart for implementano video calls and audio

  • @fikrebereda
    @fikrebereda หลายเดือนก่อน

    welcome master

  • @radbirden6111
    @radbirden6111 7 วันที่ผ่านมา

    Is
    this good for beginners with no react or mern experience?

    • @yt_goluyadav
      @yt_goluyadav 4 วันที่ผ่านมา

      experience comes with projects, but you must have knowledge of MERN stack

    • @coderblip8435
      @coderblip8435 3 วันที่ผ่านมา +1

      best to have knowledge of them first mate

  • @jgiggkgn
    @jgiggkgn 4 วันที่ผ่านมา

    thnxs bro

  • @nelsonke6840
    @nelsonke6840 หลายเดือนก่อน

    Can you add apart for implementing video calls , groups and emojis bcoz I really learn a lot from your videos

  • @miw879
    @miw879 21 วันที่ผ่านมา

    I wish you had added group chat option as well..

  • @АмирланАубакиров
    @АмирланАубакиров 19 วันที่ผ่านมา

    I didn't understand why u used cloudinary?

    • @coderblip8435
      @coderblip8435 19 วันที่ผ่านมา

      i havent watched the tutorial, but cloudinary can be used as a cloud storage for media files, storing these media files in a database like mongo can significantly affect performance of the API's, so cloud storage like cloudinary, amazon s3 buckets are typically used to store media files and the URL is then stored in the DB

    • @АмирланАубакиров
      @АмирланАубакиров 19 วันที่ผ่านมา

      @@coderblip8435 what is best options instead of cloudinary?

    • @coderblip8435
      @coderblip8435 18 วันที่ผ่านมา

      @@АмирланАубакиров s3 bucket, imagekit io possibly, etc

  • @bilal5488
    @bilal5488 หลายเดือนก่อน

    Did it have infinite scrolling

  • @ydn4
    @ydn4 16 วันที่ผ่านมา

    Thanks bro, can you add to this like functionality like telegram ? call, video etc... ?

  • @AbhishekYadav-ch2mn
    @AbhishekYadav-ch2mn 29 วันที่ผ่านมา

    when will you make projects on microservices & microfrontend? or you also dont know like me?

  • @AbcTawte
    @AbcTawte หลายเดือนก่อน

    Can you please implement CI/CD , docker and kubernetes etc Devops part as well to these projects. Creating dockerfile, docker-compose yaml file and complete deployment is what will make these projects even more awesome. I think you already have deployed a chat app before and there is no novelty factor here unfortunately.