Installation

1. First you will need to create a new firebase app, keep track of the values generated by the firebase app as you will need these in a later step
2. Next ensure that you have the latest gcloud SDK installed
3. Once that has been installed you will need to initialize the SDK, to do so run the following: (see more)

   gcloud init

4. If you did not select a project in the previous step, set it now to the firebase project ID

   gcloud config set project PROJECT_ID

5. Lastly either copy the firebase credentials directly into the setup.sh file or follow the steps below to use google secrets manager

Secrets Manager (Optional)

NOTE: You will need to do the following for each of the following keys corresponding to the values from firebase:

• firebase-api-key
• firebase-sender-id
• firebase-app-id

1. Navigate to Google Secret Manager: https://console.cloud.google.com/security/secret-manager
2. Click the "Create Secret" button
3. Input one of the names above as the name
4. Set the "Secret Value" to the value provided by firebase
5. Click "Create Secret" to finish creating the secret and repeat to add the remaining firebase secrets

Running the Project

1. Setup the environment and install dependencies

   ./setup.sh

2. Start the server

   npm start

All of the application code lives in the app/ folder. Each of the parts of the application is divided by the function it provides within the app. Below is an explanation of each component of the application

The application entrypoint is broken up into several parts, the first for local development to enable auto-reloading the browser and the remaining to enable all other functionality.

.
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── containers/
│   │   ├── navigation/
│   │   ├── screens/
│   │   ├── state/
│   │   └── utils/
│   │   ├── index.jsx
│   │   ├── root.jsx
│   │   ├── router.jsx
│   │   ├── styles.js
│   ├── data/
│   └── web/
├── webpack/
├── README.md
├── package-lock.json
├── package.json
└── setup.sh

Entrypoint

• The root.jsx file enables livereload features and will only have an effect on developing the app locally
• The index.jsx file serves as the entrypoint to the application and loads all other components through the router
• The router.jsx file creates the browser router and loads in all of the components of the app by wrapping each screen component in a route component
• The styles.js file defines any global JSS styles used in the app

Components

Contains all of the presentational components used in the application

Containers

Contains components that may do some sort of data-fetching that does not belong to a single screen or feature.

Navigation

Contains any routing components

Screens

Each of the routes in the application has a screen associated which will initialize the state of that screen by fetching any data from the API and setting any local state accordingly

State

This is where any application state will live including details about the user.

Utils

This folder contains any shared logic that should be used by either the state manager or by a component for formatting purposes.

• The firebase.js file creates a firebase application using the environment variables for the specific firebase app
• The theme.js file defines the Material UI theme used in the app

All of the setup for developing and deploying the application exists either in the webpack/ folder or in the root folder. Below is an explanation of the function of each:

• .babelrc: Configures how to transpile the newer versions of JavaScript (ES6+) into code that will run in any browser
• .env: This file is generated by the setup script and provides configuration settings and secrets through environment variables
• .eslintrc.js: Sets how to lint the project, use this file to change the rules around writing JavaScript
• .gitignore: Ignore file
• .prettierignore: Ignores node_modules so that prettier doesnt complain
• .prettierrc: Configures how to auto-format code in the project
• package-lock.json: Dependency lock
• package.json: Configure dependencies and any scripts that will be used including the startup script
• setup.sh: Setup script to configure the environment and load secrets

Webpack

All webpack configuration lives in the webpack/ folder and is split up based on environment with a common configuration. Aliasing and transpilation rules as well as the application entrypoint are defined in the webpack.common.js file, while development server setup is in the webpack.dev.js file and bundle optimizations are done in webpack.prod.js

src

There are 3 folders in the source folder related to development:

1. data/: Defines any test data to use while building the app
2. web/: Contains the index.html and any images or other static assets that will be used