React Chat App Full Tutorial 2024 | Realtime Chat Application Project with Firebase
HTML-код
- Опубликовано: 12 июн 2024
- React real-time chat application using Firebase. React chat app project.
Get Hostinger Discount: hostinger.com/lamadev Coupon Code: LAMADEV
Join the upcoming React Master Course waitlist: list.lama.dev
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Join Lama Dev groups
X / Twitter: [x.com/lamawebdev]( / lamawebdev )
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
Source Code: github.com/safak/react-fireba...
VPS Deployment Commands: github.com/safak/youtube/tree...
00:00 Introduction
03:01 Installation
05:28 Chat App Database Structure
10:15 React Chat Application Design Tutorial
12:35 CSS Glass Background Effect
14:01 Chat App Components
18:15 Chat List Design
22:06 React Search Bar Design
27:23 User List Design
31:07 React Chat Component Design
33:38 React.js How to Add Emoji? (React Emoji Picker)
45:32 Chat Messages Design
50:45 Chat Detail Component Design
01:00:36 React Auto-Scroll using useRef Hook
01:03:50 React Login Page Design
01:14:20 React Notification Library (React Toastify)
01:17:25 Add New User Component
01:23:58 React Firebase Tutorial 2024
01:26:30 React Firebase Authentication Tutorial
01:31:55 React Firebase Sign Up with Email and Password
01:33:41 React Firebase How to Add the User Data to Firestore After the Authentication?
01:38:19 React Firebase How to Upload Image?
01:47:12 React Firebase Login (Sign in) with Email and Password
01:49:00 React Firebase How to Store the User After the Authentication?
01:51:30 React Why Do We Need State Management Tools?
01:56:07 React Firebase Auth with Zustand State Management Tool
02:05:44 React Firebase Fetching Real-time Data
02:07:30 Fetch User Chats from Firestore
02:14:14 React Search a User from Firebase Firestore
02:18:44 Create a New Chat in React
02:26:22 Fetch a Single Chat and Chat Messages
02:28:00 React Zustand Chat Store
02:38:42 Add a New Chat Message
02:50:44 Add an Image to the Chat Message
02:55:58 How to Block / Unblock User?
03:03:00 React Search Filter Tutorial
03:05:04 How to Deploy a React App to a VPS in 5 Minutes?
03:14:46 Outro 
Наука
Hi friends :) Thanks for watching. Use this link for discounts on servers and hosting plans: hostinger.com/lamadev Coupon Code: LAMADEV
Hi.. can u upload a video about hosting a mern stack website in hostinger .. it will be so usefull lamadev..
Thank you! big bonus for returning to standard React tutorials instead of the trend of everybody using Next.JS. also great to have the system design explained at the start so we know what the goal is any what is been done. thank you!
I think it would be better to use a UI library like Tailwind for future projects so we can focus on what really matters. Thank you!
Is there a way to support you other than the link ? as your videos helped me greatly...
i tried to npm run the completed source code from github but is giving errors please i need source code
Thanks Lama for including deployment as well.
I love your approach. You get the barebones structure then you make it look nice making your content really easy to follow!
can you copy the example of env please?
@@nolep5555 what are you talking about?
provide the time stamp of the video
Impressive tutorial. Clear, concise, very interesting. Congratulations and thank you for sharing your knowledge.
Hey Lama ! Thanks for the great content. I've just started using react and your channel is helping me a lot !
Thanks Lama, nice approach, using your example for doing a chat app using Django in back-end, thanks again!!!
Lama я смотрю тебя уже больше года, с самого начала моего обучения. По твоим видео и советам по практике уже выполняю тестовые задания для устройства на работу. Просто хочу сказать тебе большое спасибо за твои уроки. Каждый дизайн прекрасен. Я серьёзно
Бро, продолжай радовать людей новыми видосами. обнял 🤝
much love for your content sir.
Lama My teacher n mentor.tnks a lot u r touching lives
Hey I really love your approach! I really appreciate if you do system design kind of thing first and then code in upcoming projects also.
Hi LamaDev, your content is always amazing. Is there a video teaching how to integrate your own backend with nextjs?
Thanks, was a good mini course. Learnt alot 👍
Top notch Professional Application👍
Awesome way of teaching!
wow sir, you make it to look so easy and efficient, its rly helping me to follow your work. After doing all of your projects I will return to this comment to tell you much I have improved....rn I'm suffering from making even a single page website
I love you much much ...realy your content is unique
Amazing work. Thanks for your time and efforts, much appreciated. I would like to see how this can be extended to a group chat mode.
Great tutotorial, it's very helpful!!!
I was wondering if you could continue this project but also implementing the audio and video call options between users and maybe also creating group chats, it would be amazing and very interesting to see!
Thank you anyway!!!
Great Teacher ....🙏
You should be using memo, callbacks, and async/await for efficient functioning. its two laggy without these function
ty for the video! any ETA for your react course?
The way this man say image >>>>>>>>>>>>>>>>>>>>>>>>>>>
Hey lama! What are you programming on? Is it a macbook?
Awesome!!! 💯👍
good tutorial. as a webdev-react-beginner this helps alot thanks.
well, i could follow up until 1:24:00 but.. damn. I need at least 1 year to digest all after.
Lama is the best🎉🎉
Great!
I love these videos, is there a channel that does something similar in React Native?
Your videos are helping me alot. Could you please creat any fullstack project where use next js as frontend and express js as backend including jwt authentication.
thankyou lama dev
00:02 Create a full stack chat application using React and Firebase.
02:50 Deploying the React app using GitHub repository
08:46 Design user chats collection for chat application
11:45 Setting up background color and glass effect with backdrop filter
18:11 Creating user information and chat list components
21:27 Creating the search bar and add new user button on the chat list.
27:06 Implementing scroll effect for chat container
29:49 Styling the chat component with image, text, font weights, and borders.
35:16 Setting up the chat input and icons
38:15 Styling adjustments and adding an Emoji picker component.
43:56 Creating chat app interface layout
46:35 Styling the chat messages for better visual appeal.
52:40 Setting up UI layout with icons and images.
55:50 Styling and formatting the chat application interface
1:02:14 Styling and setting up the login page and components
1:05:28 Creating login and register inputs for new users
1:11:30 Styling input fields, labels, images, and buttons
1:14:28 Adding and using react-toastify library for notifications
1:20:35 Styling the form and user interface elements
1:23:42 Setting up Firebase for backend in React Chat App
1:29:39 Creating user authentication and form data retrieval
1:32:27 Creating user and adding data to Firebase Firestore
1:37:57 Uploading images to Firebase storage and managing the process
1:40:42 Function turned into a promise for returning download URL
1:46:34 Implementing user authentication using Firebase
1:49:40 Understanding the cleanup function and state change in real-time data retrieval
1:55:13 Introduction to State Management tools
1:57:52 Handling user authentication status changes
2:03:24 Importance of State Management tools
2:06:04 Real-time chat data fetching and updates
2:11:35 Fetching and displaying user and chat data using Promise.all and sorting chats
2:14:29 Creating a user search function using Firebase queries
2:20:16 Creating and updating user chats in Firebase with unique chat ID
2:23:18 Updating user chat details in the React Chat App.
2:29:21 Implementing user block feature in chat app
2:31:57 Updating receiver block status based on previous state
2:38:01 Updating chat messages with image support using Firebase.
2:41:10 Updating chat message status and content
2:46:52 Updating chat item background and user chats
2:49:51 Implementing image upload functionality in the chat application.
2:55:29 Implementing message conditions and user blocking in chat app
2:58:59 Implementing user blocking functionality
3:05:30 Easy deployment and management using Cloud panel
3:08:02 Connecting to GitHub repository and server for application deployment.
3:13:24 Creating real-time chat app with Firebase is easy and cost-effective.
Alaways great video
Beautiful App
Again a nice project ❤
did you complete it? were there any problems?
@@HONOREDONE-hk7pt I didn’t complete it but you can surely rely on him
Hey, im a bit late but love your videos. Can you please do a video on how to use AI models from huggingface in a react or next js app? Because they have a lot of models hosted there but a video on how to use a conversational model would be excelent please. i cant find anywhere on yt a video like that..
Thanks for this good video. Will you push the full code of the project to github?
Need a Full Stack Clone of video chat app like zoom...where we can make one on one video call and group video call.
Javascript mastery just made one
@@Neil452 Link to video please
Hi Lama, do you create courses on demand?
Lama Please create some AI+MERN projects where we use various models from huggingface or create some cool AI/ML models and integrate it in frontend
I wish to learn these projects
Eg: Creating OpenCV project and integrating it with NEXTjs for video feed using Sockets
Eg: Automating Financial Planning using Generative AI
Love your projects ❤
I have a stupid question. Can we use the free tier for firebase? Does it require a credit card? I am new to cloud so apologies if I am asking stupid questions.
Thanks!
for Cloud Firestorewe have to set up with credit card or what i am facing problem with that
this is awesome
Thanks Lama! What is the theme name of your VS?
Hello Mr. Lama Dev, my dearest friend. This is absolutely amazing. I’d love to use this as a guide for a web app im building, how can I give you appropriate credit? Would you like a link to this video in the code base or is there a repo o can cite? Thank you for everything you do!
Is it possible to send messages using firebase with id values received from mango db?
Hey can you please make the full-stack inventory management apps with Postgres Database?
how did you get scroll style at 29 min
Can you make a Video on Hostinger VPS hosting with Nextjs??... including domain mapping and implementing a local Postgres database??.. will be highly oblighing... thank you..
Thanks bro
Hi Great tutorial BUT.... cant get images to upload. Get this error message when img upload included ......CORS preflight response did not succeed). Status code: 404.
Any suggestions
i got a problem buddy , there is a normal curser in my chatlist and it is not moving , what can i do
Hello how would it be if you use Next.js?
My profile avatars are not loading, do you have any clue on why that might be?
This site designed only for pc?or also for phone? It's very important for me, answer me please
Lama Dev we know how to build apps we saw your tutorials we just need to know about how you design the the applications the before coding are you designing by yourself or you find from somewhere when I wanna build something I know the coding part I just stack between designing layouts choosing colors please help as ❤🥺
I have this same problem 😢😢😢
I'm not good in picking color combinations at all
hi lama are you gonna create a video using mongo or postgres sequelize
Humm interesting to include it in another project :) Merci @LamaDev and i've Hostinger too to run all my projects with NGINX server but I want to add Docker in my vps server to make more ^^ Any advices && || maybe a suggestion for next videos :D
"Merci beaucoup" for this amazing work !!
i am a beginner in react js. can i watch and do this??
frontend ends at 1:23:00, and backend start from there, you're welcome.
can you copy the env.example please
9:23 probably would have been better to have one chat/message collection, and query messages that match sender & receiver uuids.
How to build resume building project which similar to flowCv and admin can add resume templates where user can customise, download and share resume, using Mern stack technology,
I hope you will considere this project
What vscode theme are you using?
Bro can anyone share some insights on why firestore database is asking for billing account on google cloud console?
At 1:33 remember to import the auth method from "import { auth } from "../../lib/firebase";
@cholo2605 after importing also it is showing not identified
Hi @@kottivlogs6679 are you exporting auth from the firebase file like this "export const auth = useAuth() "
@@kottivlogs6679 I'm also facing same problem
Heyy.. have you resolved the problem?
thank you for your help
Sir! Can you make same tutorial using MERN Stack?
Hi, thank you so much for making this tutorial, it is so helpful.
I ran into this problem in part of "Sign Up With Email and Password", I follow the video, however, when I try to sign up, it keeps popping out the error message "auth is not defined", I have been trying to fix this problem for a while, did anyone also had this problem? Please help me out.🙏🙏🙏
avatar link which coming from firebase db is not working ...
First .. Thanks for your Efforts,
i tried your shortcut " compt " to create a function and it didn't worked for me , although i followed your steps and copy your snippet file
Cool App. WebSocket's tutorial next
Haven't gone through the video yet, but does this app not use web sockets?
@@98parth seems not using, just User A send message to User B, then login as User B to view the message.
@@98parth Firebase uses subscriptions, similar, but different.
@@98parth No its all Firebase
Hy everyone I creeate same chat app in React Native and Firebabse also I want to create group chat but group chat only created by admin from a dashboard and add user to group how can achieve this many thanks
Total no of technology that you used to built this project can you please tell me
Great
But why not tailwind
Are you able to deploy this on Vercel?
Can we add a status like online, last seen, typing, received, seen
I would love to see booking app multi vendor app marketplace etc
How do I host it on a free platform? I cannot afford buying a hosting site for this now
First comment love your content ❤
video and audio call is working here?
Hi @LamaDev, for the addUser component, the new box where we can add user is showing under the chat i.e. I am not able to type username for search as there is layer of image or text message from the chat. I check video multiple times, but everything feels same as video, can you or anyone help me in this one ?
same issue my add new user comcopent is coming with the list
Did u make the component position: absolute?
Please next js e-commerce or news website ❤❤
Sir create video on mern stack realchat app ... will be thankful to you
noice
Can i deploy this on vercel ?
hello Guys
got an error while creating authentication for login - 'auth' is not defined no-undef
please help me with this Guys
thanks
I got the site setup but one issue: my user database is structured with "Username" instead of "username" how do i change your code to fit this change?
can you copy the example of env please?\
guys, who has tried this project, please tell me does it work or not, and can it be used for smart phones? And do private messages work? This is very important to me
Why can't you implement unit testing for the same project that ur doing
provide link for the workflow diagram also please
This app add video call method 🤙
Do voice calls work?
is it possible to deploy this on firebase hosting? and what was the backend used for this, was it firebase as well?
firebase handles everything
Web socket is used ?
how did you remove the scrollbar in the Chatlist component? You didn't specify anything in the css file, but your scroll still doesn't show
overflow-y
.chatList{
scrollbar-width:none;
}
Sir does this use websocket?
And is there any pre-requisite of knowing web sockets?
Thank u
Firebase uses subscriptions, similar, but different. I don't think you need to know web sockets.
Please bring a video repeated to WebRTC project
1k number done
Source code not available git 404 page display
👍
does it work on a mobile emulator?