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
Смотрите видео React Chat App Full Tutorial 2024 | Realtime Chat Application Project with Firebase онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Lama Dev 10 Апрель 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 244,606 раз и оно понравилось 6.5 тысяч людям.