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.
Build a Slack Chat App with React, Redux, and Firebase
5h 55m 18s
English
Paid
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)
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
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
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 67 lessons
0:00
/ #1: Required Tools for the Project
All Course Lessons (67)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Required Tools for the Project Demo | 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 |
Unlock unlimited learning
Get instant access to all 66 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoAdvanced React For Enterprise: React for senior engineers
By: UdemyWelcome to the React for Senior engineers course ! Knowledge of React is 100% required for this course. I've been working with React.js for over 5 years now6h 4m -
Updated 2y agoMaster Full-Stack Web Development | Node, SQL, React, & More
By: UdemyBuild a fullstack project with Node.js, PostgreSQL, SQL, React, Redux and more! Covers APIs, authentication, and beyond!18h 36m5/5 -
Updated 3y agoThe Creative React and Redux Course
By: Dev EdThis course will teach you everything you need to know about React. Get started now with 0 experience in React, we will take it step by step from the beginning18h 13m
Frequently asked questions
What prerequisites should I have before taking this course?
Before enrolling in this course, students should have a basic understanding of JavaScript and familiarity with React and Redux. Knowledge of Firebase is beneficial but not required, as the course covers setting up Firebase. Familiarity with using Git and installing development dependencies will also be helpful, as these are among the initial lessons.
What will I build during this course?
During the course, students will build a live chat application called DevChat. The app includes features such as creating channels, sending messages and media files, viewing user typing status, adding emojis to messages, starring channels, and receiving notifications for new messages. The project involves using React, Redux, and Firebase to implement these functionalities.
Who is the target audience for this course?
This course is designed for developers who want to build real-time chat applications using modern web technologies. It is suitable for those looking to deepen their knowledge of React, Redux, and Firebase while building a practical project. Both intermediate developers and those familiar with basic React concepts will benefit from the detailed lessons.
What specific tools and platforms are covered in this course?
The course covers several tools and platforms, including React for building the user interface, Redux for state management, and Firebase for backend services such as authentication and data storage. The course also involves using Google Chrome's React and Redux DevTools for debugging and development purposes.
What topics are not covered in this course?
The course does not cover advanced backend server-side programming or database management outside of Firebase. It focuses on client-side development with React and Redux, and uses Firebase for database and authentication needs without diving into custom backend implementations.
How much time should I expect to commit to this course?
The course is structured into 67 lessons. While the total runtime of the course is not specified, students should expect to dedicate additional time to exercises, implementing the project, and experimenting with the tools and concepts taught within the lessons. Depending on prior experience, the time commitment will vary.
How will the skills learned in this course be applicable to other areas or careers?
Skills acquired from this course, such as using React for creating dynamic user interfaces, managing application state with Redux, and integrating Firebase for backend functionalities, are highly transferable. These skills are applicable in web development roles across various industries, particularly in building real-time web applications and services.