Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
Vložit
- čas přidán 9. 07. 2024
- With Direct and Group Chats, emojis & Reactions, Built-in Gif support, the ability to edit & delete messages, specialized commands, and much more, this fully responsive Medical Pager is the best Chat App that you can currently find on CZcams.
You'll also learn how to work with Stream. GetStream.io is the number one Chat Messaging platform that allows you to build scalable and custom chat applications using their APIs.
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special CZcams discount code is automatically applied!
⭐Stream - gstrm.io/js-mastery
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
Styles & Other Code: gist.github.com/adrianhajdin/...
Assets: minhaskamal.github.io/DownGit...
📧 Join our JavaScript Mastery's Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmastery.pro/newsle... 🔥
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / js_mastery
💼 Business Inquiries:
E-mail: javascriptmastery00@gmail.com
Time Stamps 👇
00:00:00 Intro
00:05:40 Setup
00:11:21 Initial Structure
00:50:07 Client-Side Auth
01:08:57 Server-Side Auth
01:29:32 Client-Server Communication
01:45:15 Channel Container
02:01:57 Create Channel and Sidebar
02:58:22 Edit Channel
03:06:47 Search
03:17:43 Twilio SMS Notifications
03:28:38 Deployment
Can't imagine what people who are just starting out and have no money, would do without people like u who literally provide such valuable content for free. The day I start earning I m gonna contribute to you somehow. U r god's gift to people who can't afford paid courses, but still wanna make it in tech.
Glad you find it useful, enjoy! :)
I agree with you a week ago I was finding something which can do a chating video call etc this will help a bit. I was also wondering if you can connect many to many users with different categories and with different dashboards and data on how to set that up that data on the back end. it hard to get this information on the internet.
I feel the same. God bless this man with guidance, good health, and happiness.
@@cmdaltctr yes
I second that
Thank you so much for taking the time to do all of these amazing tutorials for us! I'm a recent bootcamp grad trying to find my first role, and I've been doing your tutorials the past couple weeks and learning so much!
Master is back with a masterpiece 💥🔥
Hope you didn't wait too long! 👋🎉
I can't thank you enough for providing such great content for free. I used your memories series as an inspiration for my resume project and was able to get a web development internship. God bless you and please keep doing this.
Damn, congratulations!
Please help
Will our app work after the free trial of the stream ends?
In which software house you got internship
You are providing so much values to the developer community. Thank you ❤️
Was waiting for this one! Right in time 🙌
Finally here! 🎉
When I found this channel for the first time, I was so excited that I pressed the "subscribe" button three times for sure !!!
Haha awesome, glad to have you here! 👌
You are hands down the best of the best here and your content is purely insane. I have been off coding for about a year cause I felt so down and depressed basically because I have such great projects and wished for just an opportunity but nothing came along. I have to say, you are the one guy that makes me want to code all over again and just love it cause of how amazing all this is. This deserves to be a paid course 100% but I am glad you did not make it into one cause I know for most it might be affordable but for someone like me as a South African, I am glad you did not cause you might find that the cost of it would literally be my rent and food like $50 - $100 for a whole month so thank you again not only for this but making me want to code again!
Just out if curiosity, did you eventually get a job? currently going through what you went through...
You are the best! I have never seen so much quality in one channel! When my new PC will arrive, I'll start following your awesome tutorials (react don't work on windows 7 because of nodejs)
The design looks like the interface of Discord to be honest, and the way this was implemented and the buttons and everything else are really designed well, good job!
I was looking for a responsive design and implementation for chat application as a reference and found the perfect one. Thanks man 🙏🏽
Error it shows.failed to load resources:net err connection refused
"I am doing for college presentation please help out "
@@jkflicks904 what??
The best thing I like about JavaScript Mastery is that the content is always a better one than all other youtube projects. Thanks for the tutorial.
Wow, thanks!
As someone learning to code now, familier with CSS html and learning Javascript and node.js, I can honestly say THANK YOU! This is priceless and I'll study it for months and use as referrence. Without these people doing these tutorials, I wouldn't be able to learn like I am. Thank you aso very much for all the hard work and dedication and I can only dream of being able to achieve this like you can! Absolutely subbed and liked!
I m not able to login back after logout what’s the problem?
Hey Adrian, thank you again for your work, and for sharing this project with us! ❤
Another masterpiece. Just incredible.
Thank you!
This is pure gold, you're really helping the community. Your efforts are really appreciated
Thank you so much Richard!
Post http : // localhost :5000/ auth/signup error when signing up help me out bro
Can't believe someone would release such premium tutorials for free. Kudos to you and thank you so much !
I'm glad you like it, enjoy!
You're one of the best instructors that I've ever known! You've done a lot of amazing work and I've learned many things from you! Wish you health and success!
No language can ever express my feelings for the help we got from you. All I can say is, "Thank you, you have been of great help to us". Hitting the like button is the first thing I do before watching your videos. Thank you so much again!!
Wow, thank you
Hey Adrian, you're really amazing. This tutorial is better than whatever udemy course about react so so far. Thanks a lot for your effort.
Your courses are absolute gold. Clear. Concise. just the right speed, excellent real world examples that go beyond the typical hello world apps. I have been telling everyone about your courses. Keep it up! you are an excellent resource to developers!
I love your comment! May I use it as a testimonial for my upcoming course platform? :D
@@javascriptmastery Heck yea!
Will our app work after the free trial of the stream ends?
thank you soo much bro you are the best !!!!! i couldn't find anyone so much consistent like you
Your voice is so calming and nice! Not to mention all the free content you are providing! I love your channel!! 🥰
Thank you so much!
Best programing guide add a new tutorial - cant wait to try it! When the new JavaScript Mastery video jump in, the Monday is no longer that bad! Thanks as always!
Thank you so much! 👌
You create perfect and understandable tutorials, thank you so much :)
Thank you so much Semira!
What a great tutorial. Learned a lot. Thank you!
wow, great tutorial as always, thank you very much. Love your tutorial about JavaScript and Node JS.
Thank you so much Rian! 😊
Wow, you read my mind. This is exactly what I was looking for, thanks.
Woah, enjoy!
if you get any error when you use npm install, just add option: --legacy-peer-deps,
for example ``` npm install stream-chat --legacy-peer-deps ```
Had this problem too. Specifically, it occurs when trying to install 'stream-chat-react'
+
Wow , just saw this in my feed!! Thank you for all your content. Your projects are so incredibly helpful, they give me the opportunity to bring together the concepts I work to learn. I can't quite sum up in words just what works so well for me with your content. I will say that, even though I may not yet understand everything in a project, I never feel defeated. The way you present the code, I am always able to go over something until I have that aha moment. Also, the tools that you have introduced me to , in your various projects, have been invaluable. My portfolio is slowly growing and my confidence as well. Thank you and I am really excited about getting into this one.
Ericka, thank you so much for such a beautiful comment!
@@javascriptmastery please how do I send you a screenshot of an error I encountered?
Will our app work after the free trial of the stream ends?
Hi Adrian, I'm working on the project and I think it's really great. Thank you for everything you do for this community. 🙏
which alternative did you use for TeamMessage
i still love your videos and thank you for making them. dont stop doing this.
I love your content, practices things and everything is clearly show. Currently I learn react so your videos are even more helpful :-D.
Glad to hear that, enjoy!
I'm using this in my high-school programming class. Thank you.
Didn't took me even 2 videos to subscribe your channel, you are awesome man, such advanced contents for free, thank you!!!
Thank you so much!
I've been making chat applications like this from scratch for many years. It's awesome to see that it now is that easy. Thanks for the video man :D
Hey, I'm getting error in this...if you implement properly please help me out
I wish you wouldn't skip over the channel Inner. i found it to be one of the most important parts and very educational if you would have taught or went over it. also css i think is a talent most dont have, so you going over css would be helpful. I do understand video would be longer, but it would help more and we are already here for over 3.5 hours.
Your way of writing code is really great , really appreciated
I'm glad you can learn something out of it 👌
Thanks for all your great content. I have subscribed right for the first time I saw your video.
Awesome!
Massive content. I guess i will have to go back to all your videos and start building(cloning) your apps. Love it so much. Thanks
Enjoy!
Take a moment to appreciate the fact that he is providing such extraordinary content for free!🤩🤩🔥. already liked and commenting because you always amaze us🖤
Thank you so much Aamir! 😊
@@javascriptmastery Доброй ночи,Муса!Вы в Америке живете и турк-месхетинец?
@Aamir your words are mine.
He always amaze us!
Thank you forever #JavaScriptMastery
which database he used ?
@@javascriptmastery sir I got an error uncaught promise :axios error ,i don't know how to solve it can you please help me
This is worth my time, thanks js mastery
Glad to hear that!
WOW thank you for this! Keep up the great videos man.
Glad you like it Austin!
One thing for sure , you are the best tutor . And thanks for sharing the repo .
literally you are providing this for free!! lot lot of thanks!!! we love youuu
Enjoy!
Thanks so much for this hot Chat App tutorial with steps that are so clear and perfectly organized. I really liked it and greatly appreciated it.
Glad you like it!
This is really amazing.. I always prefer this channel first while advising someone to learn.
Awesome, thank you!
Thank you for such an amazing tutorial and literally no one will post making an app like this
Thank You soo much
It'd be really helpful if you could make a video just like this one, but also show the process of styling it. Even it takes an additional hour of video to do the styles it would help to see the thought process and problem solving going through styling a web application. Thanks.
This is another new level, well done JSM 😃
Thank you so much!
Appreciate the hard work you do.
This is a great lesson! A big like for the tutorial!
We appreciate the efforts that you've put in to help us build our CVs and make our life a little better during this pandemic.
Hello Anurag! Are you a 2021-passout and looking for job opportunities in web development currently?
I'm in my 2nd year bachelor's IT course once I'm done with my graduation and find a job I will definitely do something great for your channel and you
Best of luck!
I have liked and subscribed. I must say, superb project and great work
So far , the best content on CZcams.Well done sir , Bravo!!!!!
I n not able to login after logout what to do
Nice Tutorial, Well Explained. Love your tutorial about JavaScript and Node JS. Hope we will get videos like End-To-End Encryption of messages and persisting messages per person per day in mongo timeseries
Awesome idea!
just reminding, for those who gonna try to build this app after 2023: before everything else, unninstall your current React and install the version 17 of it
and just to make sure the version 9 of stream-chat-react aswell :)
super cool... impressed in the introduction at the beginning itself
Thanks!
Deserves much more exposure, great content and for free ! Liked and subbed
Thank you so much!
This man here is the best. Damm. awesome content bro
You're the best! 😊
Amazing work bro!
Thank you bro! ❤️
I don't need any paid js course if I have js mastery. Everything is well detailed and simplified. Keep teaching us. Bless
Thank you so much for all your videos! Great content..really appreciate it :)
Great 🙌 Amazing 🎊Best YT channel ❤️
Thank you so much! 🎉
Great overall... would be really helpful to have some more explanation of why we do what we do so we aren't just literally copying what you do though. A lot of this I had to spend quite a bit of time on my own reading and such to try to understand why we just did any of the stuff on the screen, if that makes sense. I can copy people all day, but being able to understand why I just did what I did is so much more crucial.
do you know some JavaScript yet?
nice work I appreciate it , I was searching for a tutorial like this thank you so much 🙏🙏
Just watched the intro already liked subscribed. This content is free. You blessed our resumes.
Thank you!
1:41:00 just a quick remark on your assumption - it's actually not correct. We did write _require('dotenv').config();_ in _index.js_ and that was enough, it attached the env object to the process object. The only mistake was not getting the StreamChat class when requiring the 'stream-chat' module.
There's another mistake btw, at 1:12:10 you require _dotenv_ below the port number that you (want to) access in _env_ object.
Just so we're clear, I really appreciate your effort and like your tutorials because they help me train my Node and React skills and I always learn something new. But I felt I had to point this out for the others.
Thanks! That's incredibly useful!
Hey, I still cant find a solution for the (The only mistake was not getting the StreamChat class when requiring the 'stream-chat' module.) const StreamChat = require('stream-chat').StreamChat; but still it is showing the same error This method can only be used server-side using your API Secret, use client = stream.connect(key, secret);
A Thankyou would be little to express what you do for us .
👍🙏🙏🙏
Thank you! 🎉
Great tutorial as usual you never cease to amaze me.
Thank you! Cheers!
Awesome. Just a suggestion, if you could make the ultimate e-commerce tutorial with react, redux toolkit, express, that would be amazing.
Great idea!
All videos with some unique idea implementation.....Can't thank you enough for providing such a beast level content for Free...Thanks again....
You are most welcome
this is amazing man. love your work
Thanks! 😊
Thank you for your precious resource, I definitely follow it to build a new chat app 😊
Thank you for watching! :)
Would be fun to build this.
Thank you
Thank you!
My men outworking literally everyone on the game. Just thanks for sharing your knowledge with the community
Glad you like it, thank you!
u r really a perfect developer , I started react in another channel but never find perfect projects as yours , I have to watch an practise all ur playlist in react to master it , without ur videos I will never master react , thanks a lotttttttttt , u r a legend
I have just seen this but i know its a bang like always. The real JS mastery.
Thank you!!
Yet another masterpiece!!!! What say to start tutorials on Ethereum based Dapps!
Damn, that's a great idea! Do you have experience in that?
Wow, such an awesome project.🔥🔥
But I'm concerned more about it's availability after free trial which is 30 days😟. Now, I have to show this along with my other projects to recruiters within 30 days to showcase my React skill for job. 😬
Edit: Got my maker account on stream. Now i can build it for free with limitations which is enough for my showcase project 🥳
can you please tell how did you got your maker account?
Will our app work after the free trial of the stream ends?
Wow, super awesome & a very cool project!!! TQVM!!
another masterpiece from the master, awesome work bro as always
Thank you man!
Another Master Art
Thank you! 🙌
Love your work! You litterally have a channel of portfolio projects...if a young dev would do them they are almost guaranteed a job :)
What would you add to this project to make help a jr dev get a mid level position? Maybe it could be a type of homework for your students
Video chat? 👌
@@javascriptmastery like a mini version of the video chat app you created a few months ago?
Yeah. But this project already has a lot of features. Maybe building something new yourself would make more sense.
Wow. Great tutorial! A lot of tutorials go too fast or leave out a lot and my app breaks a lot which leads to hours of debugging. I only had a few spelling errors with this chat app, have learned SO much and now have it fully working and live on the internet. So glad I found this channel! now, onto the web3 video you recently put out! lets go!!!
That's amazing Robert, I'm so glad you like it!
@@javascriptmastery Hey, the sign in and sign up buttons are not working for me. Could u please help me out
The way you explain programming code and the masterpiece you create and share with us is "Awesome 👌".
Thank you
You are great teacher.
My pleasure 😊
There are alot of firms/companies where if you worked there, you'd be the best full stack developer on staff by a mile.
Damn, that's such a compliment, thanks Corey!
Awesome 🔥🔥🔥🔥
Thanks! 🔥
Just a perfect, thank you so much. I learned so many things from you
Just switched my data on and the first sound is the bell notifying me of the masterpiece, I couldn't ignore
Quite the timing, huh? :D Enjoy!
Sign in and Sign up buttons are not working. Please help me with it asap.
did u get how toi make them work, cause in my machine too, it is not working
At 1h : 59m, if you have node v10 above, the MessageTeam() function will not work, however, if you write these lines of codes on the return of ChannelContrainer, everything will work as if you had the MessageTeam function.
The codes:
ignore this line of codes:
Message = {(messageProps, index) => }
wow what is that mean {MtState} ???
I solved it! thank you so so so much!!!
@@user-mn6fk5ch5i I replaced his variable which he called EmtypState to MtState, that's why; and yea I am glad this helped you and you're very welcome!!!!!
}
>
love your tutorials , just subscried ❤
Thank you for posting this type of content
Best react creator
Thank you so much! 👌
Thank you a lot sir keep up your extraordinary work !
So generous! I am shocked. Thank you
Holy shit dude
It's too good
Thank you so much!
Hi! I'm getting this error in console on Signup, "JWTAuth Error: signature is not valid. Make sure the token is created using the secret for API key"
did you solve it?
@@jimlee8016 did you solve it?
@@jimlee8016 I'm also getting this error, do you know of any way out ??