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
Table of contents
- Chapter 1 : Required / Optional Tools
-
Chapter 2 : Project Setup
- Git Clone and Install Dependencies 00:01:45
- Organize Project, Create Routes 00:04:21
- Setup Firebase 00:03:40
-
Chapter 3 : User Authentication with Firebase
- Create Register Form 00:05:36
- Register User with Email and Password 00:06:07
- Chapter 4 : Form Validation and Authentication Error Handling
- Chapter 5 : Integrate Redux for Global State
-
Chapter 6 : Building Out Chat Console
- Scaffold App Components 00:04:19
- App Header / UserPanel Dropdown 00:06:06
- Add Signout Functionality, Clear User Action 00:04:04
- Passing Redux State via Props 00:07:04
- Add Avatar to User Dropdown 00:01:19
-
Chapter 7 : Adding / Displaying Public Channels
- Add Channels Component 00:02:59
- Create Modal for Adding Channels 00:05:34
- Create Channels Collection, Add First Channel to Database 00:06:45
- Display Channels with child_added Listener 00:03:22
- Put Channel on Global State, Add channel_reducer 00:05:22
- Set First Channel on Page Load, Show Active Channel 00:04:19
- Remove Listeners with componentWillUnmount 00:00:51
- Chapter 8 : Adding / Displaying Messages on Public Channels
- Chapter 9 : Adding / Uploading Messages with Media Files
-
Chapter 10 : Sending Direct Messages to Users
- Add Channel Title / Users Count to Messages Header 00:05:11
- Add Ability to Search Messages 00:07:19
- Create DirectMessages Component 00:03:02
- Add Users to DirectMessages Component, Show If Online/Offline 00:08:35
- Put DirectMessage Channel Data in Global State, Set as Private Channels 00:05:35
- Functionality to Add Messages / Images to Private Channels 00:07:09
- Display Active DirectMessage Channel 00:01:34
-
Chapter 11 : Notifications for New Messages on Public Channels
- Add Notifications to Public Channel 00:09:36
- Chapter 12 : Starred Component to Favorite / Unfavorite Channels
-
Chapter 13 : MetaPanel Component to Display Channel Info
- Scaffold MetaPanel Component 00:05:40
- Display Channel Info in MetaPanel 00:03:31
- Display Top Posters for each Channel in MetaPanel 00:10:36
- Chapter 14 : Color Picker to Change App Colors
-
Chapter 15 : Change and Edit User Avatar Images
- Create Change Avatar Modal 00:04:11
- Crop Uploaded Image with AvatarEditor 00:06:21
- Upload Cropped Image to Firebase, Put on User Profile 00:06:50
- Chapter 16 : Display Animation when Users Typing
- Chapter 17 : Adding Emoji Picker, Loading Skeleton, Automatic Scroll to Bottom, Key Shortcuts
-
Chapter 18 : Removing Listeners, Securing our App with Firebase Rules
- Remove Listeners upon Component Unmount 00:06:39
- Write Firebase Storage Rules for Media Files 00:06:00
- Write Database Rules for App Data 00:06:51
-
Chapter 19 : Deploying our App with Firebase Tools
- Deploy our App with Firebase Tools 00:03:04
Product information
- Title: Build a Slack Chat App with React, Redux, and Firebase
- Author(s):
- Release date: October 2019
- Publisher(s): Packt Publishing
- ISBN: 9781839219030
You might also like
book
40 Algorithms Every Programmer Should Know
Learn algorithms for solving classic computer science problems with this concise guide covering everything from fundamental …
video
Universal React with Next.js - The Ultimate Guide
Learn how to make awesome server-rendered React apps with Next.js About This Video Build amazing server-rendered …
video
React Hooks
Learn the future of creating React apps today! About This Video Use and be effective with …
video
The Complete Node.js Developer Course (3rd Edition)
Learn Node.js by building real-world applications with Node, Express, MongoDB, Mocha, and more! About This Video …