Making a serverless incremental counter for a static webpage via Firebase
Say, you’ve made a little browser app, in our case it’ll be a workout app. It’s just a static web page hosted on Github pages. Now we want to show the number of workouts completed. As the title suggests, we don’t need to set up a server ourselves to make it happen.
Note a workouts counter below the “Start workout” button:
We want to increment the counter every time someone clicks on it.
Firebase is a database platform from Google designed to power all your apps – iOS, Android, Web and more. So you can focus on development the app and not managing the database. Firebase has tons of products (different types of databases, ML and A/B-testing kits), but we’ll focus on Firebase Realtime Database – cloud-hosted NoSQL DB. It’s free up to 1Gb storage and 100 simultaneous connections, exactly what we need to implement a simple counter for our serverless browser application.
See how simple it is? We just loaded Firebase from Google CDN, initialized our DB and we’re ready to read and write from the database. Wait a second, read and write from the database? What about security? Out of the box there’s a read & write permission for every user to your Realtime Database. Scary, right? Let’s see how we can configure the access:
The config is a JSON file with 3 keys to descrube security rules:
.validate. We’ll enable access only to the key where we store our counter (
incremental_counter). To allow only increments of one we can write plain JS and use some predefined variables (
newData – the value we’re about to write,
data – old value etc).
With such validations we can easily make a “backend” for many applications: voting, polls and quizzes, NPS scores and so on. As for our workout app: check out the final implementation with Vue.js at https://makaroni4.github.io/rad-workout-app/#/. One detail you might like – the value of the animated and counted up from 0 to the value.
I hope it was a useful read for you, just in case you were looking for the full source of the Vue app – here’s a Github repo. Cheers!