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: https://hostinger.com/lamadev Coupon Code: LAMADEV Join the upcoming React Master Course waitlist: https://list.lama.dev If it is valuable to you, you can support Lama Dev. Join:    / @lamadev   Buy me a coffee: https://www.buymeacoffee.com/lamadev Join Lama Dev groups X / Twitter: [https://x.com/lamawebdev](  / lamawebdev  ) Facebook:   / lamadev   Instagram:   / lamawebdev   Discord:   / discord   Source Code: https://github.com/safak/react-fireba... VPS Deployment Commands: https://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