I can't believe that 8 months earlier I couldn't understand how a simple function with parameters works. And now I'm watching your video in React at 1.5 speed. To everyone who might be struggling: time and effort will take you where you want!
As always Kyle, amazing content!!! FYI... For anyone that happens to be using Bootstrap 5, some of the classNames may not work. For example, at 10:54, "mr-2" (margin right) would instead be "me-2" (margin end). This is also the case with "border-right" needs to be "border-end" at timestamp 27:14.
How will you eat if you are not hungry. Similarly, how will you learn when you are not interested. Teaching is not that special. Many try to spit knowledge, but most do it in the wrong manner. A real teacher guides you, not leaves you confused after telling facts. Teacher is a business, a trade of satisfaction for knowledge. We are happy after learning from someone but then we are unhappy to know we have to guide ourselves further and become our own teachers. Teacher's day is actually a celebration of our own selves, not others who incompletely guide us. We are our own masters, our destiny is in our own hands.
At 17.07 there is a mistake in the code, which will lead to the error "Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development." to fix this use => if(jsonValue !== 'undefined' && jsonValue !== null ) return JSON.parse(jsonValue)
I really appreciate your videos so far because you cut out all of the unnecessary crap that makes learning a new concept more confusing. More coding tutorials should be like this!
Not to be rude and i really don't think these things are enough to dislike a video, but kyle has a bad habit of not following naming conventions, he names many variables with little to no difference like for say contacts,contact or something simmilar hence it becomes very difficult to follow along some times
Kyle, you have made learning web dev soooo much easier for me and I appreciate all the hard work you put into this long video. There are so many people out there who are brilliant developers/engineers but who are really bad at explaining things. I'm sorry :P You are so good at what you do. Thank you for providing this knowledge for free. You are the most consistently helpful dev RUclipsr I have encountered.
On 17:12 , “ && jsonValue != ‘undefined’” should be added to the ‘if’ parentheses because the browser has returned the error of ‘undefined’ which is a string not a undefined data type. I have tried on Chrome, not sure how other browsers react under this issue.
you need to use same bootstrap version as kyle if you want all classes and boilerplates work. so if you have problem first uninstall latest react-bootstrap/bootstrap yarn remove react-bootstrap bootstrap (or npm uninstall react-bootstrap bootstrap) then yarn add react-bootstrap@1.3.0 bootstrap@4.5.2 and finally restart react server
Damn... I spent literally 10 hours following this... thanks a lot for making this free! There are two things that I want to spot out: - I think the approach of setting the receivers in an array and group them without a "group id" makes very troublesome all the process. Setting a group code allows to identify inmediatly the group without need to set a ArrayEquality function, and also will save a lot of logic process in the ConversationsProvider component. Also, in the server you just can let the user Join the group code and socket io will do all the send message task. - I don't understad why the socket server is working without the CORS implementatio... I did't use CORS params in my local server and it doesn't work, server just refuses conection. Is it perhaps version changes?
At 50:12:00 hold alt and you can set multiple marks at any point in vs code; this way you save yourself from writing the same all over again. There are helpful snippets for importing modules and using hooks as well...Great video. Thanks for your effort much appreciated.
O my god i don't believe that you made a big tut. Well done body! In my tut i make many hours videos tut. The biggest is 8 hours. Is really very difficult to make big tuts! Again well done!!!
This is a fantasic tutorial, I wonder why Kyle doesnt use nextjs to create project ? It gives you ssr right out of box, anyway, this is a practical and useful project, you just need to add webrtc to show the live stream !!!
i was here just to take hints for the backend... but now I realised there's a lot for me to learn in client side as well. I developed something similar to what you are doing here but mine looks way to complicated , isn't well optimized and have way more line of codes even tho ultimately my code dose the same thing as yours... Now I'll watch your vids and refactor my app to make it as clean and optimized as i can.
Just a heads up for anyone planning to use this. If your platform requires any kind of security DO NOT store the conversations in localStorage, this would enable anyone participating in any chatroom to see all messages that have been sent by anyone.
Ok... Idk how, but i did everything and it wasn't working, so i did what i read in a comment about server.js const io = require("socket.io")(5000, { cors: { origin: "*", } }); it wasn't working either atm, spent some time like 10 minutes and then it worked, still, IDK HOW, anyone?
Happy teacher day sir.In India teacher is god where there is culture where we facilitating teacher and bows down and touch feet because we believe teacher is god for us.so bows down and touch you feet because you are teacher for me. Please kindly request you to create it by angular also.
Great effort, Kyle almost 2 h of recording and hours of searching and coding THANK YOU , I liked the (useState, useContext, useEffect) combination, however I distracted a bit with bootstrap and styling but I think it is useful for guys want to tie it all up together.
i can't keep up with ur speed, i do understand the syntax but i am not able to join the threads, what is working for what, man i need hell lot of practice and reasearch for doing something like this.....salute to you Kyle, u r GOD
I have three questions. 1. How do I remove contacts and conversations? 2. How do I use my own CSS instead of the bootstrap css (located in \client ode_modules\bootstrap\dist\css)? 3. How do I make this into a desktop application? Thanks in advance.
I've been at this for almost 10 hrs and I'm only at 1:20. Also pausing and making sure I understand as we go and also externally researching concepts if I don't understand though. Holy cow I have learned so much about react.
Great content as always Kyle! Just for a frame of reference, how long did it take you to make this app (just the app, without the tutorial magic and video stuff).
@@elijahromer6544 yeah, that's weeks of work for a regular developer figuring out how that works from scratch. Just io alone can be a real head-scratcher.
i did same with you while watching. but i doesnt work. i copied your source code... still does not work. there is no error but i cannot text with contacts
I get this error everytime, does someone know what causes this and how to fix it? Access to XMLHttpRequest at 'localhost:3001/socket.io/?id=6ec194d5-a212-4b83-9569-175c880a79bf&EIO=4&transport=polling&t=NWtANiG' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. I've been stuck on this for about 2 hours now
I ran into that and in my case it had to do with socketio not being required with a lenient cors policy. I added a line to the server definition: const io = require('socket.io')(server, { cors: { origin: '*', } }); Hope this helps anyone :)
51:50 When and where did you define "conversation"?? I'm getting an error Failed to compile. src/contexts/ConversationsProvider.js Line 22:52: 'conversation' is not defined no-undef Line 23:24: 'conversation' is not defined no-undef Line 32:17: 'conversation' is not defined no-undef
I wanted to comment to save others the headache if they are using new versions of react. If running react in strict mode the useLocalStorage hook will not work. Strict mode will reset the localStorage state to undefined on reload. Removing strict mode will allow the localStorage state to persist
Im stuck around 42:00-43:00... when I start the application its giving me an error saying " TypeError: Cannot destructure property 'Contacts' of 'Object(...)(...)' as it is undefined. " in regards to the const { contacts } = useContacts() line.....
I can't believe that 8 months earlier I couldn't understand how a simple function with parameters works. And now I'm watching your video in React at 1.5 speed. To everyone who might be struggling: time and effort will take you where you want!
Congratulations!!! Keep up!
This is becasue of shitty instructors. There's a lot of them now.
Same
same here brother
OH SAME
this is amazing, but I feel like without the tutorial I woud never be able to do something like this. Beyond words. No way I would do this by myself
As always Kyle, amazing content!!!
FYI... For anyone that happens to be using Bootstrap 5, some of the classNames may not work. For example, at 10:54, "mr-2" (margin right) would instead be "me-2" (margin end).
This is also the case with "border-right" needs to be "border-end" at timestamp 27:14.
you are the best! thank you)
Lifesaver mate
@@verdyguo recomended bs5 documentation, it's changing any class...
Life saver!!!!❤❤❤
Thanks for saving our lives
Happy teacher's day Kyleeeee
Lol.
yes
@@pizzapanni what Lol?
@AmazingFacts No Fiance. 😜😜😜😝😝😝😝😝😝😝😝😝😝😝😝😝😝
How will you eat if you are not hungry. Similarly, how will you learn when you are not interested.
Teaching is not that special. Many try to spit knowledge, but most do it in the wrong manner. A real teacher guides you, not leaves you confused after telling facts. Teacher is a business, a trade of satisfaction for knowledge. We are happy after learning from someone but then we are unhappy to know we have to guide ourselves further and become our own teachers.
Teacher's day is actually a celebration of our own selves, not others who incompletely guide us. We are our own masters, our destiny is in our own hands.
At 17.07 there is a mistake in the code, which will lead to the error "Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development." to fix this use => if(jsonValue !== 'undefined' && jsonValue !== null ) return JSON.parse(jsonValue)
This helped me out, any idea as to why it doesn't work as shown in video?
thank you so much! I almost gave up after going to the google doc page and the react link for debugging, and still not being able to fix it.
Wow! Thanks, this didn't even come into play until the end.
You should just go to Applications, LocalStorage and clear it out.
@@adamhardie506 maybe a recent update
I really appreciate your videos so far because you cut out all of the unnecessary crap that makes learning a new concept more confusing. More coding tutorials should be like this!
This is exactly what I need for my college project. Thanks, Kyle
Are the seven dislikes bots? Honestly, what's there to dislike. Thanks for this great video Kyle.
some people just had a bad day, and want to share it with the world 😃
Wow in 2 weeks the dislikes grew almost 4 times.
heavy usage of bootstrap, needless usage of local storage, and his face
Not to be rude and i really don't think these things are enough to dislike a video,
but kyle has a bad habit of not following naming conventions,
he names many variables with little to no difference like for say contacts,contact or something simmilar
hence it becomes very difficult to follow along some times
@Luke Mwenda same, I cant keep up with how fast he does things, this is supposed to be a tutorial? I got sooo many errors copying his code, insane
Man, you're at God level w/ the react. Excelsior, mate.
Kyle, you have made learning web dev soooo much easier for me and I appreciate all the hard work you put into this long video. There are so many people out there who are brilliant developers/engineers but who are really bad at explaining things. I'm sorry :P
You are so good at what you do. Thank you for providing this knowledge for free. You are the most consistently helpful dev RUclipsr I have encountered.
I just realized Kyle grew a beard by the end of the video :D. To do all this in a single shot, you are a monster! Respect++
Facebook: *stealing data from users of whatsapp
Kyle: hold my beer
I so love this channel
Good luck on your interview!
Jesus christ this channel is a gem
It seems InputGroup.Append is not in React Bootstrap anymore, just a Button in InputGroup after From.Control will do.
MVP
On 17:12 , “ && jsonValue != ‘undefined’” should be added to the ‘if’ parentheses because the browser has returned the error of ‘undefined’ which is a string not a undefined data type. I have tried on Chrome, not sure how other browsers react under this issue.
thanks
@@clrs8995 No problem 😇
the speed of narration is breathtaking
You and Ben Awad are classic gem
you need to use same bootstrap version as kyle if you want all classes and boilerplates work.
so if you have problem first uninstall latest react-bootstrap/bootstrap
yarn remove react-bootstrap bootstrap (or npm uninstall react-bootstrap bootstrap)
then
yarn add react-bootstrap@1.3.0 bootstrap@4.5.2
and finally restart react server
Life saver!
You're the best teacher man! You taught me a lot ❤️
You are a lion my guy. This is every Software Developer's dream
bro, i finally got around to following this tutorial. and i learned so much more than i expected. The fast paced coding made me sweeet at times
I really love your coding style.
I learned Javascript while watching your channel regularly and now I have become a snob I think.
Damn... I spent literally 10 hours following this... thanks a lot for making this free!
There are two things that I want to spot out:
- I think the approach of setting the receivers in an array and group them without a "group id" makes very troublesome all the process. Setting a group code allows to identify inmediatly the group without need to set a ArrayEquality function, and also will save a lot of logic process in the ConversationsProvider component. Also, in the server you just can let the user Join the group code and socket io will do all the send message task.
- I don't understad why the socket server is working without the CORS implementatio... I did't use CORS params in my local server and it doesn't work, server just refuses conection. Is it perhaps version changes?
I'm also unable to make a connection, how did you solve this?
At 50:12:00 hold alt and you can set multiple marks at any point in vs code; this way you save yourself from writing the same all over again.
There are helpful snippets for importing modules and using hooks as well...Great video. Thanks for your effort much appreciated.
O my god i don't believe that you made a big tut. Well done body! In my tut i make many hours videos tut. The biggest is 8 hours. Is really very difficult to make big tuts! Again well done!!!
kyle you know you have a grown a lot!!
Have been watching your videos since the beginning. Love from India. 🎊
Happy teachers day man! Thank you so much for your videos!
this is solid. almost broke my remote hitting that pause button so many times but def learned a lot with this one. Thanks bro!
This is a fantasic tutorial, I wonder why Kyle doesnt use nextjs to create project ? It gives you ssr right out of box, anyway, this is a practical and useful project, you just need to add webrtc to show the live stream !!!
i was here just to take hints for the backend... but now I realised there's a lot for me to learn in client side as well. I developed something similar to what you are doing here but mine looks way to complicated , isn't well optimized and have way more line of codes even tho ultimately my code dose the same thing as yours... Now I'll watch your vids and refactor my app to make it as clean and optimized as i can.
Hey Kyle!
Love all your tutorials, you explain everything so well
You should do a Trello Clone!
True
Happy teacher's day sir😇😇😊😊😊
Only channel I play the video and the first second I hit the like button.
Just a heads up for anyone planning to use this.
If your platform requires any kind of security DO NOT store the conversations in localStorage, this would enable anyone participating in any chatroom to see all messages that have been sent by anyone.
ohh nice, where to store it?
@@osirusj275 databse on the server
if you close your eyes and listen you can actually hear JerryRigEverything's voice
Whoa that's true
Ok... Idk how, but i did everything and it wasn't working, so i did what i read in a comment about server.js
const io = require("socket.io")(5000, {
cors: {
origin: "*",
}
});
it wasn't working either atm, spent some time like 10 minutes and then it worked, still, IDK HOW, anyone?
this fixed my problem with the CORS policy, thanks! I spent a while trying to fix it lol
basically we can enter what origins we allow to connect to , star means all.
godbless you!
I've been searching for this type of MERN stack application,
I find it really easy to understand either being complex
Thank U Kyle for your hardwork
What do you mean?
@@abhayagarwal5097 i don't know you should have asked me 9 months ago 😁
Happy teacher day sir.In India teacher is god where there is culture where we facilitating teacher and bows down and touch feet because we believe teacher is god for us.so bows down and touch you feet because you are teacher for me.
Please kindly request you to create it by angular also.
nicee! good to see new React projects
From your videos ,I think you were a pro at javascript
This was exactly what i was looking for! Btw, your code is extremely clean and elegant. Cheers!
Hey, have some love from India. One of the best teachers and tutorial makers!
Great effort, Kyle
almost 2 h of recording and hours of searching and coding THANK YOU , I liked the (useState, useContext, useEffect) combination,
however I distracted a bit with bootstrap and styling but I think it is useful for guys want to tie it all up together.
i can't keep up with ur speed, i do understand the syntax but i am not able to join the threads, what is working for what, man i need hell lot of practice and reasearch for doing something like this.....salute to you Kyle, u r GOD
Kyle: I am speed
Happy teacher's day Kylee sir. ❤️Love from India ❤️
I have three questions. 1. How do I remove contacts and conversations? 2. How do I use my own CSS instead of the bootstrap css (located in \client
ode_modules\bootstrap\dist\css)? 3. How do I make this into a desktop application? Thanks in advance.
@ChoppedBlade Thanks very much, but I meant where do I add a function to add and remove contacts in the app.
@@thomast2577 extend the context to have a remove contact as well as the createContact same for conversations.
wish y luck for 1M 🔥 you work really hard 👍
thank you kyleeee with this chat app now I use this my own version in my local area network!!!!!! to chat with my only family and friends
WOW! This was awesome. I know it was simple but I loved the "New" button verbiage switch. Some times it's the little things 😄 Thanks Kyle!!
Make a Windows 10 clone....😁😁..you will ahead of everyone else.... awesome content though.
You're one of my favorite Sir
Lots of love from India😍
Hi Kyle !!!! I love you 🤟 keep making awesome stuff
I love this concept. I’m waiting much much more like a project from u. Just keep going
Thank you for being the mentor we all needed !
I strongly support this handsome guy, sounds good. Simple ,short and precious 🤴.i don't have time to watch this video now see you later.
Another Awesome video Kyle! Can you make a video on making a weekly scheduler app?
you're the best Teacher. Happy teachers day!!!!
Mannn, This is lit 🔥🔥🔥 That's what i'm looking for !
Is that enough that I leaned whatever he mention in the description??
Happy teachers day ❤
it took 4 hours for me just following what he did. but the playback of this is only just 1:44:07
I've been at this for almost 10 hrs and I'm only at 1:20. Also pausing and making sure I understand as we go and also externally researching concepts if I don't understand though. Holy cow I have learned so much about react.
I instantly subscribed when I saw the project. following along now.
Finally, It runs Kyle Thank you for the video.
u r the best teacher
Great content as always Kyle!
Just for a frame of reference, how long did it take you to make this app (just the app, without the tutorial magic and video stuff).
I too am curious of this! This must have been weeks of planning and coding/ debugging....
@@elijahromer6544 yeah, that's weeks of work for a regular developer figuring out how that works from scratch. Just io alone can be a real head-scratcher.
i did same with you while watching. but i doesnt work. i copied your source code... still does not work. there is no error but i cannot text with contacts
Happy Teacher's Day
From India 🇮🇳
This taught me so much I'm astounded.
Who else is having issue with socket io
I followed exactly what was in the tutorial but the connection is not working
#githubFollowerGang , knew this video's coming.
Huge fan of your videos Kyle, keep it up!
Awesome masterclass :D
THIS IS CRAZY! I was literally thinking about building this but had no idea how to do it! I love you Kyle!
I get this error everytime, does someone know what causes this and how to fix it?
Access to XMLHttpRequest at 'localhost:3001/socket.io/?id=6ec194d5-a212-4b83-9569-175c880a79bf&EIO=4&transport=polling&t=NWtANiG' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've been stuck on this for about 2 hours now
Great work, bro❤️
Kylee love u brother, keep doing it more brother
hey< what I suppose to do with cors policy, my code with no errors, but in console lot of errors about this Cors policy
I ran into that and in my case it had to do with socketio not being required with a lenient cors policy. I added a line to the server definition: const io = require('socket.io')(server, {
cors: {
origin: '*',
}
});
Hope this helps anyone :)
@@sebastienmorin9020 thanks man, now its work perfectly)
@@sebastienmorin9020 It works. Thanks
Thanks a lot Kyle that was great
Wow. Awesome!!! TQVM!
Great stuff, I followed this using TS, so it took some extra time, but it was worth it!
51:50 When and where did you define "conversation"?? I'm getting an error
Failed to compile.
src/contexts/ConversationsProvider.js
Line 22:52: 'conversation' is not defined no-undef
Line 23:24: 'conversation' is not defined no-undef
Line 32:17: 'conversation' is not defined no-undef
Keep up all your good work!
You are perfect . Awesome content 👏👏
nice work hope you could do a slack clone next
Awesome video! I always learn something from each one of them. Thank you :)
I wanted to comment to save others the headache if they are using new versions of react. If running react in strict mode the useLocalStorage hook will not work. Strict mode will reset the localStorage state to undefined on reload. Removing strict mode will allow the localStorage state to persist
It's here!! ❤️❤️
you do a very good job of explaining everything along the way thanks!
Seems like a good tutorial, just confused why you would message somebody called Top Right or Left, why not just use the names John or Jane
man you are talented at everything
Im stuck around 42:00-43:00... when I start the application its giving me an error saying " TypeError: Cannot destructure property 'Contacts' of 'Object(...)(...)' as it is undefined. " in regards to the const { contacts } = useContacts() line.....
Same :(
Hey is anyone getting CORS error?
meeee
@@syedarfaat7499 simply install cors package and apply to app in express as a middle ware
Happy teachers day
Create more react projects
Next: build a Snapchat clone please :)
Amazing work, thanks!
Happy Teachers day Kylee.Please tell where are you from?
Nice Kyle.
another great project!