An online research tool that reduces the time spent on new business user surveys to less than 1/10

by Vue.js Examples

cobe-research

An online research tool that reduces the time spent on new business user surveys to less than 1/10.

System design

Technology stack and architecture

  • Cloud Service
    • Firebase on Google Cloud Platform (GCP)
  • Authentication
    • Firebase Authentication
  • Database
    • Firebase Firestone for realtime
    • Firebase Storage to store image and video files
    • Google Storage to back up Firestone
  • Hosting
    • Firebase Hosting
  • Backend
    • Firebase Function
    • Firebase Extensions to resize image
    • SendGrid for email delivery
    • Algolia for site search and discovery
  • Frontend
    • TypeScript + Vue.js
  • UI F/W
    • Vuetify. Google Material Design

DB

See https://github.com/Cobe-Associate/cobe-research/tree/main/src/store.

Backup

Back up only Firestone in production environment. See https://github.com/Cobe-Associate/cobe-research/blob/main/functions/src/firestone-backup.ts.

Project setup

Register Firebase and external　services.

Setup .env files.

Setup .env.development, .env.staging, and .env.production.

NODE_ENV=production
VUE_APP_ENV=production

VUE_APP_ADMIN_EMAIL=["sample@cobe.work"]

VUE_APP_ALGOLIA_APP_ID=xxxxxx
VUE_APP_ALGOLIA_API_KEY=xxxxxx

VUE_APP_FIREBASE_CONFIG={"apiKey": "xxxxxx", "authDomain": "xxxxxx", "databaseURL": "xxxxxx", "projectId": "xxxxxx", "storageBucket": "xxxxxx", "messagingSenderId": "xxxxxx", "appId": "xxxxxx", "measurementId": "xxxxxx"}

VUE_APP_FUNCTION_URL=xxxxxx

VUE_APP_FB_EXT_SIZES_OF_RESIZED_IMAGES=200x200

VUE_APP_OBSERVER_EMAIL=sample@cobe.work
VUE_APP_OBSERVER_PW=123456

VUE_APP_SENDGRID_KEY=xxxxxx

Install libs.

yarn install

Compiles and hot-reloads for development

yarn serve

Deploy

Prepare firebase extensions

  • Install Resize Images and set sizes of resized images in .env file.

Get token to delete SubCollection in firestone by Firebase CLI

firebase login:ci

firebase functions:config:set fb.token="{ copy token }"

Set CORS To Download File From Firebase Storage

See detail in Download Files on Web.

gsutil cors set storage-cors.json gs://cobe-research-prod.appspot.com

gsutil cors get gs://cobe-research-prod.appspot.com

Compiles and minifies for production, development and staging

yarn build

yarn build:development

yarn build:staging

Deploys for Firebase Hosting

firebase use cobe-research-prod

firebase deploy

Deploys Firebase Functions

See /functions/package.json

Lints and fixes files

yarn lint

License

Copyright (c) 2021, Cobe Associe Llc. All Right Reserved.

GitHub

View Github