The essential guide to Firebase with React.
More
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.
- 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 The essential guide to Firebase with React.
# | Title | Duration |
---|---|---|
1 | Introduction | 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 |