/react-x-firebase-workshop

Primary LanguageJavaScriptOtherNOASSERTION

⚛️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

  • 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

🚀 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