Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)

LEARN: Sockets, Rest APIs, Sending Images, React Hooks, Props, and CSS!
This course breaks down everything you need to know to create a React Chat App. With online statuses, great design and functionality, icons telling you who read the message, image support, sound notifications, the ability to create multiple rooms, and much more, this chat app is like no other that you can currently find on KZbin.
Backend is hosted by chatengine.io
Components are made by npmjs.com/pack...
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special KZbin discount code is automatically applied!
📧 Join our JavaScript Mastery's Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmas...
📚 Materials/References:
GitHub Code (feel free to give it a star ⭐) - github.com/adr...
Styles - gist.github.co...
⭐Hostinger is my personal recommendation for hosting - www.hostinger....
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
💼 Business Inquiries: [e-mail]
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / js_mastery
BuyMeACoffe: www.buymeacoff...
#socketio #chatapp

[@eternalcalm8080]

Other youtuber keep this kind of project in their expensive courses but u blessed us with a free video, you surely deserve more than 1 million subs, thank you for this masterpiece

[@javascriptmastery]

It's my pleasure

[@david_cuna_tuna]

@@javascriptmastery may i build this react app for running in window?. Thanks your share

[@happy_cutman]

@@david_cuna_tuna Just change the layout using html and css

[@troypeng8722]

And he also provides the final deployment step (and how you can maintain those services).. which is missing in most of the youtube tutorial videos.

[@eternalcalm8080]

@@troypeng8722 true

[@steveshemandayambaje287]

Thank you so much for the free course, normally these kind of videos have to be paid for but you gave it to us for free, we really appreciate this, the vid is awesome by the way, I'll recommend your channel to everyone else.

[@javascriptmastery]

No problem Steve! :)

[@soltiscd]

You make Fridays so much better. This is incredible!

[@javascriptmastery]

Glad you enjoy it, thanks!

[@IshanKesharwani]

I was looking for the something like this. Like the one which uses sockets and sound notifications. You are amazing. As I already said many times, "Your quality of videos are increasing incredibly with each passing videos." Thanks for this ❤️❤️

[@javascriptmastery]

Awesome! Thank you!

[@deveshupadhyaya5347]

Hello bro I am not able to solve one problem in this chat application please could you help me

[@rohuh9365]

the amount of top tier content on this channel for free is too high

[@moonPehalwan]

Exactly

[@yassinsconcepts]

You are legendary. Like let's all take a moment to appreciate them, They spend an hour coding this, and they are giving the code for free. People should respect you more! Keep up the good work!

[@sayaksengupta4335]

Actually it's much more than an hour. He has to come up with the ideas, code it, rectify bugs, make it perfect. And then code it again while recording.

[@codewithyug1129]

What an awesome react build, I have never seen such a build. I have made my own chat app also but it isn't as good and is too basic. This one is one of the best I have ever seen. Thanks for this video, from the bottom of my heart(my left ventricle 🤣). Keep uploading awesome videos of builds like this

[@javascriptmastery]

Glad you like it

[@codewithyug1129]

@@javascriptmastery hey, I know that my chat website is nothing compared to yours but why not check it, it would be of great help if you do like it (pls give your comments in the comments and hit the like button if you like it is). The link to the video in case you have time or want to see it is kzbin.info/www/bejne/n4Cml4yEYtaSn5I as your name channel name suggests, you truly are a JavaScript master

[@kevgits]

This is what YT Tutorial Gold looks like. Thank you for these top-quality videos.

[@javascriptmastery]

Glad you like it!

[@ADNANKHAN-lg5lv]

@@javascriptmasterywhhere did you copied that css text from? 7:54

[@unknownman1]

I was thinking to start up with your old chat tutorial and then you upload a new and better tutorial. Thanks man.

[@javascriptmastery]

Thank you for watching almost all of my videos, you're my big fan and I appreciate it! ❤️

[@unknownman1]

@@javascriptmastery yeah man, your videos are much better than the paid courses on udemy.

[@unknownman1]

@@javascriptmastery I've a question, do u use to play keyboard couple of years back? I found a yt channel where a guy with same name as yours plays keyboard like a pro.

[@javascriptmastery]

@unknown man Yes, that's me! Thanks for the nice comment! 😀

[@surya.kasibhatla]

@@javascriptmastery why you stopped man. You play very good!!

[@alexkimeu1248]

My favorite JavaScript channel. Never disappoints. Amazing content. Thank you so much!

[@javascriptmastery]

Wow, thanks!

[@winniethepoo2434]

You,sir are amazing,this quality of content is not even found on paid courses.

[@javascriptmastery]

Thanks Poo! 🍯

[@surya.kasibhatla]

@@javascriptmastery really bro make your own udemy&coursera courses like Max from Academind.

[@jayakishore1234]

Adrian, you are the best at what you do. Nobody gives this much free content on KZbin as you do. Your javascript and react knowledge is mindblowing. Are you a contributor to Facebook, or the official React community for example? Because you seem to know everything about React. Keep up the good work.

[@javascriptmastery]

Thank you so much Jay, I'm glad to hear that! I'm not a contributor at the moment, maybe in the future! :)

[@emanueleraggi272]

Thanks for all your work and for sharing it with everyone. It is simply amazing and very detailed. For future customization four points would be helpful: i) attaching a pdf or multiple pdf (or any file) in the chat (maybe dragging and dropping the file in the message line); ii) have your own webSocket engine; iii) messages notification on the chat (maybe also via email or with a small icon notifying the people logged in that specific room) and iiii) have the users create their own usernames and password. Thanks again for all your work, your time is really appreciated in building such detailed examples! :)

[@ariftube7703]

thanks for this awesome tutorial. for those of you having problems with react-chat-engine related to "react": "^18.1.0", run (npm i react-chat-engine --legacy-peer-deps ) or ( npm i react-chat-engine --force). it works

[@alimirhashimli2727]

thanks

[@vipin3982]

Your credentials are incorrect. Make sure your Project ID, Username, and Password are correct here. about this?

[@adityarajguru7947]

Glad that I found your channel, I've been watching your videos for a whole month now and made projects as well. Thank you so much for all the free stuff you provide us.

[@javascriptmastery]

Thank you so much!

[@veselinvalkanov]

Because of people like you the industry grow faster and faster! Hope you all the best, be healthy! :)

[@AI913]

This is amazing! There are a lot more functionalities I wanna know how to add: vocal message, video message, phone number registration, end-to-end encryption, etc. Once again, thank you very much!

[@CuriousTuber]

Accidentally found this channel. This channel is GEM. Kudos to you ❤️

[@javascriptmastery]

Thank you! ❤️

[@fatemea6719]

I’ve never ever seen this kind of free tutorial,It was amazing .Thank you so much ,waiting for part 2

[@javascriptmastery]

Thank you!

[@misirali2584]

part 2 is available ?

[@rohitghosal3868]

one of the greatest youtuber to me is JavaScript Mastery. It's quite impossible sometimes to pay for projects or technical skills like such. we students are blessed having you. Expect more like these. Thanks sir. One of your fan

[@ashishmadan5700]

Why the hell I was too late to watch it. You are just a blessing man ! Thanks for my final year Project. I was searching something unique like this .... What I am getting is just a simple react chat apps LOL !!! Thanks again ! Keep Going

[@javascriptmastery]

Thank you!

[@sfstoriesbd]

You are simply the BEST! Currently I am trying to learn javascript through projects like yours because I am trying to land my first internship real soon. (Sadly my univ. education (CS) lacked modern programming solutions etc). Thank you for your work man, you're really doing an amazing job. You're easy to follow, you don't skip steps and you explain everything so well! What I'd be also interested seeing is: giving the users a way to registrate to our app, also making them able to modify their profiles such as chaning password, profile pic. maybe and adding a "forgot my password" feature would also be amazing. Anyways, thanks againg for all your videos. Can't wait to see more! :)

[@developnetic6433]

this is great! thank you so much for this tutorial! i’ve been wanting to make a chat app for so long, all of the tutorials were so long and confusing, this was so easy! thanks!!

[@javascriptmastery]

Thank you!

[@liambrewster5727]

Boom 🇬🇧 this is going into the queue to smash it!! Let’s go!!!!! Who else going to be doing this?

[@javascriptmastery]

Let's goo!

[@alwynjohn597]

Sir I don't have words to thank you for sharing this valuable knowledge for absolutely free.... Keep coming with great tutorials...

[@javascriptmastery]

It's my pleasure

[@paul-ochieng]

At least the wait for the next video was worth it.Amazing content watching all the way from Kenya

[@javascriptmastery]

Thank you! Greetings to Kenya!

[@christiancampbell1610]

Thank you very much for what you do because I've learnt more about React in this one video than you taught me without the long 3 hour courses. Thanks for what you do and continue the great work. Lets get him 1M subs

[@javascriptmastery]

Thank you Christian!

[@rauldeandrade]

wow sounds great. building a chat app right now in react so this comes really handy! Thanks man! You're the best

[@javascriptmastery]

Thanks Raul!

[@SF-gn6uw]

Beat tutorials i have seen on youtube. Calm, precise and complete. Excellent work, many thanks

[@axelekamba7333]

this is awsome @JavaScript Mastery, I am ready for next futures like logout, alerts...

[@giorgidzirkvelishvili7150]

You are the best youtuber ever, my portfolio looks much better after I have started to view your videos. thanks from Georgia (country)

[@javascriptmastery]

Greetings to Georgia!

[@AMServiceNowDeveloper]

After seeing the thumbnail. 1st step : run through the subscription button because I don't have enough internet to watch the video. I don't want to miss to add this in my resume. Thanks to all Algo developers.

[@_Mr.Down_]

Thank you bro am a php developer learning React Js and loving your channel

[@beep1677]

thank you so much for this I was struggling with your old chat application since socket io has changed since then but now i will focus on this one

[@javascriptmastery]

Enjoy!

[@genofin6056]

I'm a beginner in your channel, and so far I am so impressed with your contents, they are so detailed and full too... and to think that its for free just surprises me. Thank you for this and Please keep it up. You are a legend!

[@Usurperhk]

You are blessed with the art of sharing knowledge, Amazing work!!!

[@javascriptmastery]

Thanks!

[@sandi3ai]

I couldnt believe I had such a beautiful chatApp after 10 minutes of coding! Thanks for sharing this! :)

[@javascriptmastery]

Enjoy!

[@sanyamsuthar1357]

a really really awesome build as always, looking forward for part2 with other cool functionalities

[@raphaelferreira7665]

I did not use the ChatEngine lib, but used the logic of recreating the chatfeed to make my own. I had some trouble editing the chat bubbles to make the avatar appear only in the first message sent by them and You helped me A LOT with this video. Just solved a 4-day problem. Thanks a lot bud!!

[@thesecondsage]

You my friend are heaven sent... May God bless thee with more subs and views

[@javascriptmastery]

Thank you!

[@Sky-yy]

Thank you so much sir, will be following this video. Just glanced the project throughout looks interesting. Would love to see if you continue this project by adding one or two features, so that we could learn how to add features in existing application. BTW love for this masterpiece ❤❤

[@jawad_youtube]

This channel is treasure for devs

[@javascriptmastery]

Thank you!

[@stvlley]

The best produced, in depth JS resource I've found thus far!

[@rog0079]

Loved it already

[@javascriptmastery]

Thanks for the idea! Did you check out the MERN App? It might be similar to what you've requested!

[@rog0079]

@@javascriptmastery yes I did, also created it side by side :D, yes it was pretty similar and amazing project, but you know the feature like insta "following", see posts of only those people who you follow and add a friend by sending a following request etc... I know it's a lot :D, but yeah. Anyways thanksss

[@codindentation5189]

After this video I get to know that still there are youtubers who have humanity and who are not greedy. In short thanks for the tutorial.

[@gbrachetta]

Amazing! And yes to the second part!! It would be amazing to be able to sign up without the admin's. Also sounds and notifications would be amazing! Can they be pushed?

[@stanleyagwu4818]

Thanks so much for great content. It terms of dev-content, this is the best BEST CHANNEL on KZbin right now. Great work and generosity!! more kudos

[@Doomslayer420]

Thank you so much JavaScript Mastery! Note: Also another comment for the algorithm :)

[@javascriptmastery]

Thank you!

[@omerfaruktopal]

you are the best one in coding hannels ! thanks for the project...

[@afridirahman5464]

This is soo incredible !! thank you Please add logout and message react features. It will be dope

[@javascriptmastery]

Great idea!

[@chitrangsharma]

@@javascriptmastery is there any way in this to make a sign-up page Soo users can automatically create there profile right through ui and can chat soo we don't need to create profile individually for all the peoples🤔

[@YO-in2ij]

great life saving video. PART 2 IDEA: logout button

[@sahaneakanayaka3394]

Wowwww this is awesome...... again thank you my friend, you are helping me to improve my web development skills. Love you....

[@javascriptmastery]

Thank you friend!

[@greenbean44]

I agree with the other comments even paid courses do not come close with your tutorial... God bless you.

[@javascriptmastery]

Thanks!

[@godfrey6985]

You deserve a million subs!

[@joaquinretola5649]

For me, that I'm building my first portfolio and being self taught, this kind of video it's pure gold. Like, suscribe and comment for you good sir

[@iamwoman4521]

Thank you for the quality content and all the effort that went into making it. You are amazing.

[@javascriptmastery]

I appreciate that!

[@jonasdesouter581]

Just found this channel and i’m already in love with it, best tutorials out there.

[@javascriptmastery]

Thank you Jonas!

[@pranavkastury9610]

This was one of the best tutorials on KZbin. Learnt a lot and had a ton of fun doing this. Can you tell me how you can add the projectID, username and userSecret to environment variables? Thanks.

[@javascriptmastery]

Put them into the .env file and call them by using process.env.NAME

[@wahomemutahi1008]

I have already left a comment but let me reply again here😁..you are awesome...i had alot of fun just by how you explained frim the start...i started react one week ago and now this is motivation enough

[@mdsanaullah2950]

@@javascriptmastery can you provide the link of the part two of this video...

[@godfreyndiritu369]

This educator is a God given gift, thanks so much man

[@MasovnaSarana]

I'm gonna try to figure out how to add Logout functionality on my own, but it would be awesome to see how to actually do it properly :D

[@prashantniroula8744]

You are simply amazing person who helps the keen learner like me to learn more by making such videos free to watch. waiting eagerly for Part-II video on the same.

[@deveshupadhyaya5347]

Hello bro I am not able to solve one problem in this chat application please could you help me

[@AdrianoMonecchi-br]

Great tutorial! Thanks for sharing! It'd be awsome to see the implementation of your own feature suggestions such as the infinity scroll, maybe a part 2? One question though, perhaps a feature to be considered..., How to allow users who have already logged in to a website dashboard (own backend) to join the chat without having to login to chatengine... Would it be possible?

[@TheJdstudio]

I wanna see how you integrate a chat app for websites. My compliment for this chat application and thanks for sharing!

[@architabhatnagar4612]

This was legit the most amazing and easy tutorial! Its definitely going to look amazing on the portfolio as well! Thanks a lot. Appreciate it

[@tremolony4924]

Nice

[@reyalvarez1617]

This is the one of the best KZbin channels to learn coding from!, yes I will like to watch part 2 from this tutorial, may be on how to log out and upload gif's. Thank you so much for your time that you invest on this tutorials they are very much appreciated.

[@aishwaryakulkarni8388]

Such a good project! I really appreciate your work!

[@javascriptmastery]

Thank you!

[@spiritualgyanhindi2681]

Finally I have found what I was looking for all over the KZbin! Great work man♂️, you are just amazing and greatly appreciable..🔥

[@javascriptmastery]

Thank you!😊

[@swasthikkumar5398]

Did u build the app ? Is chat engine working fine?

[@shohagkhan3677]

You always come up with something great things... Thanks a lot.

[@javascriptmastery]

Thank you! Cheers!

[@the-pratik]

Very Helpful! And important thing is you are providing source code. Thankyou♥️

[@javascriptmastery]

Always :)

[@vivekgaur7686]

Please make a project video on something crazy with using Twitter api's and stuff as now a days Twitter is in great use. And appreciate your efforts this one.

[@javascriptmastery]

Great idea!

[@nicholas_as]

Waiting for the next part. Keep up the good work 👍👍👍

[@javascriptmastery]

Thank you, I will

[@awaisraza2285]

Another Master Piece

[@javascriptmastery]

Enjoy!

[@TechBowl]

Amazing! LEARN: Sockets, Rest APIs, Sending Images, React Hooks, Props, and CSS in a single video. Thanks, Man. Love from India

[@66_vaibhavvarunkar60]

Broo is it beginner friendly ? I just started with react

[@rodrigonovaes7812]

Great job! I would like to see the ability to let the users create their own username and password.

[@antoinealez12]

all of the people who comment for the KZbin algorithm are doing great work. I literally found this video because of the KZbin algorithm

[@thesecondsage]

An extra comment for the algorithm!

[@javascriptmastery]

Haha, you understand the game!

[@johndoe-cq3de]

@@javascriptmastery awesome content.. By the way u can spread on the top of your components by doing Chatfeed=({message,user,...props}) U can spread the rest of the props

[@o4f454]

And more replies for the algorithm reactnative blah continuing this comment yes

[@samuelketechie1238]

Fridays over here are the best days of my life bro. Thanks so much

[@javascriptmastery]

Thank you!

[@leonelrosales591]

For new devs trying to install react-chat-enginee. Try "npm i react-chat-engine --legacy-peer-deps" react was throwing an error for some reasong I believe, it is outdated.

[@qijiaa9122]

it works for me, thank you so much!!!!

[@Nagimulia]

Thanks, it helped me

[@yonelajohannes]

Thanks a lot, it helped me.

[@biishtplease]

not all heroes wear capes .

[@AfricanRisingTechstars]

Why can't I see the corrections on this same issues here? Please someone should help me

[@FacundoTroitero]

thanks for the video. I've been coding frontend for one year an a half. I hope one day I can understand at least something of what's going on here

[@SubhamKumar-9009]

Waiting for part 2❤️

[@willturner3440]

This is not marvel's movie 🍿

[@ishitamittal5237]

Omg how helpful this tutorial is and today I finally completed it.I am so happy can't even express . Loads of success ☺️

[@javascriptmastery]

Awesome job!

[@shivangityagi8463]

Heyyy,, I m getting an error on localhost ... Incorrect credentials, but all the things are same like username and all .. can you please help

[@ishitamittal5237]

@@shivangityagi8463 yeah just because you hard-coded that thing it's because you haven't entered that creds on the chat engine backend so you haven't created that user basically

[@shivangityagi8463]

@@ishitamittal5237 thankyou so much,,, but I have created the user already and put those same credentials in the code.

[@adam_la_morre]

This is awesome!

[@javascriptmastery]

Thanks Adam!

[@raphaeljaggerd3585]

Hey man. I'm an aspiring developer from Kenya. Out of all the tutorials i have seen on youtube yours are one of the best because you actually communicate with the community. I know you are a busy man but if you are able to do a video on payment systems like patreon and onlyfans that would be awesome. Just a suggestion, i know you are a busy man.

[@فريقالأبطال-ت2ك]

Wow great video I have a question What do u used in backend in this project

[@javascriptmastery]

It's ChatEngine

[@jayv.1365]

You are so blessed! Please consider making a logout feature in part two vid.

[@javascriptmastery]

Coming next week! 😊

[@sagarsharma7562]

Chat Engine is now paid, What should I do?

[@ricardoquirino3515]

thanks man, your tutorials are the best, you surely deserve more than 1 million subs!!!!

[@Bellayo94]

Really great tutorial thanks for sharing your knowledge!! I'm currently having one issue (I coded along during the tutorial and also took a look at the github repository but I currently didn't find any solution...). The issue is on the "renderReadReceipts" function: the icon that should be rendered under the last read message sent by anybody in the chat, actually sticks on the last message sent by THAT specific person. Someone had the same bug? Any idea on how to solve this?

[@femiyb9806]

I'm also struggling with this, the issue is the last_read returns null for other users

[@Speaks4itself]

Have you resolved it?

[@ethanwilson4010]

Same issue

[@smiling_madly596]

You're a jem ..Thankyou so much for existing ❤

[@javascriptmastery]

Thanks! ❤️

[@arakonn]

Hi, Could you develop any E-Commerce Project (Web App and Admin panel) from scratch, like using the MERN Stack technologies with Authentication (JWT + Oauth), Redux, Hooks, Yarn, Typescript.

[@javascriptmastery]

Great idea!

[@surya.kasibhatla]

Awesome! You are platinum!!!:Please make part 2 where we have video and voice calling feature.

[@javascriptmastery]

Great idea!

[@surya.kasibhatla]

@@javascriptmastery thank you I need this as I need to talk with family with this ongoing WhatsApp new policy

[@surya.kasibhatla]

@@javascriptmastery this can be done with web rtc thats all i know but please do make it

[@Samaelish]

"If this video reaches 5-10k likes, we are recording part two". It's 9.5k, guys. Is there a part two?

[@javascriptmastery]

Coming soon! I'm recording it.

[@sanskar927]

Will it contain fb messenger like searching ?

[@yashgandhi2014]

@@javascriptmastery pls upload it in 1-2 days 🙏🙏 eagerly waiting for it as I have to submit it in college

[@javascriptmastery]

Coming next Friday! 😊

[@nikitachhillar8440]

@@javascriptmastery Today is saturday!!

[@milica991ful]

Pravite jako dobre tutorijale. Svaka čast, samo naprijed!

[@pranav288]

Chat Engine is no longer freely available. I lost hours because of this

[@prasannasahoo0806]

You helped me . Thanks a lot . And hope you learnt something and your time was not completely wasted

[@avigupta3691]

​@@prasannasahoo0806 so now, this is not possible to make this free and easily ?

[@willturner3440]

You made my lockdown, love you from India ❤

[@javascriptmastery]

I'm glad!

[@lazizjonsamatov1231]

I can't install npm install react-chat-engine. When I'm trying here some errors.

[@e.misael8999]

Use yarn

[@TheShakti25]

@@e.misael8999 or delete package-lock.json file and do npm install and then install react-chat-engine

[@realtors_life]

So far this is the best react project I've enjoyed watching.... Good job👊

[@javascriptmastery]

Wow, thanks!

[@anonymous090]

please do not go through the video. chatengine is not working :)

[@indiancuriousvoice8773]

It works for me

[@gamingf6421]

@@indiancuriousvoice8773 login?

[@indiancuriousvoice8773]

@@gamingf6421 yes login will work if you create your own login id and password in the react chat engine

[@gamingf6421]

@@indiancuriousvoice8773 There is some kind of payment.Have you paid for it to get it work?

[@GameChanger-ep3tf]

@@indiancuriousvoice8773 it does not work

[@nidhisingh3323]

Finally did this project😃. Thank You, Sir for this level of content.

[@66_vaibhavvarunkar60]

Hey ! can you please tell me is it beginner friendly or an advance ? Xoz i just started with react.

[@nidhisingh3323]

@@66_vaibhavvarunkar60 yes it is

[@nestornestor-ezeme6109]

Please can you help me out? npx create-react-app ./ Is not working

[@akashchauhan6784]

❤️❤️❤️

[@javascriptmastery]

Thanks! 😊