Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
Вставка
- Опубліковано 8 лип 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 UA-cam.
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 UA-cam 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
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
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?
You are providing so much values to the developer community. Thank you ❤️
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...
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!
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! 👌
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!
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!
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
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?
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
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!
I don't need any paid js course if I have js mastery. Everything is well detailed and simplified. Keep teaching us. Bless
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'
+
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??
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 :)
Master is back with a masterpiece 💥🔥
Hope you didn't wait too long! 👋🎉
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)
Another masterpiece. Just incredible.
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.
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 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.
Was waiting for this one! Right in time 🙌
Finally here! 🎉
I'm using this in my high-school programming class. Thank you.
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
Just wow ! I haven't even started the course, viewing the intro alone show how great and deep of value this course is. Thank Sir
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! 👌
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
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!
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!
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?
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.
Hey Adrian, thank you again for your work, and for sharing this project with us! ❤
This is really amazing.. I always prefer this channel first while advising someone to learn.
Awesome, thank you!
Wow, you read my mind. This is exactly what I was looking for, thanks.
Woah, enjoy!
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!
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
Following you from last 1 year , you are best mentor we have on UA-cam for free and even providing premium content for free for your YT fam. Really appreciated and Lots of Love. Being a Web & Graphic designer , you added some great skills in my portfolio only bcoz of your great content.
Your way of writing code is really great , really appreciated
I'm glad you can learn something out of it 👌
literally you are providing this for free!! lot lot of thanks!!! we love youuu
Enjoy!
So far , the best content on UA-cam.Well done sir , Bravo!!!!!
I n not able to login after logout what to do
wow, great tutorial as always, thank you very much. Love your tutorial about JavaScript and Node JS.
Thank you so much Rian! 😊
You create perfect and understandable tutorials, thank you so much :)
Thank you so much Semira!
One thing for sure , you are the best tutor . And thanks for sharing the repo .
This is one of the best free videos I've seen so far. God bless you for uploading this video for free, instead of paying for an expensive 10 hours udemy course that you wouldn't learn much
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!
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?
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!
thank you soo much bro you are the best !!!!! i couldn't find anyone so much consistent like you
This is another new level, well done JSM 😃
Thank you so much!
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!
i still love your videos and thank you for making them. dont stop doing this.
Im new to any JS and tried following the tutorial together with the source code, but like other tutorials I am pretty much wild. I think I need to learn backend, npm, npx and yarn before visiting any tutorials. Very good tutorial!!
How is it going @Imceereal ?
This is worth my time, thanks js mastery
Glad to hear that!
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!
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 😊
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!
This man here is the best. Damm. awesome content bro
You're the best! 😊
My men outworking literally everyone on the game. Just thanks for sharing your knowledge with the community
Glad you like it, thank you!
Stream + React + JS Mastery = ⚡️⚡️⚡️⚡️
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! 🎉
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
What a great tutorial. Learned a lot. Thank you!
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?
Awesome. Just a suggestion, if you could make the ultimate e-commerce tutorial with react, redux toolkit, express, that would be amazing.
Great idea!
I have just seen this but i know its a bang like always. The real JS mastery.
Thank you!!
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
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?
Thank you for such an amazing tutorial and literally no one will post making an app like this
Thank You soo much
Deserves much more exposure, great content and for free ! Liked and subbed
Thank you so much!
Would be fun to build this.
Thank you
Thank you!
Great 🙌 Amazing 🎊Best YT channel ❤️
Thank you so much! 🎉
Probably the best course on UA-cam
super cool... impressed in the introduction at the beginning itself
Thanks!
Amazing work bro!
Thank you bro! ❤️
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!
I have liked and subscribed. I must say, superb project and great work
WOW thank you for this! Keep up the great videos man.
Glad you like it Austin!
Yet another masterpiece!!!! What say to start tutorials on Ethereum based Dapps!
Damn, that's a great idea! Do you have experience in that?
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!!!!!
}
>
nested obejct idea was fantastic great adrian great
Best channel for building and learning real world projects
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.
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
All your videos are top quality products. Many new things packed in each . Like DaVinci Or Michaelangelo working hard at each pixel or grain or stone to make it perfect
Perfect man. we need people like you.
Another Master Art
Thank you! 🙌
another masterpiece from the master, awesome work bro as always
Thank you man!
This is a great lesson! A big like for the tutorial!
Awesome 🔥🔥🔥🔥
Thanks! 🔥
hey lads! if anyone has problems with the toggle button that opens the list container in the responsive mode, the app.css file has an error. just check it it says something like "channerl".
.team-channerl-header_menu-icon {
.....
}
.channerl-list__container-toggle {
.......
}
also check the @media query.
thanks for such an amazing tutorial. I've learned a big bunch of things with this video...
I'm so grateful I found this channel!♥
Best react creator
Thank you so much! 👌
Great tutorial as usual you never cease to amaze me.
Thank you! Cheers!
Yeah I was waiting since yesterday when I got to know something is coming today and there it is .I didn't get that notification part but anyway I will learn. Thanks man.
You are a legend.
Hope mern stack 7 part is coming
Thank you, enjoy! 😊
@@javascriptmastery Also I thought that the masterpiece would be regarding movie API one as I saw in Instagram. Also I am having zoom front end internship interview a week after hope this project will help me.
That project is coming soon! Good luck on the interview!
@@javascriptmastery Thank you ☺️
Holy shit dude
It's too good
Thank you so much!
So generous! I am shocked. Thank you