Digital Paper Edit - Firebase

Note: Thsi fork of @bbc/digital-paper-edit-firebase removes BBC specific dependecies and enables other developer to deploy their own web app instance on firebase using GCP services.

---

An application to make it faster, easier and more accessible to edit audio and video interviews using automatically generated transcriptions from STT(Speech To Text) services.

See intro for more info on the project. And user journey for a high level overview of the user journey.

This is a web app version of autoedit.io desktop app. If you are not a developer and are looking for a ready to use version check out the desktop app.

If you are a developer, and are not just working on this repo but are also working across the other repositories for this project, you can check out the docs notes guides 'Visual Code Workspace Setup', for ease of development.

This project uses Github project boards to track progress

You can also checkout the autoEdit 3 (Digital Paper Edit) project board, that tracks issues and tickets across repositories.

Setup

Firebase project

Setup a firebase project on Google Cloud Firebase Dashboard. See firebase docs, or these notes for more info.

Configuration

.env

Duplicate .env.example into .env, and fill in the credentials details.
Then from the firebase dashboard

Project settings → Your apps → Firebase SDK snippet→ CDN

# App name used in browser title and navbar
REACT_APP_NAME=""
REACT_APP_NODE_ENV="development"
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=digital-paper-edit
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=
REACT_APP_MEASUREMENT_ID=
REACT_APP_API_KEY=

Firebase API key for cloud function

To get the value for REACT_APP_API_KEY. Go to the firebase dashboard, ans you can find it under:

Project settings → Your Project → Web API Key

set env in cloud function

cd functions

set the Firebase web API key as env var for cloud functions, to be able to use to call the GCP STT operation end point, outside of the STT SDK to check progress of a transcription.

firebase functions:config:set webapi.key="THE FIREBASE WEB API KEY"

more info here

Firebase tools

Install firebase tools on your local system, if you don't already have them

npm install -g firebase-tools

Create a Google Queue

Create a Google Queue (firestore-stt) to use Google Task within this project. This is for using GCP STT with firebase cloud functions. See architecture diagram for more info.

gcloud tasks queues create `firestore-stt`

if you don't have gcloud you can either set it up, or use the gcp cloud shell, in cloud console for the project.

Setting up CORS for this project

Checkout cors.json

[
  {
    "maxAgeSeconds": 3600,
    "method": ["GET"],
    "origin": ["*"]
  }
]

install gsutil

In terminal use the cors.json file to set the project's CORS as follow

gsutil cors set cors.json gs://<gcp-firebase-project-name>.appspot.com

replace <gcp-firebase-project-name> with the name of your firebase project, adjust .firebaserc, firebase.json and ./functions/.firebasercaccordingly as well

See links below for more info on setting CORS on a Firebase project

• Cross-origin resource sharing (CORS)
• Configuring cross-origin resource sharing (CORS)
• Firebase Storage and Access-Control-Allow-Origin

Firebase login

firebase login

Usage - development

npm start

Runs firebase dev enviroment, and the react client. Checkout http://localhost:3000

System Architecture

This is a modified version of the pietrop/digital-paper-edit-client application, using Firebase.

The plan is to, after adding core functionalities to the web app to be on par with the desktop app, to further refactor it to follow a modular architecture approach (more details in this talk), that encourages reusability at component level

GCP STT Firebase cloud functions + cloud task setup, in mode details

Docs

See docs folder.

• docs/user-journey/user-journey.md overview of main features of the app.
• docs/notes/ contains unsorted dev notes on various aspects of the project (think of it as drafts).
• docs/guides/ contains good to know/how to on various aspects of the project.

ADR

• docs/adr/ contains Architecture Decision Record.

An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.

We are using this template for ADR

Development env

• npm > 6.13.4
• node v 10 - lts/dubnium
• see .eslintrc in the various packages for linting rules

Node version is set in node version manager .nvmrc

Build

To build the client side react app run

npm run build

Tests

NA

Deployment

To deploy the project onto firebase (cloud functions, and firebase hosting) run (this also builds the react app)

npm run deploy:all

note that firestore storage rules are applied from storage.rules so any firestore rules you change in the firebase dashboard will be overritten from that file when you deploy the app.

Contributing

See CONTRIBUTING.md guidelines and CODE_OF_CONDUCT.md guidelines.

Licence

See LICENCE

Legal Disclaimer

Despite using React and Firebase, this project is not promoting any Facebook or Google's products or other commercial interest.