Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)
HTML-код
- Опубликовано: 8 сен 2024
- 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 RUclips.
Backend is hosted by chatengine.io
Components are made by npmjs.com/pack...
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special RUclips 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: javascriptmastery00@gmail.com
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / js_mastery
BuyMeACoffe: www.buymeacoff...
#socketio #chatapp
![Build a Secure Realtime Chat App in React Native [3] (tutorial for beginners) 🔴](/img/1.gif)
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
It's my pleasure
@@javascriptmastery may i build this react app for running in window?. Thanks your share
@@david_cuna_tuna Just change the layout using html and css
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.
@@troypeng8722 true
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.
No problem Steve! :)
the amount of top tier content on this channel for free is too high
Exactly
You make Fridays so much better. This is incredible!
Glad you enjoy it, thanks!
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
Glad you like it
@@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 ruclips.net/video/iOCfYN-q_i0/видео.html as your name channel name suggests, you truly are a JavaScript master
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 ❤️❤️
Awesome! Thank you!
Hello bro I am not able to solve one problem in this chat application please could you help me
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!
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.
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
thanks
Your credentials are incorrect. Make sure your Project ID, Username, and Password are correct here. about this?
This is what YT Tutorial Gold looks like. Thank you for these top-quality videos.
Glad you like it!
@@javascriptmasterywhhere did you copied that css text from? 7:54
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!
I was thinking to start up with your old chat tutorial and then you upload a new and better tutorial. Thanks man.
Thank you for watching almost all of my videos, you're my big fan and I appreciate it! ❤️
@@javascriptmastery yeah man, your videos are much better than the paid courses on udemy.
@@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.
@unknown man Yes, that's me! Thanks for the nice comment! 😀
@@javascriptmastery why you stopped man. You play very good!!
My favorite JavaScript channel. Never disappoints. Amazing content. Thank you so much!
Wow, thanks!
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! :)
Because of people like you the industry grow faster and faster! Hope you all the best, be healthy! :)
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.
You,sir are amazing,this quality of content is not even found on paid courses.
Thanks Poo! 🍯
@@javascriptmastery really bro make your own udemy&coursera courses like Max from Academind.
Adrian, you are the best at what you do. Nobody gives this much free content on RUclips 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.
Thank you so much Jay, I'm glad to hear that! I'm not a contributor at the moment, maybe in the future! :)
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
Accidentally found this channel. This channel is GEM. Kudos to you ❤️
Thank you! ❤️
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! :)
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.
Thank you so much!
Boom 🇬🇧 this is going into the queue to smash it!! Let’s go!!!!!
Who else going to be doing this?
Let's goo!
Sir I don't have words to thank you for sharing this valuable knowledge for absolutely free.... Keep coming with great tutorials...
It's my pleasure
I’ve never ever seen this kind of free tutorial,It was amazing .Thank you so much ,waiting for part 2
Thank you!
part 2 is available ?
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
Thank you!
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!!
Thank you!
Thank you bro am a php developer learning React Js and loving your channel
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
Enjoy!
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!
wow sounds great. building a chat app right now in react so this comes really handy! Thanks man! You're the best
Thanks Raul!
this is awsome @JavaScript Mastery, I am ready for next futures like logout, alerts...
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
Thank you Christian!
I couldnt believe I had such a beautiful chatApp after 10 minutes of coding!
Thanks for sharing this! :)
Enjoy!
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 ❤❤
You are the best youtuber ever, my portfolio looks much better after I have started to view your videos.
thanks from Georgia (country)
Greetings to Georgia!
At least the wait for the next video was worth it.Amazing content watching all the way from Kenya
Thank you! Greetings to Kenya!
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!!
You are blessed with the art of sharing knowledge, Amazing work!!!
Thanks!
Beat tutorials i have seen on youtube. Calm, precise and complete. Excellent work, many thanks
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?
I agree with the other comments even paid courses do not come close with your tutorial... God bless you.
Thanks!
This channel is treasure for devs
Thank you!
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
You my friend are heaven sent... May God bless thee with more subs and views
Thank you!
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
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
I wanna see how you integrate a chat app for websites. My compliment for this chat application and thanks for sharing!
Thank you so much JavaScript Mastery!
Note: Also another comment for the algorithm :)
Thank you!
I believe video is full of content in 1:10min but
one suggestion
this video can be made in 1:30:07 with little more explanation
This is soo incredible !! thank you
Please add logout and message react features. It will be dope
Great idea!
@@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🤔
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.
Wowwww this is awesome...... again thank you my friend, you are helping me to improve my web development skills. Love you....
Thank you friend!
great life saving video. PART 2 IDEA: logout button
a really really awesome build as always, looking forward for part2 with other cool functionalities
you are the best one in coding hannels ! thanks for the project...
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?
This educator is a God given gift, thanks so much man
Thank you for the quality content and all the effort that went into making it. You are amazing.
I appreciate that!
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.
Hello bro I am not able to solve one problem in this chat application please could you help me
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.
it works for me, thank you so much!!!!
Thanks, it helped me
Thanks a lot, it helped me.
not all heroes wear capes .
Why can't I see the corrections on this same issues here? Please someone should help me
Very Helpful! And important thing is you are providing source code. Thankyou♥️
Always :)
An extra comment for the algorithm!
Haha, you understand the game!
@@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
And more replies for the algorithm reactnative blah continuing this comment yes
The best produced, in depth JS resource I've found thus far!
This was one of the best tutorials on RUclips. 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.
Put them into the .env file and call them by using process.env.NAME
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
@@javascriptmastery can you provide the link of the part two of this video...
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.
You deserve a million subs!
Thanks so much for great content. It terms of dev-content, this is the best BEST CHANNEL on RUclips right now. Great work and generosity!! more kudos
Loved it already
Thanks for the idea! Did you check out the MERN App? It might be similar to what you've requested!
@@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
all of the people who comment for the RUclips algorithm are doing great work. I literally found this video because of the RUclips algorithm
Great job! I would like to see the ability to let the users create their own username and password.
Bravo Adriane, fantastičan si. Perfektno si odradio projekat, odusevljen sam tvojim znanjem.
You always come up with something great things...
Thanks a lot.
Thank you! Cheers!
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
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.
Great idea!
Just found this channel and i’m already in love with it, best tutorials out there.
Thank you Jonas!
Such a good project! I really appreciate your work!
Thank you!
Omg how helpful this tutorial is and today I finally completed it.I am so happy can't even express . Loads of success ☺️
Awesome job!
Heyyy,, I m getting an error on localhost ... Incorrect credentials, but all the things are same like username and all .. can you please help
@@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
@@ishitamittal5237 thankyou so much,,, but I have created the user already and put those same credentials in the code.
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
Nice
You are so blessed! Please consider making a logout feature in part two vid.
Coming next week! 😊
Another Master Piece
Enjoy!
Amazing! LEARN: Sockets, Rest APIs, Sending Images, React Hooks, Props, and CSS in a single video. Thanks, Man. Love from India
Broo is it beginner friendly ? I just started with react
Waiting for part 2❤️
This is not marvel's movie 🍿
Thank you. Please make part 2 by showing
1. register button in login form so that new user can create thier username and password?
2. Sharing live location
3. Deleting chats
4. When we click on received message it has show to reply option.
This is awesome!
Thanks Adam!
Fridays over here are the best days of my life bro. Thanks so much
Thank you!
Wow great video
I have a question
What do u used in backend in this project
It's ChatEngine
Pravite jako dobre tutorijale. Svaka čast, samo naprijed!
Chat Engine is now paid, What should I do?
You're a jem ..Thankyou so much for existing ❤
Thanks! ❤️
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?
I'm also struggling with this, the issue is the last_read returns null for other users
Have you resolved it?
Same issue
Finally did this project😃. Thank You, Sir for this level of content.
Hey ! can you please tell me is it beginner friendly or an advance ? Xoz i just started with react.
@@66_vaibhavvarunkar60 yes it is
Please can you help me out?
npx create-react-app ./ Is not working
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.
Great idea!
This is the one of the best RUclips 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.
"If this video reaches 5-10k likes, we are recording part two". It's 9.5k, guys. Is there a part two?
Coming soon! I'm recording it.
Will it contain fb messenger like searching ?
@@javascriptmastery pls upload it in 1-2 days 🙏🙏 eagerly waiting for it as I have to submit it in college
Coming next Friday! 😊
@@javascriptmastery Today is saturday!!
Thanks for keeping the learning free of cost. God bless web devs
Thank you!
I can't install npm install react-chat-engine. When I'm trying here some errors.
Use yarn
@@e.misael8999 or delete package-lock.json file and do npm install and then install react-chat-engine
Finally I have found what I was looking for all over the RUclips! Great work man♂️, you are just amazing and greatly appreciable..🔥
Thank you!😊
Did u build the app ? Is chat engine working fine?
❤️❤️❤️
Thanks! 😊
Thank you sir....with your video i actually understand the algorithm behind chat applications, i'm going to build mine from scratch though, using the .NET framework for my server side.😌😌
JavaScript Mastery PRO launching soon! Be the first one to find out about it - resource.jsmasterypro.com/pro 🔥
Hey where is part 2?
Subscribed 😊
please can you help me by getting the codes for the App.css