Required / Optional Tools
  • Required Tools for the Project
  • Install React / Redux Dev Tools for Google Chrome
Project Setup
  • Git Clone and Install Dependencies
  • Organize Project, Create Routes
  • Setup Firebase
User Authentication with Firebase
  • Create Register Form
  • Register User with Email and Password
Form Validation and Authentication Error Handling
  • Form Validation for Register Form
  • Clear Errors upon Registration, Show Loading State
  • Add Name and Avatar to Users, Add New Users to Database
  • Create Login Form and Functionality
Integrate Redux for Global State
  • onAuthStateChanged to Listen for Login/Register
  • Set up Redux to Make User Data Available on Global State
  • Add Spinner Component for Loading State
Building Out Chat Console
  • Scaffold App Components
  • App Header / UserPanel Dropdown
  • Add Signout Functionality, Clear User Action
  • Passing Redux State via Props
  • Add Avatar to User Dropdown
Adding / Displaying Public Channels
  • Add Channels Component
  • Create Modal for Adding Channels
  • Create Channels Collection, Add First Channel to Database
  • Display Channels with child_added Listener
  • Put Channel on Global State, Add channel_reducer
  • Set First Channel on Page Load, Show Active Channel
  • Remove Listeners with componentWillUnmount
Adding / Displaying Messages on Public Channels
  • Scaffold ColorPanel / Message Components
  • Create Messages Collection, Add First Message to Database
  • Controlled Input to Clear Message, Disable Button on Loading State
  • Display Messages, Create Message Component
Adding / Uploading Messages with Media Files
  • Create File Modal to Upload File
  • Put Media File in State, Add Mimetype Validation
  • Upload Image File, Post Image Message
  • ProgressBar Component to Represent Image Upload
  • Options for Displaying ProgressBar
Sending Direct Messages to Users
  • Add Channel Title / Users Count to Messages Header
  • Add Ability to Search Messages
  • Create DirectMessages Component
  • Add Users to DirectMessages Component, Show If Online/Offline
  • Put DirectMessage Channel Data in Global State, Set as Private Channels
  • Functionality to Add Messages / Images to Private Channels
  • Display Active DirectMessage Channel
Notifications for New Messages on Public Channels
  • Add Notifications to Public Channel
Starred Component to Favorite / Unfavorite Channels
  • Add Starred Component to Hold Starred (Favorited) Channels
  • Update 'Starred' Property for User Data Upon Starring Channel
  • Display Starred Channels in Starred Component
MetaPanel Component to Display Channel Info
  • Scaffold MetaPanel Component
  • Display Channel Info in MetaPanel
  • Display Top Posters for each Channel in MetaPanel
Color Picker to Change App Colors
  • Add Color Picker Modal to ColorPanel
  • Attach Chosen Colors to User Data
  • Display Saved User Colors as Icons, Change App Colors on Click
Change and Edit User Avatar Images
  • Create Change Avatar Modal
  • Crop Uploaded Image with AvatarEditor
  • Upload Cropped Image to Firebase, Put on User Profile
Display Animation when Users Typing
  • Add Typing Collection to Track When Other Users Typing
  • Add Typing Component / Animation, Display in Messages
  • Add Typing Listeners to See When Other Users Typing
Adding Emoji Picker, Loading Skeleton, Automatic Scroll to Bottom, Key Shortcuts
  • Emoji Picker to Add Emojis to Messages
  • Automatic Scroll to Bottom upon New Message
  • Show Message Skeleton when Messages Loading
  • Create Key Combo Shortcuts to Send Messages
Removing Listeners, Securing our App with Firebase Rules
  • Remove Listeners upon Component Unmount
  • Write Firebase Storage Rules for Media Files
  • Write Database Rules for App Data
Deploying our App with Firebase Tools
  • Deploy our App with Firebase Tools