Build a Slack Chat App with React, Redux, and Firebase
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.
More
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!
Requirements:
Some experience with React (i.e. having built a couple of projects with React Create App)
Prior knowledge of ES6 features will help (spread operators, destructuring, object shorthand syntax)
- Anyone who has at least two months of experience with the JavaScript library React
- React developers interested in making functional, real-world apps
- Developers looking for more experience with the JavaScript language in a practical setting
What you'll learn:
- Create full-stack apps with React, Redux and Firebase, among other tools in the React ecosystem
- Make complete React apps from scratch, from setting up their dev environment to deployment on the web
- Integrate Redux and Firebase with React apps using straightforward, practical patterns
- Learn every major part of Firebase 5--the real-time database, storage, rules, listeners and deployment with Firebase tools
Watch Online Build a Slack Chat App with React, Redux, and Firebase
| # | Title | Duration |
|---|---|---|
| 1 | Required Tools for the Project | 01:00 |
| 2 | Install React / Redux Dev Tools for Google Chrome | 02:28 |
| 3 | Git Clone and Install Dependencies | 01:45 |
| 4 | Organize Project, Create Routes | 04:20 |
| 5 | Setup Firebase | 03:40 |
| 6 | Create Register Form | 05:37 |
| 7 | Register User with Email and Password | 06:08 |
| 8 | Form Validation for Register Form | 07:09 |
| 9 | Clear Errors upon Registration, Show Loading State | 05:33 |
| 10 | Add Name and Avatar to Users, Add New Users to Database | 07:20 |
| 11 | Create Login Form and Functionality | 04:11 |
| 12 | onAuthStateChanged to Listen for Login/Register | 02:59 |
| 13 | Set up Redux to Make User Data Available on Global State | 08:50 |
| 14 | Add Spinner Component for Loading State | 03:29 |
| 15 | Scaffold App Components | 04:20 |
| 16 | App Header / UserPanel Dropdown | 06:06 |
| 17 | Add Signout Functionality, Clear User Action | 04:05 |
| 18 | Passing Redux State via Props | 07:05 |
| 19 | Add Avatar to User Dropdown | 01:20 |
| 20 | Add Channels Component | 03:00 |
| 21 | Create Modal for Adding Channels | 05:34 |
| 22 | Create Channels Collection, Add First Channel to Database | 06:46 |
| 23 | Display Channels with child_added Listener | 03:23 |
| 24 | Put Channel on Global State, Add channel_reducer | 05:22 |
| 25 | Set First Channel on Page Load, Show Active Channel | 04:20 |
| 26 | Remove Listeners with componentWillUnmount | 00:52 |
| 27 | Scaffold ColorPanel / Message Components | 08:13 |
| 28 | Create Messages Collection, Add First Message to Database | 11:21 |
| 29 | Controlled Input to Clear Message, Disable Button on Loading State | 01:12 |
| 30 | Display Messages, Create Message Component | 07:24 |
| 31 | Create File Modal to Upload File | 05:20 |
| 32 | Put Media File in State, Add Mimetype Validation | 05:51 |
| 33 | Upload Image File, Post Image Message | 09:16 |
| 34 | ProgressBar Component to Represent Image Upload | 03:47 |
| 35 | Options for Displaying ProgressBar | 03:51 |
| 36 | Add Channel Title / Users Count to Messages Header | 05:12 |
| 37 | Add Ability to Search Messages | 07:20 |
| 38 | Create DirectMessages Component | 03:02 |
| 39 | Add Users to DirectMessages Component, Show If Online/Offline | 08:35 |
| 40 | Put DirectMessage Channel Data in Global State, Set as Private Channels | 05:35 |
| 41 | Functionality to Add Messages / Images to Private Channels | 07:09 |
| 42 | Display Active DirectMessage Channel | 01:34 |
| 43 | Add Notifications to Public Channel | 09:36 |
| 44 | Add Starred Component to Hold Starred (Favorited) Channels | 03:46 |
| 45 | Update 'Starred' Property for User Data Upon Starring Channel | 09:12 |
| 46 | Display Starred Channels in Starred Component | 04:09 |
| 47 | Scaffold MetaPanel Component | 05:41 |
| 48 | Display Channel Info in MetaPanel | 03:31 |
| 49 | Display Top Posters for each Channel in MetaPanel | 10:37 |
| 50 | Add Color Picker Modal to ColorPanel | 04:30 |
| 51 | Attach Chosen Colors to User Data | 07:58 |
| 52 | Display Saved User Colors as Icons, Change App Colors on Click | 11:25 |
| 53 | Create Change Avatar Modal | 04:12 |
| 54 | Crop Uploaded Image with AvatarEditor | 06:22 |
| 55 | Upload Cropped Image to Firebase, Put on User Profile | 06:50 |
| 56 | Add Typing Collection to Track When Other Users Typing | 03:57 |
| 57 | Add Typing Component / Animation, Display in Messages | 04:01 |
| 58 | Add Typing Listeners to See When Other Users Typing | 07:07 |
| 59 | Emoji Picker to Add Emojis to Messages | 06:52 |
| 60 | Automatic Scroll to Bottom upon New Message | 03:00 |
| 61 | Show Message Skeleton when Messages Loading | 06:34 |
| 62 | Create Key Combo Shortcuts to Send Messages | 01:27 |
| 63 | Remove Listeners upon Component Unmount | 06:40 |
| 64 | Write Firebase Storage Rules for Media Files | 06:01 |
| 65 | Write Database Rules for App Data | 06:51 |
| 66 | Deploy our App with Firebase Tools | 03:05 |
| 67 | Bonus Lecture | 00:30 |
Similar courses to Build a Slack Chat App with React, Redux, and Firebase
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
Full-Stack React with GraphQL and Apollo Boost
Composing Layouts in React
MERN Invoice Web App with Docker,NGINX and ReduxToolkit
Intro to Shopify App Development with React, Node & GraphQL
Classic React
The Ultimate React Course 2023: React, Redux & More
