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
2 views
948
241
2 months ago 01:46:00 1
НЕЛЬЗЯ СДАВАТЬСЯ! ОСТАЛОСЬ НЕМНОГО! | ПОЛНАЯ КОПИЯ VK ВКонтакте с НУЛЯ | День 8
2 months ago 00:00:00 1
🧟♀️SILENT HILL 2 REMAKE #9
2 months ago 00:00:42 13
Ameca and Azi having a chat
2 months ago 00:35:04 1
Composer Reacts to Chat Pile - (REACTION & ANALYSIS)
2 months ago 01:30:31 1
Turning the World Right Side Up with King Smarty Oct 24 2024