In this tutorial we will build a private chat app with React and Firebase. We will use Firebase SDK version 9 which is based on modular approach. We will utilize firebase authentication, firestore and storage services in this project.
Timestamps:
00:00:00 - Intro and Demo
00:05:30 - Create React App and Setup Firebase
00:09:45 - Firebase Configuration
00:14:11 - Navbar Component
00:19:10 - Register User
00:42:05 - Login User
00:47:00 - Logout User
00:51:23 - Listen for Auth State Change
00:57:23 - Private Route
01:02:23 - User Profile
01:10:27 - Profile Image Upload
01:26:26 - Profile Image Update and Delete
01:35:36 - Users Section
01:49:15 - Select User from List
01:53:29 - Send Message to Selected User
02:11:12 - Conversation with Selected User
02:24:26 - Display Last Message and Unread Message
02:46:05 - Responsiveness
02:51:29 - Fix Last Message Error and Add Firebase Security Rule
02:55:11 - Deployment
Source code: https://github.com/itsmefarhan/react-...
Text based tutorials: https://farhanfarooq.com/tutorials
Support Channel:
Patreon: https://www.patreon.com/user?u=43857749