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

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

КОМЕНТАРІ • 330

  • @Glorian692
    @Glorian692 Місяць тому +44

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

    • @asaprogrammer_
      @asaprogrammer_  Місяць тому +7

      Appreciate it!

    • @peterchinoko4339
      @peterchinoko4339 Місяць тому

      ​@@asaprogrammer_ bro can you teach us docker also

    • @__sandeepkuyadav
      @__sandeepkuyadav Місяць тому

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

    • @VarnikaGangwar
      @VarnikaGangwar Місяць тому

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

    • @kartal-ib4gf
      @kartal-ib4gf 24 дні тому

      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?

  • @AdityaVerma-rn9jn
    @AdityaVerma-rn9jn 19 днів тому +12

    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 18 днів тому

      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 16 днів тому

      @@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 15 днів тому

      @@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 13 днів тому

      @@djfhsusbruh6698 has this been solved?

    • @AsK-z3t
      @AsK-z3t 12 днів тому

      please tell me vs code theme name

  • @pastorjorgeaguilar
    @pastorjorgeaguilar Місяць тому +11

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

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

  • @srutikanadas4151
    @srutikanadas4151 14 днів тому +1

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

    • @AsK-z3t
      @AsK-z3t 12 днів тому

      please tell me vs code theme name

  • @Amaster-tw5mo
    @Amaster-tw5mo 13 днів тому +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 🥳

  • @aayushsubedi2879
    @aayushsubedi2879 Місяць тому +2

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

  • @kamranbhatti8104
    @kamranbhatti8104 12 днів тому

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

  • @malik-pureheart3452
    @malik-pureheart3452 22 дні тому +1

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

  • @syedzaheed6214
    @syedzaheed6214 8 днів тому

    man great work ,as my first MERN stack project iv learnt a lot !!

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

  • @harshalsurwase2185
    @harshalsurwase2185 6 днів тому

    who wants to be a fullstack MERN developer, watch this video with great explanation.♥

  • @mohammedimthiyaz5225
    @mohammedimthiyaz5225 Місяць тому +2

    Omg!! you are a blessing to coding community

  • @JeanBaptisteChabi
    @JeanBaptisteChabi Місяць тому +4

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

  • @CRCE__Hardik_Prajapati
    @CRCE__Hardik_Prajapati Місяць тому +1

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

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

  • @gabrielchima3257
    @gabrielchima3257 14 днів тому +1

    Always the best💕💕💕💕

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

  • @shoaibshuja2004
    @shoaibshuja2004 10 днів тому +1

    Great Job! 👍

  • @INVEITABLEMan
    @INVEITABLEMan 4 дні тому

    bro really u r amazing and have robust knowledge and experience

  • @KaisanCode
    @KaisanCode 19 днів тому

    This channel gonna hit 1M sub soon

  • @sarthakitaliya7660
    @sarthakitaliya7660 Місяць тому +1

    thanks a lot. I learnt a lot from the tutorial

  • @balrampatel2002
    @balrampatel2002 3 дні тому +1

    Thanks brother ❤

  • @samadnisar289
    @samadnisar289 Місяць тому

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

  • @robertocastro1120
    @robertocastro1120 Місяць тому

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

  • @_sujit004
    @_sujit004 Місяць тому

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

  • @chintanmakwana9262
    @chintanmakwana9262 Місяць тому

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

  • @shreerammutukundu3149
    @shreerammutukundu3149 Місяць тому +2

    Loved your videos bro, Could you start nextjs based projects

  • @hardikpateriya2692
    @hardikpateriya2692 Місяць тому +1

    you gained a sub, hats off

  • @kiyoutakaayanokouji3701
    @kiyoutakaayanokouji3701 24 дні тому +1

    This dude is the best

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

  • @mohammadanas7620
    @mohammadanas7620 16 днів тому

    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

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

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

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

  • @aryansameer7719
    @aryansameer7719 Місяць тому

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

  • @ajayupadhyay-x4m
    @ajayupadhyay-x4m Місяць тому +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 Місяць тому +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 Місяць тому

      @@vasusrivastav ok

    • @kartal-ib4gf
      @kartal-ib4gf 28 днів тому

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

    • @vasusrivastav
      @vasusrivastav 28 днів тому +1

      @@kartal-ib4gf bro tailwind is for style purpose

    • @zohaibakhtar1256
      @zohaibakhtar1256 20 днів тому

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

  • @devShahriar
    @devShahriar 11 днів тому

    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

  • @tanjimitsolution8449
    @tanjimitsolution8449 Місяць тому

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

  • @marvellousodili5941
    @marvellousodili5941 Місяць тому

    Thank you
    This is just what I wanted

  • @Aitool-r3q
    @Aitool-r3q 27 днів тому

    I completed this awesome project ❤❤

  • @lucasromanowskicorso9897
    @lucasromanowskicorso9897 Місяць тому

    Amazing project. Thanks.

  • @Sneakingmentor
    @Sneakingmentor Місяць тому +1

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

  • @KaisanCode
    @KaisanCode 24 дні тому +1

    Perfect video thanks

  • @synthtech485
    @synthtech485 9 днів тому

    keep it up man❣❣

  • @-mohammadalakedy5417
    @-mohammadalakedy5417 Місяць тому +1

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

  • @sauravyadav4593
    @sauravyadav4593 3 дні тому +1

    i loved this tutorial but i am getting an error called "error during build ". it would be helpful if you can tell me what to do and why is this error !

  • @KwizeraCaleb
    @KwizeraCaleb День тому

    I have subscribed immediately after first 10 min due to how you explain, can you make an auth video with refreshing tokens.

  • @kfcboys5316
    @kfcboys5316 20 днів тому

    Amazing project

  • @johanvillamizar630
    @johanvillamizar630 12 днів тому +1

    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?

  • @dakiworld
    @dakiworld 22 дні тому

    Let's get started

  • @JONAHIDEAS
    @JONAHIDEAS 24 дні тому

    New fan from germany here

  • @dakiworld
    @dakiworld 9 днів тому

    finalised the backend

    • @yashraj6289
      @yashraj6289 День тому

      Bro im not getting port 5501 on npm run dev at backend can u help

  • @khaledhussein957
    @khaledhussein957 Місяць тому

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

  • @prashikathawale7143
    @prashikathawale7143 5 днів тому

    Prerequisites to watch this video

  • @KaisanCode
    @KaisanCode 22 дні тому

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

  • @mdarifislam6014
    @mdarifislam6014 Місяць тому

    Thank you very much bro :)

  • @hamudxd9497
    @hamudxd9497 Місяць тому

    KEEP IT UP ❤

  • @johndemon5651
    @johndemon5651 Місяць тому +5

    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 Місяць тому

      yes i'm facing the same issue

    • @Pwnmhjn22
      @Pwnmhjn22 21 день тому

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

    • @Pwnmhjn22
      @Pwnmhjn22 21 день тому +1

      try this in backend index.js file

    • @AsK-z3t
      @AsK-z3t 12 днів тому

      please tell me vs code theme name

    • @vpsrohan9670
      @vpsrohan9670 11 днів тому

      did u get any solution

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

  • @mohammadanas7620
    @mohammadanas7620 15 днів тому

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

  • @bilal5488
    @bilal5488 Місяць тому

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

  • @leopardbush1619
    @leopardbush1619 4 дні тому

    when I try to use the .env file for the port I get problems with node man unknown error. Do you know what causes this on MacOS. I have searched the internet and cannot find the answer just people asking the same.

  • @tanduong-js5ls
    @tanduong-js5ls 12 днів тому

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

  • @dakiworld
    @dakiworld 10 днів тому

    53:50 Login/Logout/Singup function

  • @sinan193
    @sinan193 Місяць тому

    keep it up kardes!

  • @dakiworld
    @dakiworld 20 днів тому

    1:27:45 Finalised the backend Part

  • @AtikurRahman-bq3cr
    @AtikurRahman-bq3cr 10 днів тому

    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.

  • @KaustubhVatsa-p2m
    @KaustubhVatsa-p2m 12 днів тому

    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.

  • @miw879
    @miw879 Місяць тому

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

  • @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 12 днів тому

      please tell me vs code theme name

    • @BrandonTraviss
      @BrandonTraviss 11 днів тому

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

  • @nelsonke6840
    @nelsonke6840 Місяць тому

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

  • @peterchinoko4339
    @peterchinoko4339 Місяць тому

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

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

  • @rakibhasan5307
    @rakibhasan5307 Місяць тому

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

  • @thecaptain551
    @thecaptain551 Місяць тому

    Sir your projects was awesome, sir can you create one for Expense Tracker App?

  • @Hassanfarooq1033
    @Hassanfarooq1033 Місяць тому

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

  • @zombiezoo1384
    @zombiezoo1384 6 годин тому +1

    Linux is better what you mean? ( This is soo good by the way, Thanks)

  • @shashikaushalsingh1912
    @shashikaushalsingh1912 Місяць тому +1

    Bro i got error in deployment
    only backend part is deployed

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

  • @fikrebereda
    @fikrebereda Місяць тому

    welcome master

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

  • @dogzrgood
    @dogzrgood Місяць тому

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

  • @pavantejagurajapu4956
    @pavantejagurajapu4956 День тому

    I tried a lot on handling group message can you please help me for that😢

  • @botpiyush1922
    @botpiyush1922 Місяць тому +1

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

    • @Radhamani-hj6le
      @Radhamani-hj6le 29 днів тому

      Yes 😢

    • @KRISH-i5h
      @KRISH-i5h 22 дні тому

      Yes bro did you found any solution

    • @botpiyush1922
      @botpiyush1922 21 день тому

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

  • @a2thegenius343
    @a2thegenius343 Місяць тому

    Nice tutorial
    Just one problem , everyone can see all the users and no privacy maintained

  • @ethanarcharvin
    @ethanarcharvin 10 днів тому

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

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

  • @navdeepsingh6905
    @navdeepsingh6905 29 днів тому

    can you make video on which vscode extensions you use

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

  • @dummymail2495
    @dummymail2495 Місяць тому

    Awesome project. Thank you bruh. Can u please add the authentication and authorization as passing token in the headers from backend and receiving it from headers in frontend. Please? Or can use db session tokens. Or can u please make a small tutorials that covers these concepts? Pleases bruh❤

  • @JEKILIFE
    @JEKILIFE 8 днів тому

    1:27:41 finalised the project

  • @Abdul_rafey
    @Abdul_rafey Місяць тому

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

  • @adnanamin3666
    @adnanamin3666 28 днів тому

    Request for a full fledged traditional inventory system with POS system build! Please 🙏🙏🙏🙏🙏🙏

  • @JEKILIFE
    @JEKILIFE 49 хвилин тому

    3:52:52 Sending message Part

  • @furry2fun
    @furry2fun 15 днів тому

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

  • @Nomi951
    @Nomi951 Місяць тому

    Really appreciate it but it would be better if you use bigger fonts,

  • @AshwiniKumar-s7c
    @AshwiniKumar-s7c Місяць тому

    fab project

  • @robertocastro1120
    @robertocastro1120 Місяць тому

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