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

Responsive LLM Applications with Server-Sent Events

Responsive LLM Applications with Server-Sent Events

Sources: fullstack.io
Large Language Models (LLMs) are transforming entire industries, but their integration into user interfaces with real-time data streaming...
1 hour 18 minutes 18 seconds
Full Stack Spring Boot & React

Full Stack Spring Boot & React

Sources: Amigoscode (Nelson Djalo)
Netflix recently switched their entire backend to Spring Boot 2. It was a no brainer really. Spring Boot 2 is the best framework to build applications. Weather you build a small...
10 hours 1 minute 23 seconds
Build an MVP with AngularJS + Firebase by cloning TaskRabbit

Build an MVP with AngularJS + Firebase by cloning TaskRabbit

Sources: Code4Startup (coderealprojects)
TaskRabbit is an online and mobile marketplace that allows users to outsource small jobs and tasks to others in their neighbourhood. Users name the task they need done, name the...
3 hours 31 minutes 43 seconds
The Software Architect Mindset (COMPLETE)

The Software Architect Mindset (COMPLETE)

Sources: ArjanCodes
The course "The Software Architect Mindset" teaches the fundamentals of software architecture and provides practical advice on creating software products...
12 hours 6 minutes 39 seconds