O'Reilly logo
live online training icon Live Online training

Google Firebase & React.js

Building Realtime Full-Stack Applications

Topic: Web & Mobile
Shaun Wassell

React is an incredible library for rapidly building front-end applications. However, this is where many web developers stop, unsure of where to go next. Integrating things like authentication, databases, and web-servers into a web application is no easy task, and having to worry about things like performance and security while trying to sort these things out makes matters worse.

The solution for many developers is to use Google’s Firebase. Firebase takes nearly all the work out of setting up and maintaining a back-end, while including performance and security right off the bat. The result is that developers who previously thought of themselves as strictly “front-end” developers can now create, launch, and continuously improve full-stack applications.

What you'll learn-and how you can apply it

  • How to use Firebase Authentication to quickly set up an auth-flow for your application
  • What Firestore is and how it helps us keep data in sync across our applications
  • How to go serverless with Cloud Functions
  • How to use Cloud Storage to store users’ files

This training course is for you because...

  • You’re a front-end developer who’s looking for a way to quickly build back-end functionality for your applications
  • You’re a full-stack developer who’s looking for an easier way to ensure security and performance while building a web-application
  • The company you work for uses Firebase and you want to learn how to use it yourself

Prerequisites

  • Knowledge of JavaScript syntax
  • Experience with front-end frameworks such as React

Course Set-up

You’ll want to set up a Firebase account:

  • Go to firebase.google.com
  • Click “Get Started”
  • Either log in with an existing Google account or create a new one
  • Follow any other prompts to setup your account

Recommended Preparation

Recommended Follow-up

About your instructor

  • Shaun is a lifelong programmer and problem-solving addict. His goal is to help people build incredible software and solve meaningful problems by mastering the art of software development. He currently works as the Head of Application Development at Starweaver Inc., but also has a lot of side gigs, including consulting, freelance development, and online education. Don’t hesitate to get in contact with him if you enjoy his materials.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Overall Introduction (5 mins)

Basic Setup (20 mins)

  • Learn what Firebase is exactly
  • Meet the example project
  • Create and set up a Firebase project
  • Q&A

Learn about Firebase Auth (30 mins)

  • Set up an authentication method
  • Add private routes
  • Allow users to log in
  • Use React hooks to handle authentication
  • Q&A

Break (10 mins)

Learn about Firestore (50)

  • Learn what Firestore is
  • Add Firestore to a project
  • Creating documents and collections
  • Accessing and modifying Firestore data
  • Learn about Firestore pricing
  • Q&A

Break (10 mins)

Learn about Cloud Functions (50)

  • Learn what Cloud Functions are
  • Add Cloud Functions to a project
  • Create and trigger Cloud Functions
  • Deploy and monitor Cloud Functions
  • Learn about Cloud Function pricing
  • Q&A

Break (10 mins)

Learn about Cloud Storage (30)

  • Learn what Cloud Storage is
  • Add Cloud Storage to a project
  • Uploading files to Cloud Storage
  • Accessing Cloud Storage files
  • Learn about Cloud Storage pricing
  • Q&A

Learn about Firebase Hosting (30)

  • Learn what Firebase Hosting is
  • Prepare a React app for hosting
  • Deploy a React app to Firebase Hosting
  • Learn about Firebase Hosting pricing
  • Q&A

Course Wrap-up and Next Steps (5 mins)