React: Cloud-Powered Apps with Firebase

2h 30mAdvanced2020-09-17

Authors

Victor Mejia

Senior UI Engineer and Instructor

Course details

Modern web applications require more than just your React code. You need hosting, APIs, authentication, and automatic deployments. You need to build apps fast, without managing infrastructure. Firebase allows you to do exactly that. Backed by Google Cloud Platform and used by some of the largest apps today, Firebase is a suite of tools to help build and scale your web application. In this course, instructor Victor Mejia goes over the different services provided by Firebase, as well as how to work with them to build a serverless application.

To begin, Victor takes a look at the Firebase console and how it can help you manage different Firebase projects. He then demonstrates how to use Firebase Authentication to add authentication to your app; store data using Firebase Cloud Firestore; and deploy your app using Firebase Hosting. Plus, see how to create your own serverless functions using Firebase Cloud Functions.

Skills covered

FirebaseReact.jsMetaWeb Development ToolsDatabase DevelopmentFront-End Web DevelopmentDatabase ManagementSoftware Development ToolsGoogleWeb DevelopmentSoftware DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Structuring your apps for the cloud
02 - What you should know
03 - Using the exercise files

1. Setting Up Your Development Environment

04 - Installing tools and CLIs
05 - Generating a new React application
06 - Overview of the Firebase console
07 - Configuring your web application

2. Firebase Authentication

08 - Firebase Authentication setup
09 - Creating users
10 - Displaying current user
11 - Redirect user upon signup
12 - User logout
13 - User login
14 - Authenticated user redirect
15 - Challenge - Authentication redirect
16 - Solution - Authentication redirect

3. Storing and Syncing Data with Firebase Cloud Firestore

17 - Cloud Firestore intro
18 - Cloud Firestore setup
19 - Deploying security rules for Cloud Firestore
20 - Creating documents
21 - Displaying user document
22 - Updating user documents, part 1
23 - Updating user documents, part 2

4. Storing Files with Firebase Cloud Storage

24 - Cloud Storage setup
25 - Cloud Storage security rules
26 - Profile image upload form
27 - File upload trigger
28 - Cloud Storage file upload
29 - Challenge - Monitor upload progress
30 - Solution - Upload progress

5. Control Access with Custom Claims and Security Rules

31 - Firebase ID tokens
32 - Setting Firebase custom claims
33 - Admin interface - Users page
34 - Admin interface - Read user collection
35 - Admin interface - Render user collection
36 - Challenge - View user profile with admin
37 - Solution - View user profile with admin

6. Going Serverless with Firebase Cloud Functions

38 - Cloud Functions setup
39 - Cloud Functions - Email setup
40 - Cloud Functions - Authentication trigger

7. Hosting with Firebase

41 - Firebase Hosting setup
42 - Deploying your React app

Conclusion

43 - Next steps