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

5h 55m 18s
English
Paid

Course description

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.

Read more about the course

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

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

Sources: udemy
Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) Stack If you love learning new skills and building real world apps wi
34 hours 4 minutes 17 seconds
The Official React Query Course - query.gg

The Official React Query Course - query.gg

Sources: ui.dev (ex. Tyler McGinnis)
React Query has been one of the fastest growing and most popular third party libraries in the React ecosystem, and this course will teach you everything you...
4 hours 17 minutes 17 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
Next.js - The Full Course

Next.js - The Full Course

Sources: fireship.io
Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
1 hour 14 minutes 14 seconds