Firebase with React, v2
Table of Contents
IntroductionSteve Kinney gives mention to the new features offered in Firebase since the last iteration of the course, and also what will be accomplished in the course.
Cloud FirestoreSteve introduces Cloud Firestore, the database replacing Realtime Database in Firebase.
The Structure of Cloud FirestoreSteve explains how Cloud Firestore differs in structure from Realtime Database.
Collections IntroductionSteve gives an introduction on how to query data from the Cloud Firestore.
Ordering, Limiting, & QueryingSteve gives examples of how to perform ordering, limiting, and querying on the Cloud Firestore.
Code TourSteve demonstrates the prewritten application’s functionality, and briefly walks through the code.
Firebase ConsoleSteve gives the application the concept of Firebase by using the Firebase console.
Configuring FirebaseSteve configures the Firebase application and exports necessary variables.
Creating a Firestore DatabaseSteve sets up a new Cloud Firestore database, then wires it into the application.
Querying the DatabaseSteve utilizes a promise to query the Cloud Firestore database and create a QuerySnapshot.
Querying & Updating
QuerySnapshotsSteve introduces key properties and methods of the QuerySnapshot objects.
DocumentSnapshotsSteve introduces key properties and methods of the DocumentSnapshot objects.
Creating a DocumentSnapshotSteve demonstrates how to utilize asynchronicity to iterate over the QuerySnapshot and extract the data
Manually Adding a Document to FirestoreSteve demonstrates how to use the Firebase console to manually create a document inside of a collection.
Rendering Documents to Component StateSteve maps over the posts collection to display the data in the app.
Adding a PostSteve posts a document to the database, then demonstrates how to GET the same document and update the state of the application to reflect the new data.
Removing a PostSteve demonstrates how to add functionality to the app that allows the user to delete posts, then also removes it permanently from the database.
Subscribing to Database UpdatesSteve utilizes the onSnapshot method to ensure that the page is listening to the database changes being made.
Isolating Database Calls to a ComponentSteve refactors the existing code such that the database calls are isolated to one component.
Update a Document ExerciseStudents are instructed to implement the star functionality to the application using the method learned from removing a post.
Update a Document SolutionSteve live codes the solution to the exercise, and adds the date to the individual posts.
Configuring OAuthSteve demonstrates how easy it is to configure the OAuth with the Firebase console.
Authentication UISteve exposes the prewritten UI to allow the user to sign in or sign up.
OAuth Sign In with GoogleSteve wires up the app to allow the user to sign in via Google.
Sign Out ExerciseStudents are instructed to allow users to sign out of the application.
Sign Out SolutionSteve live codes the solution to the exercise.
Cloud Functions Q&ASteve discusses the benefits and disadvantages of not having an enforced schema, and how a cloud function might be triggered.
Security Rules IntroductionSteve introduces the basic structure of security rules, how to nest rules to sub collections, how to validate based on the document, accessing other documents, and basic rules to keep in mind when writing security rules.
Writing Security RulesSteve writes a few security rules, and demonstrates how they limit access in the application.
Verifying Security RulesSteve logs in to create a user profile in the database, then verifies that the current security rules are working.
Validating Data ExerciseStudents are instructed to create a security rule that validates whether the title of a post is null, and rejects it if it is.
Validating Data SolutionSteve live codes the solution to the exercise.
Authentication & User Documents
User DocumentsSteve explains the pitfalls of the current design, and how that can be solved with user documents.
Display NameSteve demonstrates how to allow users to set a display name.
Firebase Authentication SettingsSteve introduces some authentication settings that are offered out of the box by Firebase.
Creating a User DocumentSteve constructs a function that creates a user document.
Getting User Document DataSteve constructs a function that GETs a user document.
Add Security Rules for RegistrationSteve adds security rules so that users can read their own blog posts.
Modifying User ProfilesSteve demonstrates how the data is being read from the user profile as opposed to the auth object.
State ManagementSteve approaches the problem of scaling, should the application grow in size.
React Context APISteve pulls out the posts into the the React Context API.
Creating a React Context ConsumerSteve wraps the top level component into the provider to ensure that other components can hook into it, then wraps the posts in the consumer as well to create a more modular application.
Refactoring with React ContextSteve deletes unnecessary code that was rendered obsolete by the consumer.
React Context & Hooks ExerciseStudent are instructed to abstract code out of the Application component into the UserProvider component, as was done with the PostsProvider component in the last few sections.
React Context & Hooks SolutionSteve live codes the solution the exercise. A question is also asked about the architectural decision to use the Context API over using React hooks.
UI PermissionsSteve augments the user interface so that the delete button doesn’t show when the post doesn’t belong to the current user.
RoutingSteve adds routing to the application.
Changing User Profile DataSteve adds the ability for users to change their screen name and upload a file in the application.
Subscribing to User Profile ChangesSteve adds functionality to the application that updates the user's screen name as soon as the submit button is clicked.
Firebase StorageSteve adds the ability to upload a file to the application using Firebase storage.
Security Rules for UploadingSteve changes the security rules to allow users to upload their images.
Uploading a Profile PictureSteve gives a proof of concept by uploading a new profile picture to the application, and reviews what was done to get to this point.
Document RoutingSteve explains the benefits of subcollections, then introduces the next feature in the application, which is to allow the user to fetch a specific post via a URL.
Routing to Document DataSteve begins constructing a page where the specified post will be placed.
Adding CommentsSteve demonstrates how to nest documents with subcollections by adding comments to the posts.
Higher Order ComponentsSteve creates a higher order component, which takes a component, wraps it in another component, and returns it.
Deploying with the Firebase CLISteve walks through a deployment of the Firebase Application to the internet through the Firebase CLI, then talks through some of the hosting features that the Firebase console has.
Cloud FunctionsSteve introduces what cloud functions are, and discusses use cases.
Deploying Cloud FunctionsSteve demonstrates how to set up cloud functions, and how to deploy them.
Creating an API EndpointSteve creates an API endpoint using cloud functions to get all of the posts. The Firebase function logs are also briefly introduced.
Local Cloud FunctionsSteve demonstrates how to run a cloud function on a local machine, rather than Google's.
Modifying DocumentsSteve sanitizes a document of a specific word by using a cloud function.
Document Counter FunctionSteve adds a comment counter feature to the cloud functions.
Wrapping UpSteve reviews what was covered, as well as the main points to take away from the course.