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

🚨 IMPORTANT:
Get started with Embold.io for free: embold.io/products/overview?u...
Use code US21F29A for 20% off a paid account (Only applicable in India)
Whatsapp is an incredibly popular application, but the technology behind it is actually pretty simple. In this video I will show you how to create a messaging app similar to Whatsapp with React.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/W...
useRef Tutorial: • Learn useRef in 11 Min...
useState Tutorial: • Learn useState In 15 M...
useContext Tutorial: • Learn useContext In 13...
🧠 Concepts Covered:
- How to use Socket.io
- How to create custom React hooks
- How to create custom React contexts
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00:00 - Introduction
00:00:34 - Demo
00:02:20 - Code Setup
00:03:51 - Login Page
00:13:47 - Custom Local Storage Hook
00:18:50 - Dashboard
00:20:21 - Sidebar
00:29:50 - Create Contact Modal
00:36:01 - Contact Context
00:41:18 - Contacts Sidebar
00:43:01 - Conversation Modal
00:48:43 - Conversation Context
00:54:12 - Conversation Sidebar
00:59:11 - Current Conversation Component
01:04:50 - Send Message
01:13:45 - Displaying Messages
01:23:43 - Server Setup
01:28:28 - Socket.io On Client
01:37:26 - Outro
#Reactjs #WDS #WhatsappClone

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

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

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

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

[@adamCoder]

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

[@roshatron]

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

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

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

[@shivkampani158]

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

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

[@Rexetorize]

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

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

[@user-mm1uk3pr5k]

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

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

[@chizuru1999]

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

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

[@jalaliyev]

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

[@matiassandacz9145]

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

[@curlydoodle7308]

Thank you for being the mentor we all needed !

[@rupayanroy2981]

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

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

[@alexmorrissey-smith6632]

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

[@hamsithacs4091]

True

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

[@nicklandreth2527]

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

[@Tendou-Gaming]

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

[@elliottarnold9542]

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

[@PrayasArt]

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

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

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

[@austinrobinson5995]

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

[@rajesh-royal]

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

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

[@sanskaarpatni9137]

Happy teacher's day Kyleeeee

[@pizzapanni]

Lol.

[@rajesh-royal]

yes

[@pratyushshivam1620]

@@pizzapanni what Lol?

[@LabhamJain]

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

[@blackman67]

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.

[@user-mz7pt8tl9n]

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

[@akashdubey4750]

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

[@Cat-vd4ju]

Huge fan of your videos Kyle, keep it up!

[@briandesign]

nicee! good to see new React projects

[@najimali32]

Finally, It runs Kyle Thank you for the video.

[@30saransh]

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

[@ThatGuyDownInThe]

This taught me so much I'm astounded.

[@avimehenwal]

I so love this channel

[@WebDevSimplified]

Good luck on your interview!

[@nyashamusanhu541]

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

[@matiasrondan6227]

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

[@KaranSharma-ew7io]

You and Ben Awad are classic gem

[@manuelpineda924]

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

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

[@moayedmustafa9673]

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

[@elijahromer6544]

AMAZING video. You are an absolute beast and I consider you Kyle as one of my primary coding mentors. I'm struggling a little bit to understand the solution to the message scrolling problem at 1:24:00 ... is passing setRef as the ref to the message component automatically pass the element as the node parameter to the setRef callback? and that callback only gets executed if on component re-render, the node has changed? React docs also say that the dependency array in useCallback should include parameters. But here we leave it empty... and it works! Lol

[@godamkeras4144]

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

[@scottwoodcock2779]

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

[@masaforce]

Jesus christ this channel is a gem

[@notauniquehandle]

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

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

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

[@marianodiez5274]

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

[@pratibhalovesu]

Kylee love u brother, keep doing it more brother

[@5hadowalker]

Thanks heaps for your videos! Would also love some tutorials that include Typescript with React to get some more TS practice :)

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

[@WOLF91]

Great content man. Thanks for sharing your knowledge.

[@riyaadhfakier8537]

Damn man, your videos are so awesome!! Thanks.

[@josephwong2832]

Thanks a lot Kyle that was great

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

[@hamsithacs4091]

@@adamhardie506 maybe a recent update

[@nitishkhanna9368]

Thanks for this tutorial Kyle. Looking forward for a MERN project tutorial.

[@sivasankar5036]

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

[@ismailelsayed936]

man you are talented at everything

[@clipslive1156]

nice work hope you could do a slack clone next

[@oguza7504]

You are perfect . Awesome content 👏👏

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

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

[@justintie]

the speed of narration is breathtaking

[@TheDeeStain]

Thanks for the tutorial! I do feel this would have been easier with Redux but that's another tutorial lol

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

[@27vivy]

Keep up all your good work!

[@kevinpakalen2593]

Amazing work, thanks!

[@digigoliath]

Wow. Awesome!!! TQVM!

[@kahnmadeit]

u r the best teacher

[@crazydev.2634]

Great work, bro❤️

[@daddykimjongun7777]

nice vid man , appreciate the hard work

[@user-qi7kk7su3l]

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

[@kw4548]

MVP

[@javierperez_com]

Awesome masterclass :D

[@ednethgirao]

Amazing tutorial, you rock it bro

[@tilakmadichettitheappdeveloper]

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

[@indrajitsarkar3169]

#githubFollowerGang , knew this video's coming.

[@harikotha7]

It's here!! ❤️❤️

[@processorbot8761]

another great project!

[@barrackroy9776]

youre the man. this is great

[@the_full_stack_junkie]

Learnt so much very advanced should definitely do this project again to full understand. But thanks learn how to use useCallback and custom hooks

[@LstrnNoob]

Happy teacher's day sir😇😇😊😊😊

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

[@geovonnievasquez5187]

in the case of a cross-origin error, go to dev ops tool, then application, then right click on local storage and click clear

[@vishant898]

Happy Teachers day Kylee.Please tell where are you from?

[@DuyTran-ss4lu]

This is sick, thanks

[@____I_________I_________O_____]

If you build for the Final Project For USE. Database and Security Settings Add Please. Login and Sing Up options is Good. Thank You.

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

[@sumukhakb2701]

Great video kyle.

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

[@onlineuniversity3718]

Hey Kyle, You are the best!! Could you create Whatsapp using Vuejs?

[@tesla1772]

You are jus awesome,🔥😍

[@hectorbracho8177]

Great content!!! thank you so much..

[@jerryseigle2538]

Love your videos. but use a de-s-er or eq on your audio. The high pitches are hard on the ear when where headphones