The essential guide to Firebase with React.

31h 20m 9s
English
Paid

Are you ready to create modern web applications using Firebase and React? If you're eager to dive into these technologies, this is the perfect course for you. Discover how to develop sophisticated apps with the power of Firebase's backend capabilities and React's dynamic interface.

Course Overview

Embark on this journey from the very beginning. If you're wondering, "I don't even know how to create a Firebase account… and why should I?" we will take you from zero to a comprehensive understanding of Firebase, culminating in the development of a practical project.

This course will walk you through both the logic and practice of using Firebase. As we progress, the complexity will increase, ensuring that you grow alongside the curriculum.

What You Will Learn:

  • Navigate the Firebase dashboard efficiently
  • Understand the different services offered by Firebase
  • Integrate applications with your React app
  • Utilize Firestore, Firebase's database
  • Implement user authentication in your web app
  • Use Firebase storage effectively
  • Leverage cloud functions to enhance your app's capabilities
  • Set rules for database queries
  • Host your app on Firebase, making it accessible worldwide
  • Develop a practice application to consolidate your learning

React Mini-Course Included

Not familiar with React? Don't worry! At the end of the course, we include a comprehensive React mini-course. That's two courses for the price of one, ensuring you have all the skills needed to succeed.

About the Instructor

With 13 years of experience building applications for major companies like Citi, Fox, and Disney, I bring a wealth of knowledge to this course. Currently, I'm a developer at a leading company, with expertise in React, Angular, and Vue. Teaching is a passion I pursue during my spare time.

Who Should Enroll?

  • This course caters to a wide audience, from beginners to those with some coding experience. Some JavaScript knowledge is beneficial, but we will cover ES6 as we progress.
  • If you're eager to enhance your coding skills, this course is for you.

Course Requirements

  • Basic knowledge of CSS and HTML is all you need to get started.

Target Audience

Who this course is for:

  • Primarily beginners, but everyone is welcome.

What You'll Achieve:

  • Learn to navigate Firebase and integrate it with a React app.
  • Grasp the main tools of Firebase, including storage, databases, hosting, and cloud functions.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 175 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction
All Course Lessons (175)
#Lesson TitleDurationAccess
1
Introduction Demo
01:00
2
What it firebase ?
03:56
3
Creating a firebase app
05:36
4
Linking firebase to React
09:23
5
Creating a DB
08:27
6
Accessing firestore from our app
06:27
7
Looping data
14:14
8
References
06:15
9
Subcollections
07:15
10
Get, Where, Doc, Order by
08:20
11
Adding documents
09:37
12
Adding documents 2
13:55
13
Updating
12:23
14
Limit, limit to last, start and end at
10:05
15
Checking the exits property
03:29
16
OnSnapshot
15:00
17
Enabling Auth
03:02
18
Creating a sign in and a register form
11:28
19
Creating a sign in and a register form 2
12:29
20
User state change
10:14
21
The user object
17:35
22
Verify user email
08:50
23
Using providers
10:22
24
Storing user data
07:32
25
Starting with storage
11:55
26
Uploading an image
08:09
27
The upload task
13:07
28
Pause, cancel and resume
08:50
29
The download URL
07:15
30
Using the download URL
09:52
31
Custom metadata
04:26
32
Listing all
10:18
33
Deleting data
04:27
34
Preparing the project
09:34
35
Deploying to production
06:39
36
Firestore rules
06:09
37
Firestore rules 2
15:00
38
Firestore rules 3
15:24
39
Firestore rules 4
02:30
40
Storage rules
15:34
41
Storage rules 2
08:19
42
Intro
03:09
43
Init the functions
06:00
44
Deploying the functions
05:49
45
HTTP and trigger functions
16:44
46
Callables
16:26
47
Run it locally
18:57
48
intro and installation
10:17
49
Creating the routes
12:12
50
Adding Redux
15:01
51
Creating the login form
18:56
52
Creating a firebase project
07:29
53
Registering users
09:41
54
Registering users 2
14:22
55
Login users
16:06
56
Auto-signin
12:24
57
Logout
10:16
58
Route guards
23:07
59
Login guard
08:24
60
Dashboard layout
07:47
61
Creating the profile
21:00
62
Creating the login modal
10:36
63
Finishing the login modal
16:22
64
Finish update profile
15:26
65
Creating the add reviews component
16:24
66
Adding Formik and Yup
18:08
67
Adding Formik and Yup 2
06:16
68
Adding a wysiwyg
10:54
69
Uploading review images
18:24
70
Uploading review images 2
16:04
71
Finish uploading review images
11:32
72
Clearing add reviews
06:01
73
Main reviews dashboard
16:56
74
Main reviews dashboard 2
06:22
75
Main reviews dashboard 3
12:03
76
Creating the edit reviews
16:29
77
Finish the edit reviews
08:07
78
Creating home posts
15:32
79
Finish home posts
14:54
80
Creating the review post view
17:57
81
Finish the review post view
11:28
82
Creating the contact section
16:58
83
Sending emails with cloud functions
19:12
84
Creating the dashboard messages
14:25
85
Creating the dashboard messages 2
15:56
86
Adding rules to firestore
10:10
87
Adding rules to firestore 2
06:36
88
Adding rules to storage
07:14
89
Deploy
04:55
90
Installing node js and using the cli
11:58
91
The bundle
05:58
92
Getting started with the Code
09:07
93
JSX behind the scenes
09:10
94
Importing components
08:26
95
Types of components
05:31
96
Adding styles
10:20
97
Events
11:40
98
Using STATE
15:05
99
Using props
10:46
100
Using props 2
14:04
101
Props to class
06:02
102
React children
03:43
103
More with styles
06:59
104
Style plugins
06:35
105
Filter the news
15:04
106
ROUTES: installing routes
05:38
107
ROUTES: Creating components
07:21
108
ROUTES: Using routes
06:28
109
ROUTES: Linking
10:53
110
ROUTES: Params
06:50
111
ROUTES: Other features
07:19
112
ROUTES: Switch
03:51
113
ROUTES: Redirections
06:55
114
ROUTES: 404 and withrouter
09:57
115
PROJECT 1: Getting ready
11:15
116
PROJECT 1: Adding a header and a banner
15:57
117
PROJECT 1: Bringing the HOME list
10:42
118
PROJECT 1: Creating the artist detail
18:42
119
Component life-cycle
07:22
120
Component life-cycle 2
19:27
121
Conditional rendering
10:24
122
Pure components
08:30
123
Adjacent elements
05:44
124
HOC
08:48
125
HOC 2
13:37
126
TRANSITIONS: Using them
17:29
127
TRANSITIONS: Using more of it
08:56
128
TRANSITIONS: CSS transitions
11:51
129
TRANSITIONS: Transitions group
15:44
130
Proptypes
10:23
131
Proptypes 2
08:28
132
Controlled components
07:59
133
PROJECT 2: NBA - Installation
08:49
134
PROJECT 2: Setting routes, footer and header
09:30
135
PROJECT 2: Adding a carrousel/slider
20:05
136
PROJECT 2: Subscriptions
19:36
137
PROJECT 2: Subscriptions 2
10:08
138
PROJECT 2: Home blocks
13:26
139
PROJECT 2: Creating a poll
14:59
140
PROJECT 2: finishing the poll
06:13
141
PROJECT 2: The teams section
14:43
142
PROJECT 2: Finishing the teams section
08:55
143
PROJECT 2: The team view
13:27
144
REDUX: Redux introduction
08:37
145
REDUX: Creating a store
07:54
146
REDUX: The redux flow
05:56
147
REDUX: Combining reducers
06:35
148
REDUX: Creating a valid reducer
07:32
149
REDUX: Creating actions
04:44
150
REDUX: MapStateToProps and connect
12:44
151
REDUX: Dispatching
05:48
152
REDUX: Types
07:58
153
REDUX: Using middleware
07:45
154
REDUX: Tiny practice project with redux
06:35
155
REDUX: Connecting routes and redux
16:43
156
REDUX: Home, bringing the artists
16:48
157
REDUX: Filtering the home list
06:16
158
REDUX: Creating the artists section
16:45
159
REDUX: Clearing the artistdata
04:12
160
PROJECT 3: Installation
06:59
161
PROJECT 3: Adding redux
14:10
162
PROJECT 3: Getting home data
16:46
163
PROJECT 3: Latest news component
07:06
164
PROJECT 3: Other news section
08:57
165
PROJECT 3: Articles page
16:06
166
PROJECT 3: Adding the likes component
12:33
167
PROJECT 3: Finish the handle likes
08:59
168
PROJECT 3: Clearing data
04:46
169
HOOKS: Introduction to hooks
01:50
170
HOOKS: Usestate
13:54
171
HOOKS: Usestate 2
13:51
172
HOOKS: UseEffect
16:43
173
HOOKS: UseReducer
12:28
174
HOOKS: The context
10:00
175
HOOKS: The context 2
15:30
Unlock unlimited learning

Get instant access to all 174 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription