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

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

by Reed Barger
Released October 2019
Publisher(s): Packt Publishing
ISBN: 9781839219030

Explore a preview version of Build a Slack Chat App with React, Redux, and Firebase right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

Video Description

Create a complete, full-stack chat application from front to back with React, Redux, Firebase 5, and Semantic UI React

About This Video

  • Create a complete Slack chat application with React, Redux, and Firebase 5 from scratch
  • Send and receive messages instantly with the real-time Firebase Database
  • Upload and display image messages using Firebase Storage

In Detail

Interested in building impressive full-stack apps with React, Redux, and Firebase? This is the course for you!

Throughout this course, you'll be building a live chat app (called DevChat) for developers, where users will be able to create channels; send messages to other users on those channels; send media files; see when other users are typing; add emojis to their messages; favorite and unfavorite channels they like or dislike; and get notifications about new messages on other channels.

Publisher Resources

Download Example Code

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

Product Information

  • Title: Build a Slack Chat App with React, Redux, and Firebase
  • Author(s): Reed Barger
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839219030