React: Cloud-Powered Apps with Firebase

Learn how to leverage the JavaScript you have mastered for front-end React development to build a serverless application using Firebase.

Introduction

• Structuring your apps for the cloud
• What you should know
• Using the exercise files

1. Setting Up Your Development Environment

• Installing tools and CLIs
• Generating a new React application
• Overview of the Firebase console
• Configuring your web application

2. Firebase Authentication

• Firebase Authentication setup
• Creating users
• Displaying current user
• Redirect user upon signup
• User logout
• User login
• Authenticated user redirect
• Challenge: Authentication redirect
• Solution: Authentication redirect

3. Storing and Syncing Data with Firebase Cloud Firestore

• Cloud Firestore intro
• Cloud Firestore setup
• Deploying security rules for Cloud Firestore
• Creating documents
• Displaying user document
• Updating user documents, part 1
• Updating user documents, part 2

4. Storing Files with Firebase Cloud Storage

• Cloud Storage setup
• Cloud Storage security rules
• Profile image upload form
• File upload trigger
• Cloud Storage file upload
• Challenge: Monitor upload progress
• Solution: Upload progress

5. Control Access with Custom Claims and Security Rules

• Firebase ID tokens
• Setting Firebase custom claims
• Admin interface: Users page
• Admin interface: Read user collection
• Admin interface: Render user collection
• Challenge: View user profile with admin
• Solution: View user profile with admin

6. Going Serverless with Firebase Cloud Functions

• Cloud Functions setup
• Cloud Functions: Email setup
• Cloud Functions: Authentication trigger

7. Hosting with Firebase

• Firebase Hosting setup
• Deploying your React app

Conclusion

• Next steps