English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6 Hours | 2.96 GB
Create a complete, full-stack chat application from front to back with React, Redux, Firebase 5, and Semantic UI React
Interested in building impressive full-stack apps with React, Redux and Firebase? This is the course for you!
Here’s what we will cover:
- Creating a complete Slack chat application with React, Redux, and Firebase 5 from scratch
- Sending and receiving messages instantly with the real-time Firebase Database
- Uploading and displaying image messages using Firebase Storage
- Notifications to display new messages in other channels
- Sending Direct Messages to other users in our chat
- Tracking / showing when users are online / offline
- Searching messages within created channels
- Custom animations to see when other users are typing in the same channel
- Creating, cropping and uploading user avatars
- The ability to favorite / unfavorite public channels
- Add emojis to our messages with an Emoji Picker component
- User authentication with Firebase
- Form validation for our Login and Register forms
- State management with Redux, with simple, straightforward patterns
- Creating stunning user interfaces with Semantic UI React
- Essential features of React Router 4 (Switch component, withRouter HOC, history object)
- Tons of work with ES6 / 7
- Helpful browser tools such as React / Redux Dev Tools
- Securing our application with Firebase Rules
- Deploying our chat app to the web using Firebase Tools
- Keyboard shortcuts to rapidly send messages
- And more!
What will be building in this course?
Throughout this course, we’ll be building a live chat app for developers called DevChat, where users will be able to create channels, to 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.
Table of Contents
Required / Optional Tools
1 Required Tools for the Project
2 Install React / Redux Dev Tools for Google Chrome
Project Setup
3 Git Clone and Install Dependencies
4 Organize Project, Create Routes
5 Setup Firebase
User Authentication with Firebase
6 Create Register Form
7 Register User with Email and Password
Form Validation and Authentication Error Handling
8 Form Validation for Register Form
9 Clear Errors upon Registration, Show Loading State
10 Add Name and Avatar to Users, Add New Users to Database
11 Create Login Form and Functionality
Integrate Redux for Global State
12 onAuthStateChanged to Listen for Login/Register
13 Set up Redux to Make User Data Available on Global State
14 Add Spinner Component for Loading State
Building Out Chat Console
15 Scaffold App Components
16 App Header / UserPanel Dropdown
17 Add Signout Functionality, Clear User Action
18 Passing Redux State via Props
19 Add Avatar to User Dropdown
Adding / Displaying Public Channels
20 Add Channels Component
21 Create Modal for Adding Channels
22 Create Channels Collection, Add First Channel to Database
23 Display Channels with child_added Listener
24 Put Channel on Global State, Add channel_reducer
25 Set First Channel on Page Load, Show Active Channel
26 Remove Listeners with componentWillUnmount
Adding / Displaying Messages on Public Channels
27 Scaffold ColorPanel / Message Components
28 Create Messages Collection, Add First Message to Database
29 Controlled Input to Clear Message, Disable Button on Loading State
30 Display Messages, Create Message Component
Adding / Uploading Messages with Media Files
31 Create File Modal to Upload File
32 Put Media File in State, Add Mimetype Validation
33 Upload Image File, Post Image Message
34 ProgressBar Component to Represent Image Upload
35 Options for Displaying ProgressBar
Sending Direct Messages to Users
36 Add Channel Title / Users Count to Messages Header
37 Add Ability to Search Messages
38 Create DirectMessages Component
39 Add Users to DirectMessages Component, Show If Online/Offline
40 Put DirectMessage Channel Data in Global State, Set as Private Channels
41 Functionality to Add Messages / Images to Private Channels
42 Display Active DirectMessage Channel
Notifications for New Messages on Public Channels
43 Add Notifications to Public Channel
Starred Component to Favorite / Unfavorite Channels
44 Add Starred Component to Hold Starred (Favorited) Channels
45 Update ‘Starred’ Property for User Data Upon Starring Channel
46 Display Starred Channels in Starred Component
MetaPanel Component to Display Channel Info
47 Scaffold MetaPanel Component
48 Display Channel Info in MetaPanel
49 Display Top Posters for each Channel in MetaPanel
Color Picker to Change App Colors
50 Add Color Picker Modal to ColorPanel
51 Attach Chosen Colors to User Data
52 Display Saved User Colors as Icons, Change App Colors on Click
Change and Edit User Avatar Images
53 Create Change Avatar Modal
54 Crop Uploaded Image with AvatarEditor
55 Upload Cropped Image to Firebase, Put on User Profile
Display Animation when Users Typing
56 Add Typing Collection to Track When Other Users Typing
57 Add Typing Component / Animation, Display in Messages
58 Add Typing Listeners to See When Other Users Typing
Adding Emoji Picker, Loading Skeleton, Automatic Scroll to Bottom, Key Shortcuts
59 Emoji Picker to Add Emojis to Messages
60 Automatic Scroll to Bottom upon New Message
61 Show Message Skeleton when Messages Loading
62 Create Key Combo Shortcuts to Send Messages
Removing Listeners, Securing our App with Firebase Rules
63 Remove Listeners upon Component Unmount
64 Write Firebase Storage Rules for Media Files
65 Write Database Rules for App Data
Deploying our App with Firebase Tools
66 Deploy our App with Firebase Tools
Resolve the captcha to access the links!