CF

Build a Slack Chat App with React, Redux, and Firebase

5h 55m 18s
English
Paid

Build a Slack Chat App with React, Redux, and Firebase is a 67-lesson 5 hours 55 minutes self-paced course by Udemy. 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…

Course facts

Lessons
67
Duration
5 hours 55 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

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

Who teaches Build a Slack Chat App with React, Redux, and Firebase? Udemy

Udemy thumbnail

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.

What lessons are included in Build a Slack Chat App with React, Redux, and Firebase?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 67 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Required Tools for the Project
All Course Lessons (67)
#Lesson TitleDurationAccess
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 subscription

What courses are similar to Build a Slack Chat App with React, Redux, and Firebase?

More courses by Udemy

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.