2020-07-07dev / SPA4 minutes read (About 598 words)

Scoreboard SPA built on the cheap in 2 hours

This is not a tutorial, but a quick write-up about the simplicity of tools which can be used to publish simple single page application nowadays. I have used this approach a few times when someone asked me to build an editable table of items (i.e. upcoming events) without special requirements. I wouldn’t recommend this approach for anything more serious.

Tooling

html5up as a responsive HTML template
Google Sheets as an editable database
SheetDB to convet Google Sheets into simple api
ApexCharts chart template to display scores nicely
my 3$ Ubuntu VPS with Apache and Let’s Encrypt to deploy the result

Motivation

I was in need of a simple editable scoreboard for children summer camp. Scores should be updated independently by a few animators and displayed on the temporary page published during the event.

API + Database

Google Sheets is an excellent choice due to three reasons. Firstly, everyone can access and edit a shared sheet using a browser or mobile app. Secondly, there are SaaS platforms like SheetDB which can turn the sheet into consumable API. And finally, I could leverage the simplicity provided by both of these to speed up the most cumbersome part of this project.

Sheets-into-API approach is quite popular today, there are many competitors in this field like SheetDB, Sheetsu, Sheet.Best and many more. I wish Google itself made such a simple API to its Sheets, but I guess Google is just more focused on its Firebase cloud business.

Google Sheets

SheetDB

Frontend

The place I visit every time when I need a responsive static site is html5up. Their templates come with example page populated with all design options and further customization is possible with the provided Sass file. When doing a small project like this one, these templates can help me kickoff the frontend in a minute without sacrificing the responsiveness and with decent eye-candy.

Displaying data

I wanted to display the scoreboard with a plain horizontal chart, the chosen one from ApexCharts‘s works as expected.

The data are fetched from the API with a simple fetch and then sorted by the score value.

fetch("https://sheetdb.io/api/v1/[real token removed]")
    .then(res => {
        res.json().then(res => {
            // skipped data tranformation...
            var chart = new ApexCharts(document.querySelector("#chart"), options);
            chart.render();
...

Hosting

For hosting of small projects, I prefer the VPS and leverage Apache’s capability to host multiple sites (VirtualHosts). My usual routine is to create an appropriate folder inside /var/www/[DOMAIN-NAME.NAME], then create site’s configuration file with <VirtualHost *:80> directive in /etc/apache2/site-available/[HERE].conf, enable it with a2ensite * command, and issue SSL certificate with Let’s Encrypt’s Certbot client. Certbot creates a copy of configuration file with certificate paths populated appropriately and I can finally upload frontend files and fill a glass of wine.

Result & evaluation

The resulting SPA was created in a much shorter time than this post. Except for the JS fetch part of data into chart there were zero lines of code written elsewhere. I can recommend this approach only for the project with constraint funding and one-shot temporary applications as stated in the preface.