The essential guide to Firebase with React.

31h 20m 9s
English
Paid

Course description

Create modern app using modern technologies. Do you want to create web applications with Firebase and React ?. This is the course for you.
Read more about the course

We will start from the very beginning, from "I don't even know how to create a firebase account ….and why should I?“ to actually understand how Firebase works and make a practice project.

You will learn all the logic and practice behind Firebase in different modules and as we advance through the course we will be increasing the difficulty.

To sum everything up, you will learn in this course:

  • How to move around the firebase dashboard

  • Understand the different services we we with FBase

  • Create and application and link it to your React app

  • Work with Firestore, the firebase DB

  • How to make authentication happen on your web app.

  • Understand firebase storage and use it.

  • How to use cloud functions

  • Apply rules to your queries.

  • How to host your app on firebase so the world can see it.

  • Create a practice application to apply what we have learned

Don’t know how to use React.? Don’t panic, at the end of the course you get a full React mini course, so you get two courses for the price of one.

What about the instructor experience ?

Well I've been around for 13 years now, built lots of applications for small projects and big companies like Citi, Fox, Disney and a lot more.

Today I work as a developer for a major company developing applications on React , Angular and Vue, but I like to teach in my spare time.

How about the target audience?

  • This course is for almost everyone, a little bit of Javascript is required.We will use ES6 but you can learn as we go.

  • If you want to take your coding to the next level, this is the course for you.

Requirements:

  • No, just css and html.

Who this course is for:
  • Mostly beginners, but everyone is welcomed.

What you'll learn:

  • Move around Firebase and make it work with a React app
  • Storage, Databases, hosting, cloud f all the main tools from firebase.

Watch Online

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

Watch Online The essential guide to Firebase with React.

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Redux Ecommerce - Master MERN Stack Web Development

React Redux Ecommerce - Master MERN Stack Web Development

Sources: udemy
Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you wa...
43 hours 9 minutes 35 seconds
React: Flux Architecture (ES6)

React: Flux Architecture (ES6)

Sources: egghead
As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared b...
49 minutes 50 seconds
React Testing Library and Jest: The Complete Guide

React Testing Library and Jest: The Complete Guide

Sources: udemy, Stephen Grider
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to test React apps with React Testing Librar
7 hours 40 minutes 24 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

Sources: udemy, Academind Pro
I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame
36 hours 13 minutes 15 seconds
React, Angular, Node In-Depth Guide: Beginner to Pro

React, Angular, Node In-Depth Guide: Beginner to Pro

Sources: udemy
If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Get all you need to start web dev...
80 hours 1 minute 57 seconds