Create a complete, full-stack chat application from front to back with React, Redux, Firebase 5, and Semantic UI React
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
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)
Description
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.
Who this course is for:
- 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
Featured review
I enjoyed the course a lot. I liked the functionality of the app and the way the code is written. I would say, the only thing this course lacks is making the app fully responsive, even though it can be done by yourself easily using media queries. Sometimes instructor goes way too fast through the code and it makes it quite difficult to follow it, you will need to rewind or slow the video down at times.
Course content
19 sections • 66 lectures • 5h 53m total length
- Required / Optional Tools
- Project Setup
- User Authentication with Firebase
- Form Validation and Authentication Error Handling
- Integrate Redux for Global State
- Building Out Chat Console
- Adding / Displaying Public Channels
- Adding / Displaying Messages on Public Channels
- Adding / Uploading Messages with Media Files
- Sending Direct Messages to Users
- Notifications for New Messages on Public Channels
- Starred Component to Favorite / Unfavorite Channels
- MetaPanel Component to Display Channel Info
- Color Picker to Change App Colors
- Change and Edit User Avatar Images
- Display Animation when Users Typing
- Adding Emoji Picker, Loading Skeleton, Automatic Scroll to Bottom, Key Shortcuts
- Removing Listeners, Securing our App with Firebase Rules
- Deploying our App with Firebase Tools
Created by: Reed Barger (Professional Web and Mobile Developer)
Last updated 12/2019
English
English
[Auto]4.1 GB (Direct Download Available)
