How To Create A Messaging App With Socket.io And React

[@zdarofMERGAITES]

I can't believe that 8 months earlier I couldn't understand how a simple function with parameters works. And now I'm watching your video in React at 1.5 speed. To everyone who might be struggling: time and effort will take you where you want!

[@mariiatkachova570]

Congratulations!!! Keep up!

[@bartek4033]

This is becasue of shitty instructors. There's a lot of them now.

[@Pritamdaspk]

Same

[@dawoodshahzad9082]

same here brother

[@fater8711]

OH SAME

[@JohnDoe-rj2kf]

this is amazing, but I feel like without the tutorial I woud never be able to do something like this. Beyond words. No way I would do this by myself

[@charlescaldwell2830]

As always Kyle, amazing content!!! FYI... For anyone that happens to be using Bootstrap 5, some of the classNames may not work. For example, at 10:54, "mr-2" (margin right) would instead be "me-2" (margin end). This is also the case with "border-right" needs to be "border-end" at timestamp 27:14.

[@АннаСеменова-е1р]

you are the best! thank you)

[@verdyguo]

Lifesaver mate

[@eduardogpi123]

@@verdyguo recomended bs5 documentation, it's changing any class...

[@tttylerrr00]

Life saver!!!!❤❤❤

[@prateekrajput2646]

Thanks for saving our lives

[@sanskaarpatni9137]

Happy teacher's day Kyleeeee

[@pizzapanni]

Lol.

[@rajesh-royal]

yes

[@pratyushshivam1620]

@@pizzapanni what Lol?

[@LabhamJain]

@AmazingFacts No Fiance. 😜😜😜😝😝😝😝😝😝😝😝😝😝😝😝😝😝

[@observingatoms]

How will you eat if you are not hungry. Similarly, how will you learn when you are not interested. Teaching is not that special. Many try to spit knowledge, but most do it in the wrong manner. A real teacher guides you, not leaves you confused after telling facts. Teacher is a business, a trade of satisfaction for knowledge. We are happy after learning from someone but then we are unhappy to know we have to guide ourselves further and become our own teachers. Teacher's day is actually a celebration of our own selves, not others who incompletely guide us. We are our own masters, our destiny is in our own hands.

[@traceuse13]

Kyle, you have made learning web dev soooo much easier for me and I appreciate all the hard work you put into this long video. There are so many people out there who are brilliant developers/engineers but who are really bad at explaining things. I'm sorry :P You are so good at what you do. Thank you for providing this knowledge for free. You are the most consistently helpful dev KZbinr I have encountered.

[@Ultoman10]

I really appreciate your videos so far because you cut out all of the unnecessary crap that makes learning a new concept more confusing. More coding tutorials should be like this!

[@adamCoder]

Man, you're at God level w/ the react. Excelsior, mate.

[@raocharlie4679]

On 17:12 , “ && jsonValue != ‘undefined’” should be added to the ‘if’ parentheses because the browser has returned the error of ‘undefined’ which is a string not a undefined data type. I have tried on Chrome, not sure how other browsers react under this issue.

[@clrs8995]

thanks

[@raocharlie4679]

@@clrs8995 No problem 😇

[@roshatron]

This is exactly what I need for my college project. Thanks, Kyle

[@elliottarnold9542]

At 17.07 there is a mistake in the code, which will lead to the error "Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development." to fix this use => if(jsonValue !== 'undefined' && jsonValue !== null ) return JSON.parse(jsonValue)

[@adamhardie506]

This helped me out, any idea as to why it doesn't work as shown in video?

[@lavon7418]

thank you so much! I almost gave up after going to the google doc page and the react link for debugging, and still not being able to fix it.

[@stephenpeters9125]

Wow! Thanks, this didn't even come into play until the end.

[@TheresAStarman21]

You should just go to Applications, LocalStorage and clear it out.

[@Dcooper676]

@@adamhardie506 maybe a recent update

[@anshulbisen]

I just realized Kyle grew a beard by the end of the video :D. To do all this in a single shot, you are a monster! Respect++

[@avimehenwal]

I so love this channel

[@WebDevSimplified]

Good luck on your interview!

[@mydhe6]

Are the seven dislikes bots? Honestly, what's there to dislike. Thanks for this great video Kyle.

[@supreetpp]

some people just had a bad day, and want to share it with the world 😃

[@jimhalpert9803]

Wow in 2 weeks the dislikes grew almost 4 times.

[@christopherobrien6215]

heavy usage of bootstrap, needless usage of local storage, and his face

[@shikharsharma3980]

Not to be rude and i really don't think these things are enough to dislike a video, but kyle has a bad habit of not following naming conventions, he names many variables with little to no difference like for say contacts,contact or something simmilar hence it becomes very difficult to follow along some times

[@outbreak3607]

@Luke Mwenda same, I cant keep up with how fast he does things, this is supposed to be a tutorial? I got sooo many errors copying his code, insane

[@chizuru1999]

kyle you know you have a grown a lot!! Have been watching your videos since the beginning. Love from India. 🎊

[@nyashamusanhu541]

You are a lion my guy. This is every Software Developer's dream

[@KaranSharma-ew7io]

You and Ben Awad are classic gem

[@nicklandreth2527]

I really love your coding style. I learned Javascript while watching your channel regularly and now I have become a snob I think.

[@Rexetorize]

You're the best teacher man! You taught me a lot ❤️

[@masaforce]

Jesus christ this channel is a gem

[@codito7388]

O my god i don't believe that you made a big tut. Well done body! In my tut i make many hours videos tut. The biggest is 8 hours. Is really very difficult to make big tuts! Again well done!!!

[@julianstorm7722]

At 50:12:00 hold alt and you can set multiple marks at any point in vs code; this way you save yourself from writing the same all over again. There are helpful snippets for importing modules and using hooks as well...Great video. Thanks for your effort much appreciated.

[@justintie]

the speed of narration is breathtaking

[@rjsingh4998]

this is solid. almost broke my remote hitting that pause button so many times but def learned a lot with this one. Thanks bro!

[@azatecas]

bro, i finally got around to following this tutorial. and i learned so much more than i expected. The fast paced coding made me sweeet at times

[@ujjwalshirpurkar1612]

i can't keep up with ur speed, i do understand the syntax but i am not able to join the threads, what is working for what, man i need hell lot of practice and reasearch for doing something like this.....salute to you Kyle, u r GOD

[@ДмитрийР8ж]

It seems InputGroup.Append is not in React Bootstrap anymore, just a Button in InputGroup after From.Control will do.

[@kw4548]

MVP

[@r0nni34]

i was here just to take hints for the backend... but now I realised there's a lot for me to learn in client side as well. I developed something similar to what you are doing here but mine looks way to complicated , isn't well optimized and have way more line of codes even tho ultimately my code dose the same thing as yours... Now I'll watch your vids and refactor my app to make it as clean and optimized as i can.

[@rupayanroy2981]

Hey, have some love from India. One of the best teachers and tutorial makers!

[@shivkampani158]

Happy teachers day man! Thank you so much for your videos!

[@vansh3777]

Facebook: *stealing data from users of whatsapp Kyle: hold my beer

[@AccessCode101]

Only channel I play the video and the first second I hit the like button.

[@TrueHumanNature74]

Happy teacher's day sir😇😇😊😊😊

[@sivasankar5036]

From your videos ,I think you were a pro at javascript

[@matiassandacz9145]

This was exactly what i was looking for! Btw, your code is extremely clean and elegant. Cheers!

[@briandesign]

nicee! good to see new React projects

[@alexmorrissey-smith6632]

Hey Kyle! Love all your tutorials, you explain everything so well You should do a Trello Clone!

[@Dcooper676]

True

[@maskman4821]

This is a fantasic tutorial, I wonder why Kyle doesnt use nextjs to create project ? It gives you ssr right out of box, anyway, this is a practical and useful project, you just need to add webrtc to show the live stream !!!

[@shameekagarwal4872]

at 17:54 is there any reson for returning the function while calling it? i know that this happens in useState also if we have [function, setFunction] = useState() we dont do setFunction(nameOfTheFunction) we do setFunction(() => nameOfTheFunction)

[@smartifi_egypt]

Great effort, Kyle almost 2 h of recording and hours of searching and coding THANK YOU , I liked the (useState, useContext, useEffect) combination, however I distracted a bit with bootstrap and styling but I think it is useful for guys want to tie it all up together.

[@tilakmadichettitheappdeveloper]

Hi Kyle !!!! I love you 🤟 keep making awesome stuff

[@akashdubey4750]

You're one of my favorite Sir Lots of love from India😍

[@yassinsconcepts]

51:50 When and where did you define "conversation"?? I'm getting an error Failed to compile. src/contexts/ConversationsProvider.js Line 22:52: 'conversation' is not defined no-undef Line 23:24: 'conversation' is not defined no-undef Line 32:17: 'conversation' is not defined no-undef

[@nikhilpokharel3682]

I've been searching for this type of MERN stack application, I find it really easy to understand either being complex Thank U Kyle for your hardwork

[@abhayagarwal5097]

What do you mean?

[@nikhilpokharel3682]

@@abhayagarwal5097 i don't know you should have asked me 9 months ago 😁

[@PrayasArt]

Happy teacher's day Kylee sir. ❤️Love from India ❤️

[@rajesh-royal]

wish y luck for 1M 🔥 you work really hard 👍

[@user-ri9cn2rs5i]

Im stuck around 42:00-43:00... when I start the application its giving me an error saying " TypeError: Cannot destructure property 'Contacts' of 'Object(...)(...)' as it is undefined. " in regards to the const { contacts } = useContacts() line.....

[@verdyguo]

Same :(

[@ЕгорМорозов-п4о]

Mannn, This is lit 🔥🔥🔥 That's what i'm looking for !

[@maomorin]

Damn... I spent literally 10 hours following this... thanks a lot for making this free! There are two things that I want to spot out: - I think the approach of setting the receivers in an array and group them without a "group id" makes very troublesome all the process. Setting a group code allows to identify inmediatly the group without need to set a ArrayEquality function, and also will save a lot of logic process in the ConversationsProvider component. Also, in the server you just can let the user Join the group code and socket io will do all the send message task. - I don't understad why the socket server is working without the CORS implementatio... I did't use CORS params in my local server and it doesn't work, server just refuses conection. Is it perhaps version changes?

[@VishalSharma-nc7uy]

I'm also unable to make a connection, how did you solve this?

[@curlydoodle7308]

Thank you for being the mentor we all needed !

[@DhruvaShaw]

thank you kyleeee with this chat app now I use this my own version in my local area network!!!!!! to chat with my only family and friends

[@lalit00716]

Happy teacher day sir.In India teacher is god where there is culture where we facilitating teacher and bows down and touch feet because we believe teacher is god for us.so bows down and touch you feet because you are teacher for me. Please kindly request you to create it by angular also.

[@Sohneg]

I'm stuck at 43:50. I am getting the TypeError: Cannot read properties of undefined (reading 'map'). And also it wont work with the variant="flush". Can someone help me? Thanks

[@ciprianolaru388]

i also got the same error:( this suks

[@ciprianolaru388]

kinda fixed it in a way by wrapping the map with an if to check if it is undefined or not

[@symphony22]

@@ciprianolaru388 can you explain more? I'm having the same exact issue

[@ciprianolaru388]

@@symphony22 Sure. So, in my case, I got like this line: const formattedConversations = conversations.map(conversation => { And what I did was basically putting an if statement before mapping through each conversation, so I did something like: const formattedConversations = conversations != null && conversations.map(conversation => { And it kinda worked, I got rid of the error this way.

[@Demix1988]

I know it might be a bit late but I had the same error I had mistake in contexts/Contacts provider in const [contacts,setContacts]= useLocalStorage('contacts',[]) i had ' ('contacts,[]') it got rid of that error for me

[@gargeebanerjee1243]

Thanks!

[@WebDevSimplified]

No problem!

[@as_if]

Found one bengalee right there

[@mks5988]

I strongly support this handsome guy, sounds good. Simple ,short and precious 🤴.i don't have time to watch this video now see you later.

[@jalaliyev]

I love this concept. I’m waiting much much more like a project from u. Just keep going

[@tobymoore1063]

Just a heads up for anyone planning to use this. If your platform requires any kind of security DO NOT store the conversations in localStorage, this would enable anyone participating in any chatroom to see all messages that have been sent by anyone.

[@osirusj275]

ohh nice, where to store it?

[@futurepediaio]

@@osirusj275 databse on the server

[@najneindustrijaliziraniji]

you need to use same bootstrap version as kyle if you want all classes and boilerplates work. so if you have problem first uninstall latest react-bootstrap/bootstrap yarn remove react-bootstrap bootstrap (or npm uninstall react-bootstrap bootstrap) then yarn add react-bootstrap@1.3.0 bootstrap@4.5.2 and finally restart react server

[@konstantinreut2577]

Life saver!

[@klhmia]

No matter what I do, I simply can't get that border on the right to appear @ 27:50. I've cloned your repo and it works in there, but that's the final version. I've copied and pasted what I could directly over to make sure I didn't miss anything but still it doesn't appear. I'll continue in hopes that it sorts itself out, lol. After encountering a few more minor CSS defects I finally thought to check if the bootstrap styling was actually being pulled in properly. Turns out I had forgot to include the CDN link in the index.html file - just in case this helps anyone else.

[@najneindustrijaliziraniji]

you need to use same bootstrap version as kyle if you want all classes and boilerplates work. so if you have problem first uninstall latest react-bootstrap/bootstrap yarn remove react-bootstrap bootstrap (or npm uninstall react-bootstrap bootstrap) then yarn add react-bootstrap@1.3.0 bootstrap@4.5.2 and finally restart react server

[@harryzhong7560]

@@najneindustrijaliziraniji Thanks for the Tip! But it shows 404Error when I try to use npm install react-bootstrap@1.3.0 bootstrap@4.5.2, do you know why is that?

[@harryzhong7560]

oops, I shouda use npm i, now I can use the class!

[@destinlee]

WOW! This was awesome. I know it was simple but I loved the "New" button verbiage switch. Some times it's the little things 😄 Thanks Kyle!!

[@notauniquehandle]

Great stuff, I followed this using TS, so it took some extra time, but it was worth it!

[@butterChickenAndNaan98]

you're the best Teacher. Happy teachers day!!!!

[@Tendou-Gaming]

Another Awesome video Kyle! Can you make a video on making a weekly scheduler app?

[@reactivicky]

Anyone else getting error at 19:02 ? I cant get the app to work unless I manually clear the localStorage. It is automatically getting set to undefined.

[@RightReverb]

Yo! same here! Cross origin error!

[@AbhishekYadav-fh4oq]

if you are still getting this error if(jsonValue != undefined) {return JSON.parse(jsonValue)} use this line

[@saniyagodil6771]

@@AbhishekYadav-fh4oq Just tried that and it didn't work :(

[@saniyagodil6771]

I did what Inzamam Arman mentioned below: if(jsonValue !== 'undefined' && jsonValue !== null ) return JSON.parse(jsonValue), and then restarted my server and that fixed it

[@Cat-vd4ju]

Huge fan of your videos Kyle, keep it up!

[@manuxgp]

Awesome video! I always learn something from each one of them. Thank you :)

[@betterbehappythannot3605]

How does the useLocalStorage exactly work? If there was a key previously, it returns the value and if there is not a previous key, it sets the key with the initialValue?

[@najimali32]

Finally, It runs Kyle Thank you for the video.

[@fundifferent1]

My question is about scalability. How scalable is this for a server? Would there be an issue with having thousands of users creating their own group chats?

[@thomast2577]

I have three questions. 1. How do I remove contacts and conversations? 2. How do I use my own CSS instead of the bootstrap css (located in \client ode_modules\bootstrap\dist\css)? 3. How do I make this into a desktop application? Thanks in advance.

[@thomast2577]

@ChoppedBlade Thanks very much, but I meant where do I add a function to add and remove contacts in the app.

[@JtagSheep]

@@thomast2577 extend the context to have a remove contact as well as the createContact same for conversations.

[@elliottarnold9542]

I instantly subscribed when I saw the project. following along now.

[@scottwoodcock2779]

Super content! You're very good at what you do man. Your channel is invaluable!

[@m..2694]

Make a Windows 10 clone....😁😁..you will ahead of everyone else.... awesome content though.

[@azovotha]

Why did you change it from socket === null to socket == null at 1:34:45?

[@DEBBAH1907]

if you close your eyes and listen you can actually hear JerryRigEverything's voice

[@biswamohandwari780]

Whoa that's true

[@matiasrondan6227]

Awesome video man, thank you for sharing, very useful indeed. Congratulations, you rock!

[@oguza7504]

You are perfect . Awesome content 👏👏

[@javierperez_com]

Awesome masterclass :D

[@crazydev.2634]

Great work, bro❤️

[@pratibhalovesu]

Kylee love u brother, keep doing it more brother

[@moayedmustafa9673]

THIS IS CRAZY! I was literally thinking about building this but had no idea how to do it! I love you Kyle!

[@NavyCuda]

I stopped at 21:09 at this point. I'm going to continue but I noticed a bug where if there is no id it will set the localStorage as undefined and then that still returns the dashboard dispite not being logged in. Clear locale storage. Reload. Reload again.

[@keepfeatherinitbrothaaaa]

43:36 For anyone getting a TypeError: prevContacts is not iterable. It's because you're trying to spread prevContacts by saying ...prevContacts You need to make an if check to cover the cases of contacts being null or undefined or having no length (thus the spread error) const createContact = (id, name) => { if (!contacts) { setContacts([{ id, name }]); } else { setContacts((prevContacts) => [...prevContacts, { id, name }]); } };

[@indrajitsarkar3169]

#githubFollowerGang , knew this video's coming.

[@27vivy]

Keep up all your good work!

[@harikotha7]

It's here!! ❤️❤️

[@daddykimjongun7777]

nice vid man , appreciate the hard work

[@godamkeras4144]

wow! the hooks for local storage is really helpful, gotta apply them in my work..

[@austinrobinson5995]

you do a very good job of explaining everything along the way thanks!

[@kahnmadeit]

u r the best teacher

[@ThatGuyDownInThe]

This taught me so much I'm astounded.

[@aaravgaudana981]

43:33 I got an error saying closeModal and contacts.map aren't functions.

[@negatif9163]

check source code. you did a mistake while writing. or check video again.

[@aaravgaudana981]

@@negatif9163 Thanks

[@muhawenimanajanvier6280]

this is what I needed for my next project.

[@StratexMedia]

Bruh ur like that osas Guy XD

[@muhawenimanajanvier6280]

@@StratexMedia 😂

[@ismailelsayed936]

man you are talented at everything

[@abhijith4252]

Happy teachers day ❤

[@ricardomlourenco]

You look so young, how old are you kid? You channel is really good and this video is absolutely amazing! Love when you say: of course it doesn’t work! LMAO!

[@andriisabatiuk1958]

hey< what I suppose to do with cors policy, my code with no errors, but in console lot of errors about this Cors policy

[@sebastienmorin9020]

I ran into that and in my case it had to do with socketio not being required with a lenient cors policy. I added a line to the server definition: const io = require('socket.io')(server, { cors: { origin: '*', } }); Hope this helps anyone :)

[@andriisabatiuk1958]

@@sebastienmorin9020 thanks man, now its work perfectly)

[@Dan-fd8rw]

@@sebastienmorin9020 It works. Thanks

[@ednethgirao]

Amazing tutorial, you rock it bro

[@schemez]

it took 4 hours for me just following what he did. but the playback of this is only just 1:44:07

[@elijahromer6544]

I've been at this for almost 10 hrs and I'm only at 1:20. Also pausing and making sure I understand as we go and also externally researching concepts if I don't understand though. Holy cow I have learned so much about react.

[@digigoliath]

Wow. Awesome!!! TQVM!

[@marianodiez5274]

Awesome video bro!!! Thanks a lot for sharing your knowledge