CF

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

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 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

Course content

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

Related courses

Frequently asked questions

What is The essential guide to Firebase with React. about?
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…
Who teaches The essential guide to Firebase with React.?
The essential guide to Firebase with React. is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is The essential guide to Firebase with React.?
The essential guide to Firebase with React. contains 175 lessons with a total runtime of 31 hours 20 minutes. All lessons are available to watch online at your own pace.
Is The essential guide to Firebase with React. free to watch?
The essential guide to Firebase with React. is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch The essential guide to Firebase with React. online?
The essential guide to Firebase with React. is available to watch online on CourseFlix at https://courseflix.net/course/the-essential-guide-to-firebase-with-react. The page hosts every lesson with the integrated video player; no download is required.