Build A Realtime Chat App In ReactJS and NodeJS | Socket.io Tutorial | MERN Chat App Using ReactJs
HTML-код
- Опубликовано: 13 июн 2024
- In this tutorial we are going to learn how to build a Chat application where you can send and receive messages in realtime. We have used MERN stack approach to develop this app. For more, we have integrated the socket.io on Reactjs client side.
By following this tutorial you will build the strong basis of nodeJs environment.
BONUS: We have integrated this Chat App in our Social Media Application built in previous tutorial:
MERN Social Media: • MERN Stack Social Medi...
Support me: / zainkeepscode
Source code: github.com/ZainRk/MERN-Social...
"Copyright Disclaimer under Section 107 of the copyright act 1976, allowance is made for fair use for purposes such as criticism, comment, news reporting, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational, or personal use tips the balance in favor of fair use."
Time stamps:
00:00 Intro
02:24 Overview
04:12 REST api
30:01 Frontend
1:13:30 Socket.io
1:40:04 Scroll to chat end
1:42:28 Online Users
1:47:58 Outro
Don't forget to hit Subscribe button:
React Responive Portfolio Website tutorial:
• React Responsive Portf...
Reactjs Tailwindcss Music App Landing page:
• Animated React Website...
Reactjs Ecommerce Store tutorial for beginners:
• Ecommerce Store Tutorial
React Sidebar Tutorial:
• React js Sidebar | Ani...
Social Links:
Instagram: / zainkeepscode
Brilliant Effort ... Helped a lot in my first year internship project .
I learned a lot during this tutorial, You improved my skill extremely. Thank you bro❤.
Extremely good content, your way of teaching is simple and straightforward , and your hard-work is really appreciable.
Does it have database??
@@sakshi5973 Yeah MongoDB
Hey! You are my first patreon in 10 years. Your tutorials are insaaaane! Your projects are from 0 to professional production level. Amazing!
Thanks for support. ❤️
@@ZAINKEEPSCODE keep up the good work 💪❤️
Does it have database
Hello css file is missing which make difficult for new subscriber like me please provide css code
@@Benzeno007 css code is in chat.css in pages directory and remaining CSS code is in chatbox.css in components directory
Liked before watching. Thanks for the great content always.
I will finish your previous project and I will finish this, you are gonna improve our skills to the next level ! Thank you
Thank you too!
@@ZAINKEEPSCODE Brother i didn't found the video of integration of social media backend and frontend please provide.
i found this video after going through dozens of videos from big channels
this video is great because :
1. great code structure and file structure
2. very concise
3. good explaination
hi is final project is working? please reply
Awesome! Easy and clean code. You can make it complete MERN stack dev by adding: comments on post, share post, view profile, etc. Keep it up.
will u please share some resourses to add the functionly which u just added in the comment
the best one i have seen on youtube so far
Thanks man Your tutorial is so awesome, i hope u success in ur journey and happy always 🙏🙏🙏🙏
I sure! I was about to do this. Thanks so much
You just are damn good, You just earned a subscriber..
can't wait to see more of your work..
wow thank you so much sir for this beautiful project😍
Bro your channel is gem for frontend devs plz keep up the great work.
Hi Ankit. Are you a fresher and open to opportunities in web development? Have you done projects on ReactJs?
we love you bro you're fantastic !!
You did really great job man only the website needed to be responsive
One of best tutorial in RUclips 🙏🙏🌻
Thanks for like the content. Keep learning
thank you so much bro for your very use full tutorial
Thanks a lot for your video, really love it ❤
Awesome work!
Top notch tutorial man, help deploy it too
this video works , thank you
Great tutorial i learnedd react with your healp i apricot it
Such an Amazing tutorial. Thank you!
You're very welcome!
Completed successfully 👌 🙌
thanks i learn alot from this video.
very nice Amazing Masha Allah keep it up
I really appreciate this sir, It's just like I'm the one you did this for
This is the amazing!
you are amazing budddy...
Smart person I ever know ✨
Thanks dude you gave Me New reason to learn react js
Welcome & keep learning
Very cool, I hope Deployment Heroku works with this wonderful explanation to complete everything
thanks you sir for this Aswome projects
Thank you!!!
Vraiment waw 👏👏
Thank you ❣️
Amazing ❤❤ bro you have made actual clone of whatsapp
You makes coding so much easy for me
Suggestion: Add functionality to start chat with other users
again nice
Amazing
Thank you
I have subscribed sir
Awesome
good cours
you're awesome
Create separate playlist related to this project.
awesome bro , add some new features also like story, comments, repost
greatsss
which extention are you using for node js to give auto suggestion of API in controller
Suggestion: Add functionality to view other profile and start chat with other users
Zain can you make any prerequisite video that will make comfortable before starting out you mern stack video. I know javascript but dont know anything about react,node,socket and mongo.
Wow!
In your previous video of 3rt part of MERN stack social media app please can you implement a error message if username or password doesn't match or doesn't exist in the database please
Why socket has a separate package.json and folder from the server? does it mean it has also a separate host server?
Is tailwind used for the styling ??
Great work man, really appreciate it. Please add a video of this application deployment that will really make this project the best tutorial based full stack MERN project.
Hey Shubham. Have you created a project on ReactJs? Are you interested in exploring job/internship opportunities in software development?
@@Hafsa0526 Yes I have done some projects. I am interested in job opportunity.
@@shubhamrajan2488 Hey Shubham. Thanks for responding. For more discussions on the opportunities in software development, you can connect with me using the contact information on my channel.
I am also looking for a job
nice
Please make a video on deployment also
content is awesome sir. i learn a lot. one thing i will say, keyboard buttons voice is too much
Can we create the main server and socket server in one file or server
please bro make a complete series of MERN Stack development
It's extremely good content but you haven't explained abt how to creates a clusters and some extra stuffs we faced problems there.
it was very good tutorials but need these. bcoz I m frontend dev not much ideas about backend but if you provided short glimpse then it could be better to do it parallelly with u.
the css file you provided in the github is not correct as in video there are more than 170+ css lines of code and in github there is only 73
Please implement comment functionality in social media app
Brother when I am using your code I'm not getting followers in my conversation component and if I am creating chatId manually through postman then I'm able to see followers in conversation component to chat them but I want when I follow someone and he also follow me then automatically cheated should be create and I should be able to see in my conversation component
please link for the previous tutorial for server side. I can't find it.
Amazing tutorial bro...by the way how old you are bro
can I make it as seperate project
Is it necessary to complete ur social media app to build this chat app or can i just build this seperately...?? please reply
What about the functionality of comment and share icon??
hey , can anyone please say me , when jhony deep chat with elon that time in my chat view show my chat UI jhony deep image , but it maybe show elon Profile image is it.
💥🌟
Can someone tell which intellisense or snippet he is using which automatically show the code
How to Deploy this Project Please Upload Video
Привет у тебя в репозитории все коды не рабочие? вот скачал этот репозиторий а он не работает именно серверная часть
выдает ошибку 500 при попытке войти в личный кабинет
Rahmat
Please make post view with comments and share options. And making others profile Viewable
Hey bro, can you please add a feature to create new chats for new users?
Chat does not display new users
I have to do it using thunder client
You made a amazing app i really liked it and built it for my college project 😀😀😀😀😀😀😀😀
hey bro is mangoDB connected in this please tell.
Hey, how to add conversations automatically by adding friend?
anyone know which Vscode theme does he using?
good work bro but how do we find another user to chat with ?
Pls as a beginner I want to learn how to setup Vs code to the level that will help me improve my performance.
can we add this chat app in your previous social media app?
I just learned JS (HTML, CSS done too..) but I'm totally worried about what to do next ... planning to do some basic projects. But all these term like React, Node js, Mongodb, Mongoose, next js, particle js, express js seems jargon to me!! now u used socket io... what to do??
First start with react and build some projects with it before moving to the next.
Why you don't provide any middleware to chat and massagemodel like authentication 🙂
Can we make group chats?
Please, make an eCommerce application with mern stack.
Brother Please make a video on how to Deploy this Project on Vercel.
Isme aap debounce kiu nhi use kiye clients ko kaise pta chlega ki msg type kr rha hai
Hii actually I am facing a little bit difficulty while making this chat I have fully completed the other 3 vedios but while making this chat element my chatBox elements like photo and convo is showing at extreme right below that 4 icons(nav,comments) in actual it should show in the middle like yours.
Can you pls help me and suggest me something it will be very helpful
How u able to solve this problem I also getting same problem
Deploy kese kre iska bhi video bnadena sir
Sir please upload how to develop this project
Its a group chat or we can create a new chat?
THANK YOU SO MUCH ZAINKEEPSCODE!
Sir please make a video on how to Deploy Your Social Media app on Vercel.
Yes we need this video.
@@flickboi2322 Are you getting errors when you deploy?
@@codenamemoe9337 yes
how to create Mongo Db database and other thing's for this project
Thanks but can you order these videos to know the right way to see them