⚛️React x 🔥Firebase Workshop

A workshop to explain how to go about integrating Firebase into your React application. We'll be implementing Authentication, Firestore, Remote Config, Cloud Functions and Hosting.

Table of Contents

• 🎯 Goals
• ⚡ Get Started
• 📚 Projects
• 🤖 Deployments
• 🚀 Libraries Used

🎯 Goals

• Learn how we can use Firebase Authentication to manage our users
• Learn how we can use Firebase Cloud Firestore to store data and receive it in real time
• Learn how we can use Firebase Remote Config to receive configuration variables from the cloud
• Learn how we can use Cloud Functions to handle further business operations

⚡ Get Started

Clone Repo

# clone the repo
$ git clone git@github.com:askharley/react-x-firebase-workshop.git

# navigate into the repo root
$ cd react-x-firebase-workshop

# go into the start project
$ cd start

Environmental Variables

Add your Firebase project's web config to a .env file in the root of the application.

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=

Install

# install the dependencies
$ npm i

# start the application
$ npm start

📚 Projects

• start - a starting place to begin your work
• final - an example of what a final implementation using Firebase would look like

🤖 Deployments

• start -
• final -

🚀 Libraries Used

• AntD - Components
• Firebase - Our complete backend-as-a-service implementation
• dayjs - Helpers methods for some date utils
• prop-types - Runtime type checking for React props
• use-ekko - Persist state to the local storage