React Chat App Full Tutorial 2024 | Realtime Chat Application Project with Firebase

React real-time chat application using Firebase. React chat app project.

If it is valuable to you, you can support Lama Dev.

Join Lama Dev groups

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
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

[braveitor]

Impressive tutorial. Clear, concise, very interesting. Congratulations and thank you for sharing your knowledge.

[itr_cloud]

I love your approach. You get the barebones structure then you make it look nice making your content really easy to follow!

[gustavogutkoski]

Thanks Lama, nice approach, using your example for doing a chat app using Django in back-end, thanks again!!!

[oli-]

Hey Lama ! Thanks for the great content. I've just started using react and your channel is helping me a lot !

[eQ-]

Thanks Lama for including deployment as well.

[kevinkiumbe]

@lamaDev thank you for doing this tutorial, this is the kind of content college will never teach ! I'm glad to have come across this channel

[SamSiMmP]

Lama я смотрю тебя уже больше года, с самого начала моего обучения. По твоим видео и советам по практике уже выполняю тестовые задания для устройства на работу. Просто хочу сказать тебе большое спасибо за твои уроки. Каждый дизайн прекрасен. Я серьёзно
Бро, продолжай радовать людей новыми видосами. обнял 🤝

[Souleater]

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.

[Soap_js]

Lama Dev is the Best, sharing hours of content for free. hats of to you man <3

[amigos]

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.

[ymprlzn]

Thanks, was a good mini course. Learnt alot 👍

[mengistu]

I love you much much ...realy your content is unique

[rockbelleh]

Lama My teacher n mentor.tnks a lot u r touching lives

[IITHYDCSEtagore]

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.

[akashddeepchitransh]

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.

[Krishnash]

This is awesome "Just Like That"

[x_kirito_x]

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

[SanthoshKumar-lftt]

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.

[martinwiytiszen]

I love these videos, is there a channel that does something similar in React Native?

[favanzzo]

ty for the video! any ETA for your react course?