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

React real-time chat application using Firebase. React chat app project. Get Hostinger Discount: Coupon Code: LAMADEV Join the upcoming React Master Course waitlist: If it is valuable to you, you can support Lama Dev. Join: Buy me a coffee: Join Lama Dev groups X / Twitter: []() Facebook: Instagram: Discord: Source Code: VPS Deployment Commands: 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 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