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

[@KishanSheth21]

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

[@mohamedjamesha1289]

Awesome tutorial brother, try writing nodejs codes in es6 format

[@one_thread]

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

[@one_thread]

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

[@one_thread]

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

[@supreetkaur813]

Hello . Can I get report for this project?

[@sevinjyagubzade5544]

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

[@shubhammukherjee3832]

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]

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]

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]

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

[@sp6370]

The best one real time app tutorial

[@WillSmith-qt7me]

Great MERN chat tutorial. Thanks, friend.

[@zealtesfaye3052]

Every minute was an hour of lesson, thanks.🙌

[@nidhikumar1392]

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

[@zealtesfaye3052]

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

[@KishanSheth21]

Happy to help 🙌

[@maheshthombare-no8ze]

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

[@kunaldhuria3935]

Thank you for making this, forever grateful🙏

[@theblacknerd3185]

Best tutorial ever on KZbin! 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

[@KishanSheth21]

Glad to hear it.

[@rachitgupta4143]

@@KishanSheth21 good

[@michaelbaah2035]

Very beautiful big man. Awesome.

[@KishanSheth21]

Big thanks

[@thecoolguyeli1464]

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

[@KishanSheth21]

Glad it helped.

[@OPGAMER.]

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

[@candelasmezauriel6806]

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

[@aditya_sipani]

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

[@candelasmezauriel6806]

Sure, i don't have any problem

[@NZJonosong]

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

[@vrfEducation]

super super cool man. I've learned a lot. Thanks

[@luizbarros2295]

Nice content dude! Thank you!

[@shaikhsanuar5339]

Awesome bro. Keep up making such incredible projects

[@mritunjay7065]

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

[@KishanSheth21]

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

[@KishanSheth21]

Stay Tuned.

[@rupalisharma2674]

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

[@priyanshupathak2693]

@@rupalisharma2674 same

[@manasparatane1855]

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

[@aramv898]

Good Job bud - You done pretty well

[@sohanYT69]

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

[@KishanSheth21]

Glad you liked it!

[@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]

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

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

[@HITESHKUMAR-dv6se]

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

[@fanruijie4890]

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

[@manupareek5986]

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

[@KishanSheth21]

Sure thing.

[@umarfarooq6145]

Just a remembered coding project with no explanations at all

[@MMohsin-gx1sv]

way of explanation outstanding 😊

[@KishanSheth21]

Thanks a lot 😊

[@ALMUMTAZELECTRONICS-jv5uj]

great work dude....appreciated

[@Krizoum]

Thank you so much man it was so helpful

[@tusharsaini6982]

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

[@blitzofromimp9022]

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

[@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]

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

[@prathamattri9083]

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)

[@snakevenom8039]

intresting video thanks author for video

[@shubhamkr0]

my validations are not working after making the login page....before that, it was working fine.....anyone else who had same problem and resolved it

[@juriwho697]

Really useful tutorial! thanks for shearing

[@KishanSheth21]

You're welcome 😊

[@vitragvasa5392]

Great work brother, keep them coming.

[@KishanSheth21]

Thanks, will do!

[@EmmanuelYidana]

good work there, we love it.

[@paraschand2001]

Thank you for giving us this content ❤❤

[@KishanSheth21]

Glad you liked it ❤️

[@sohrabhossain9905]

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.

[@jaredbecker3152]

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]

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

[@sumitdhar1708]

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

[@shreya5235]

Thanks Alot! very helpful😇

[@KishanSheth21]

Glad it helped 🙂

[@OPGAMER.]

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

[@manishbhandariproductions]

wonderful tutorial!!

[@KishanSheth21]

Thank you! 😊

[@nguyenhuuanhtuan5360]

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

[@KishanSheth21]

Glad to hear it out.

[@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]

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

[@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]

Glad to hear that.

[@mukeshabhi6878]

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

[@rupalisharma2674]

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

[@HarshitMaurya]

@@rupalisharma2674 brief more

[@akshitasharma9207]

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

[@Anonymouseab]

great job bro it works fine thank you

[@CandidoZfinda]

Very good your class of web developer

[@IbrahimaDieng-l3g]

great tuto, thanks !

[@javagod7777]

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

[@billblair3155]

Excellent. Thx much!

[@KishanSheth21]

You're welcome!

[@rikipebrianto560]

thanks, i finished this video 😃

[@KishanSheth21]

Great thing. Glad it was helpful ☺️

[@luan3762]

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]

Great to hear!

[@vanshikasrivastava132]

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

[@akshitasharma9207]

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

[@luan3762]

@@akshitasharma9207 what's your code

[@luan3762]

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

[@abhi_9779]

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

[@eneseren8332]

The tutorial was enjoyable to complete. Thanks.

[@DevendraSingh-oq2re]

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

[@ajithvijayakumaran8485]

great video brother,, keep posting...

[@tinvo5369]

thanks, bro!, very helpful

[@darshantawte7435]

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.

[@vishalsinghdhamiak47]

Just starting my MERN journey with this🤩superexcited

[@himanshumishra5857]

Awesome You got a subscriber

[@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]

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

[@JohnCena-uf8sz]

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

[@silasromero4502]

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.

[@caloriecoin_ceo7847]

You really awesome !!!

[@KishanSheth21]

Thankyou 😀

[@aniketbond0072]

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

[@smartfastplan2188]

Thank you so much 🥰🧡

[@KishanSheth21]

You’re welcome 😊

[@_tech_js]

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

[@jotarz96]

Great job, thank you.

[@KishanSheth21]

Thanks for watching!

[@johnattandias9846]

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

[@willyhorizont8672]

bahut badhiya 👍

[@KishanSheth21]

Thankyou.

[@RichardAllccaLlano]

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

[@KishanSheth21]

Glad you liked it!

[@IrfanAli-vy2gl]

Great Video Bro

[@shegerbuy]

Good Job 👌

[@KishanSheth21]

Thanks 😅

[@walisonteodoro2726]

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

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

[@saharahmadi6586]

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

[@KishanSheth21]

Noted

[@AP-vo7gp]

Thanks alot big brdr you can only help us !!!

[@stuffbyfelix]

Hey, nice tutorial! Is there a reason why in messageSchema you have the "from"-user both in sender as well as in the users array?

[@himanshusenjaliya4693]

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

[@Techno_Vraj]

same here bro

[@angelicobravante5398]

amazing tutorial

[@KishanSheth21]

Glad you think so!

[@explodingpaprika]

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

[@KishanSheth21]

Yes, soon

[@khacnhutran942]

deploy please i love your video so much

[@TJ-hs1qm]

very nice thanks!

[@Poojap98765]

Great Content sir !!!👌🏻 I am facing problem in emoji-picker please help

[@jaredbecker3152]

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

[@OPGAMER.]

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]

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

[@saksham5231]

thanks a lot man. this bit was really helpful

[@ravalmeet945]

Thanks Man 😊

[@sachinasodekar2092]

Thanks Man !

[@sanjanaiyengar8256]

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

[@devxlegacy]

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

[@ishaangautam6934]

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

[@KishanSheth21]

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]

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

[@hustlereview]

good job bro 😊😊😊

[@KishanSheth21]

Thanks 😄

[@muhammadtalha8365]

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

[@meenukathuria8158]

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

[@KishanSheth21]

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]

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

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

[@ashishmakawana2090]

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

[@diooktarovelino3546]

Best tutorial

[@yacoubasylla7358]

Thank you very much

[@caloriecoin_ceo7847]

I hope you make tutorial about twitter clone too

[@KishanSheth21]

Sure thing dude.

[@thetopthings8915]

nice tutorial.

[@amrhesham6383]

itis good tutorial, i hope you talk alos about uploading nextjs and nodejs on heroku , thanks

[@ujjawalpugalia2123]

best tutorial.

[@nisargvibhakar8900]

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]

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

[@di0kGG]

You solved it?

[@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]

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

[@sarangkkl214]

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

[@KishanSheth21]

Yes you can😀

[@leandrohenrique6056]

Amazing ❤️

[@KishanSheth21]

Thanks 😄

[@aniketbond0072]

bro what is the theme that you installed in VS code

[@rahulkushwah7342]

great bro 😇

[@KishanSheth21]

Thank you so much 😀

[@bintoko1524]

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

[@mangleshyadav632]

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

[@shasathuo1966]

Nice thanks

[@KishanSheth21]

Welcome

[@ANKITCHAUHAN-do2ug]

Best video bro