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

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

[@rohuh9365]

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

[@moonPehalwan]

Exactly

[@veselinvalkanov]

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

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

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

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

[@soltiscd]

You make Fridays so much better. This is incredible!

[@javascriptmastery]

Glad you enjoy it, thanks!

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

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

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

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

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

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

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

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

[@_Mr.Down_]

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

[@javascriptmastery]

JavaScript Mastery PRO launching soon! Be the first one to find out about it - resource.jsmasterypro.com/pro 🔥

[@rayzix5998]

Hey where is part 2?

[@ishitamittal5237]

Subscribed 😊

[@gabbyjoe1217]

please can you help me by getting the codes for the App.css

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

[@CuriousTuber]

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

[@javascriptmastery]

Thank you! ❤️

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

[@alexkimeu1248]

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

[@javascriptmastery]

Wow, thanks!

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

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

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

[@stvlley]

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

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

[@balintbalazs769]

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!

[@sandi3ai]

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

[@javascriptmastery]

Enjoy!

[@jawad_youtube]

This channel is treasure for devs

[@javascriptmastery]

Thank you!

[@SF-gn6uw]

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

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

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

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

[@omerfaruktopal]

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

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

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

[@Usurperhk]

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

[@javascriptmastery]

Thanks!

[@greenbean44]

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

[@javascriptmastery]

Thanks!

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

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

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

[@godfreyndiritu369]

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

[@thesecondsage]

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

[@javascriptmastery]

Thank you!

[@mohdsalmanansari5992]

You are greatest JS channel on entire web

[@javascriptmastery]

Thank you, means a lot!

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

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

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

[@sarahimpextradingenterpris6286]

The best so far... i have finally completed the project

[@javasmastery__my_Teleqram_id]

Teleqram me 👆⬆️..

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

[@the-pratik]

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

[@javascriptmastery]

Always :)

[@axelekamba7333]

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

[@willturner3440]

You made my lockdown, love you from India ❤

[@javascriptmastery]

I'm glad!

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

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

[@godfrey6985]

You deserve a million subs!

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

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

[@milica991ful]

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

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

[@YO-in2ij]

great life saving video. PART 2 IDEA: logout button

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

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

[@shohagkhan3677]

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

[@javascriptmastery]

Thank you! Cheers!

[@markosvager1063]

Bravo Adriane, fantastičan si. Perfektno si odradio projekat, odusevljen sam tvojim znanjem.

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

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

[@Subwayeditsxyq]

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

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

[@TheJdstudio]

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

[@iamwoman4521]

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

[@javascriptmastery]

I appreciate that!

[@samuelketechie1238]

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

[@javascriptmastery]

Thank you!

[@Doomslayer420]

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

[@javascriptmastery]

Thank you!

[@jonasdesouter581]

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

[@javascriptmastery]

Thank you Jonas!

[@SubhamKumar-9009]

Waiting for part 2❤️

[@willturner3440]

This is not marvel's movie 🍿

[@hadiboukdir]

To make this app powerful and robust we need to add: emoticons / highlight links (when you send or receive them) / add voice notes / Audio Call / Video Call Very good tutorial though, thank you very much

[@aishwaryakulkarni8388]

Such a good project! I really appreciate your work!

[@javascriptmastery]

Thank you!

[@wahomemutahi1008]

You are a real teacher...you are awesome

[@sanyamsuthar1357]

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

[@mariusguissou4282]

I am very satisfied with your explanations

[@javascriptmastery]

Thanks bro!

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

[@smiling_madly596]

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

[@javascriptmastery]

Thanks! ❤️

[@rodrigonovaes7812]

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

[@emalov98]

Pricas perfektno Engleski:) Super tutorial, hvala ti.

[@javascriptmastery]

Hvala!

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

[@l0rdchester]

Thanks for keeping the learning free of cost. God bless web devs

[@javascriptmastery]

Thank you!

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

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

[@asishraz6173]

Using npm: npm install react-chat-engine --save Using Yarn: yarn add react-chat-engine

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

[@carloslmarin5987]

MAAAAN ! You are a craack! monster of JS

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

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

[@javascriptmastery]

It's ChatEngine

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

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

[@itsanil3331]

Your voice and explanations is just woow

[@javascriptmastery]

Thank you! ❤️

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

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

[@akashchauhan6784]

❤️❤️❤️

[@javascriptmastery]

Thanks! 😊

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

[@sagarsharma7562]

Chat Engine is now paid, What should I do?

[@volianmourine2175]

😢