This repo allows user to fill data in a form and auto sync it with Google Cloud Firestore. On successful update Google Fire Function calculates form completion progress which get synched with front-end Client as well.

Build a form with 5 fields with auto save ability and show the percentage of form completion to the user. Assume each field accounts for 20% of the form.

• TailwindCSS for design and UI
• Cloud Firestore as database
• Vue and Vuexfire to save data in the database

Easiest way to setup Vue application is to use Vue Cli so I used npm and Vue CLI to install required package.

Install Vue CLI

npm install -g @vue/cli

Install Firebase, Tailwind, and vuefire

npm install vuefire firebase tailwindcss

VuefirePlugin is setup using firebase SDK. For two way declarative data binding Firestore callback is used.

Created Collection on Fire Store (Google Cloud) in test mode. Test mode allows to perform read/write activities without auth credentials. (It is not recommended to use it in production.)

Storing data on cloud is costly operation. Google limits the number of operations/sec and charge for write operations. Write a method the handles changes to the form. Debounce the call to Firestore to prevent excessive writes to the database that could cost money and/or exceed Firestore’s rate limits.

Written Google cloud onWrite trigger function to calculate completion percentage and deployed it on cloud using firebase CLI.

Follow these steps to setup this project on local machine after cloning this repo.

npm install

npm run serve

npm run build

npm run lint