Firebase + React: Real-time, Serverless Web Apps
This course has been updated! We now recommend you take the Firebase with React, v2 course.
Table of Contents
Firebase + React
IntroductionIntroducing your instructor, Steve Kinney.
Firebase + React OverviewWhile 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 ApplicationSteve 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 FirebaseSteve 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 DataSnapshotAny 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 DatabaseSteve 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 FormSteve incorporates a form into the React application to work with the Firebase application.
Growing the Database
Writing Data to FirebaseSteve shows how to save data in Firebase using push, which generates a unique key.
Working with Database SnapshotCovering the benefits of using a snapshot of a database, Steve refactors code to read and write to the database.
Introducing Lunch AppWhile taking questions from the audience, Steve introduces a new application that collects votes on lunch locations.
Oauth in FirebaseReviewing the starter files in the application and how the application will work, Steve starts to incorporate authentication with Google Sign-In.
Fleshing out AuthenticationSteve integrates authentication into an application to create a successful signing in and signs out experience.
Content for Logged In UsersSteve creates a form that takes submissions for lunch venues only for authenticated users and then takes questions from workshop attendees.
Displaying Content from FirebaseWith 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 FunctionalitySteve sets up voting functionality within the application.
Polishing the ExperiencePolishing the experience for the application, Steve checks to see if a key exists in Firebase before displaying it in the browser.
Introducing NoSQLSteve introduces NoSQL and how to approach modeling data.
Querying DataWorking with a large amount of data, Steve shows how to retrieve and filter data.
Introducing Cloud StorageSteve introduces the next application, which allows authenticated users to upload images to Firebase.
Getting an Image from a UserWhen 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 ImageGrabbing the user's photo, Steve shows how to store the image into Firebase's cloud storage.
Security RulesSteve secures data by setting up security rules to make sure that unauthorized or unauthenticated users cannot access or modify senstive data.
Chat Application CodeSteve goes through the code for the chat application.
Sign On with ReduxUsing Redux, Steve implements sign on and sign out processes for the chat application.
Real-Time FeedbackAdding a user to the chat application, Steve demonstrates how to connect the application to Firebase to get real-time feedback.
Authentications and SignonsListening to authentication changes, Steve sets the application to log in or log out a user depending on the state change.
Chat MessagesSteve 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 RightsSetting up how Firebase works for setting up administration roles.
Deploy the ApplicationUsing 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.
Introduction to Cloud FunctionsSteve reviews the benefits of Firebase integrating with Cloud Functions, a serverless event-driven computing service.
Setting up Cloud FunctionsSteve demonstrates how to set up the application to include Cloud Functions.
Cloud Messaging for NotificationsA 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 WorkersSteve tightens up the application as Service Workers only work in HTTPS.