This course has been updated! We now recommend you take the Firebase Fundamentals course.
Table of Contents
Firebase + React
Introduction
Introducing your instructor, Steve Kinney.
Firebase + React Overview
While reviewing the course agenda and introduces his Firebase + React workshop, Steve demonstrates the features of Firebase, a cloud-hosted NoSQL database.
Getting a Firebase + React Up and Running
Structuring a Firebase Application
Steve starts building a simple application to demonstrate how to setup a Firebase project, connect the React application to Firebase, and install the Firebase SDK as a dependency.
Connecting React to Firebase
Steve show how to connect a React application to Firebase and display any changes to the database as they occur. Then Steve demonstrates how to adjust the rules for allowing reading and writing updates to the database.
Introducing DataSnapshot
Any time data is read from the database data is received as a DataSnapshot. Steve demonstrates how to read database when it changes, update the state of the component, and render the result in the browser.
Building Out the Database
Steve shows how to adding more data to the database noting that key pairs sort by default Lexicography or alphabetically. Then Steve takes questions from students.
Making a Form
Steve incorporates a form into the React application to work with the Firebase application.
Growing the Database
Writing Data to Firebase
Steve shows how to save data in Firebase using push, which generates a unique key.
Working with Database Snapshot
Covering the benefits of using a snapshot of a database, Steve refactors code to read and write to the database.
Lunch Application
Introducing Lunch App
While taking questions from the audience, Steve introduces a new application that collects votes on lunch locations.
Oauth in Firebase
Reviewing the starter files in the application and how the application will work, Steve starts to incorporate authentication with Google Sign-In.
Fleshing out Authentication
Steve integrates authentication into an application to create a successful signing in and signs out experience.
Content for Logged In Users
Steve creates a form that takes submissions for lunch venues only for authenticated users and then takes questions from workshop attendees.
Displaying Content from Firebase
With the help of the lodash utility library to iterate through the Firebase node, Steve renders the names of restaurants voted on in the application.
Voting Functionality
Steve sets up voting functionality within the application.
Polishing the Experience
Polishing the experience for the application, Steve checks to see if a key exists in Firebase before displaying it in the browser.
NoSQL
Introducing NoSQL
Steve introduces NoSQL and how to approach modeling data.
Querying Data
Working with a large amount of data, Steve shows how to retrieve and filter data.
Cloud Storage
Introducing Cloud Storage
Steve introduces the next application, which allows authenticated users to upload images to Firebase.
Getting an Image from a User
When a user logs in with a Google account, Steve shows how to retrieve the user's Google profile photo or an uploaded photo.
Storing an Image
Grabbing the user's photo, Steve shows how to store the image into Firebase's cloud storage.
Security Rules
Steve secures data by setting up security rules to make sure that unauthorized or unauthenticated users cannot access or modify senstive data.
Chat Application
Introducing Redux
Reviewing Redux, a predictable state container for JavaScript apps, Steve introduces a chat application that will combine React with Firebase.
Chat Application Code
Steve goes through the code for the chat application.
Sign On with Redux
Using Redux, Steve implements sign on and sign out processes for the chat application.
Real-Time Feedback
Adding a user to the chat application, Steve demonstrates how to connect the application to Firebase to get real-time feedback.
Authentications and Signons
Listening to authentication changes, Steve sets the application to log in or log out a user depending on the state change.
Chat Messages
Steve implements the chat feature showing that when a user posts or deletes messages, Firebase updates the database and then notifies Redux to refresh the application.
Administrator Rights
Setting up how Firebase works for setting up administration roles.
Deploy the Application
Using Firebase Command Line Interface (CLI), Steve walks through how to deploy an application bu first building the react application and then initializing the Firebase database.
Cloud Functions
Introduction to Cloud Functions
Steve reviews the benefits of Firebase integrating with Cloud Functions, a serverless event-driven computing service.
Setting up Cloud Functions
Steve demonstrates how to set up the application to include Cloud Functions.
Cloud Messaging for Notifications
A three-step process to set up notifications, Steve shows how to request permission from the user, create a cloud function, and a service worker to handle the notifications.
Securing Service Workers
Steve tightens up the application as Service Workers only work in HTTPS.
