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
Watch video React Chat App Full Tutorial 2024 | Realtime Chat Application Project with Firebase online without registration, duration hours minute second in high quality. This video was added by user Lama Dev 10 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 244,606 once and liked it 6.5 thousand people.