Hi, my name is Anatoli, I'm a Software Engineer from Berlin. During the day I work in Growth Team @ Blinkist. During the night I'm an Indie Maker of SQL Habit – online course that teaches data and SQL for Product and Marketing from 0 to Advanced.

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:

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! :beers:

Are you full-stack developer or web designer? Join me at Growth Dev team at Blinkist!
I work in Growth Development team at Blinkist (app that allows you to read/listen short versions of non-fiction books), we maintain our webapps, design & ship AB-tests, build API integrations, analyse user data to improve our web products for millions of users. If you’re Rails developer with a passion for front-end or a web designer with a passion for growth – send me an email or ping on Twitter.
comments powered by Disqus