Build a Slack Chat App with React, Redux, and Firebase

Table of contents

1. Chapter 1 : Required / Optional Tools
   1. Required Tools for the Project 00:00:59
   2. Install React / Redux Dev Tools for Google Chrome 00:02:28
2. Chapter 2 : Project Setup
   1. Git Clone and Install Dependencies 00:01:45
   2. Organize Project, Create Routes 00:04:21
   3. Setup Firebase 00:03:40
3. Chapter 3 : User Authentication with Firebase
   1. Create Register Form 00:05:36
   2. Register User with Email and Password 00:06:07
4. Chapter 4 : Form Validation and Authentication Error Handling
   1. Form Validation for Register Form 00:07:08
   2. Clear Errors upon Registration, Show Loading State 00:05:32
   3. Add Name and Avatar to Users, Add New Users to Database 00:07:20
   4. Create Login Form and Functionality 00:04:10
5. Chapter 5 : Integrate Redux for Global State
   1. onAuthStateChanged to Listen for Login/Register 00:02:59
   2. Set up Redux to Make User Data Available on Global State 00:08:49
   3. Add Spinner Component for Loading State 00:03:28
6. Chapter 6 : Building Out Chat Console
   1. Scaffold App Components 00:04:19
   2. App Header / UserPanel Dropdown 00:06:06
   3. Add Signout Functionality, Clear User Action 00:04:04
   4. Passing Redux State via Props 00:07:04
   5. Add Avatar to User Dropdown 00:01:19
7. Chapter 7 : Adding / Displaying Public Channels
   1. Add Channels Component 00:02:59
   2. Create Modal for Adding Channels 00:05:34
   3. Create Channels Collection, Add First Channel to Database 00:06:45
   4. Display Channels with child_added Listener 00:03:22
   5. Put Channel on Global State, Add channel_reducer 00:05:22
   6. Set First Channel on Page Load, Show Active Channel 00:04:19
   7. Remove Listeners with componentWillUnmount 00:00:51
8. Chapter 8 : Adding / Displaying Messages on Public Channels
   1. Scaffold ColorPanel / Message Components 00:08:12
   2. Create Messages Collection, Add First Message to Database 00:11:20
   3. Controlled Input to Clear Message, Disable Button on Loading State 00:01:12
   4. Display Messages, Create Message Component 00:07:24
9. Chapter 9 : Adding / Uploading Messages with Media Files
   1. Create File Modal to Upload File 00:05:19
   2. Put Media File in State, Add Mimetype Validation 00:05:50
   3. Upload Image File, Post Image Message 00:09:15
   4. ProgressBar Component to Represent Image Upload 00:03:47
   5. Options for Displaying ProgressBar 00:03:51
10. Chapter 10 : Sending Direct Messages to Users
    1. Add Channel Title / Users Count to Messages Header 00:05:11
    2. Add Ability to Search Messages 00:07:19
    3. Create DirectMessages Component 00:03:02
    4. Add Users to DirectMessages Component, Show If Online/Offline 00:08:35
    5. Put DirectMessage Channel Data in Global State, Set as Private Channels 00:05:35
    6. Functionality to Add Messages / Images to Private Channels 00:07:09
    7. Display Active DirectMessage Channel 00:01:34
11. Chapter 11 : Notifications for New Messages on Public Channels
    1. Add Notifications to Public Channel 00:09:36
12. Chapter 12 : Starred Component to Favorite / Unfavorite Channels
    1. Add Starred Component to Hold Starred (Favorited) Channels 00:03:45
    2. Update 'Starred' Property for User Data Upon Starring Channel 00:09:12
    3. Display Starred Channels in Starred Component 00:04:08
13. Chapter 13 : MetaPanel Component to Display Channel Info
    1. Scaffold MetaPanel Component 00:05:40
    2. Display Channel Info in MetaPanel 00:03:31
    3. Display Top Posters for each Channel in MetaPanel 00:10:36
14. Chapter 14 : Color Picker to Change App Colors
    1. Add Color Picker Modal to ColorPanel 00:04:29
    2. Attach Chosen Colors to User Data 00:07:58
    3. Display Saved User Colors as Icons, Change App Colors on Click 00:11:24
15. Chapter 15 : Change and Edit User Avatar Images
    1. Create Change Avatar Modal 00:04:11
    2. Crop Uploaded Image with AvatarEditor 00:06:21
    3. Upload Cropped Image to Firebase, Put on User Profile 00:06:50
16. Chapter 16 : Display Animation when Users Typing
    1. Add Typing Collection to Track When Other Users Typing 00:03:56
    2. Add Typing Component / Animation, Display in Messages 00:04:01
    3. Add Typing Listeners to See When Other Users Typing 00:07:06
17. Chapter 17 : Adding Emoji Picker, Loading Skeleton, Automatic Scroll to Bottom, Key Shortcuts
    1. Emoji Picker to Add Emojis to Messages 00:06:52
    2. Automatic Scroll to Bottom upon New Message 00:02:59
    3. Show Message Skeleton when Messages Loading 00:06:34
    4. Create Key Combo Shortcuts to Send Messages 00:01:26
18. Chapter 18 : Removing Listeners, Securing our App with Firebase Rules
    1. Remove Listeners upon Component Unmount 00:06:39
    2. Write Firebase Storage Rules for Media Files 00:06:00
    3. Write Database Rules for App Data 00:06:51
19. Chapter 19 : Deploying our App with Firebase Tools
    1. Deploy our App with Firebase Tools 00:03:04