💪 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.

Intro

Note a workouts counter below the “Start workout” button:

It's called RAD workout app (Reactive Agility Drill)

We want to increment the counter every time someone clicks on it.

Firebase

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 the Pen Incremental counter via Firebase by Anatoli (@makaroni4) on CodePen.

This is how data looks like in the UI of Realtime Database

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:

1
2
3
4
5
6
7
8
9
10
11
{
  "rules": {
    ".read": false,
    ".write": false,
    "incremental_counter": {
      ".validate": "newData.isNumber() && newData.val() === data.val() + 1",
      ".read": true,
      ".write": true
    }
  }
}

The config is a JSON file with 3 keys to descrube security rules: .read, .write and .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! 🍻

“no fuss, just things you actually need”

Start learning with SQL Habit today

Master Data Analysis with SQL through the story of how a startup succeeded through data.
TRY 35 LESSONS FOR FREE

Explore other articles

2019

2018

2017

2014

2012