Just prior to WCUS 2017 I had the fun idea of creating an interactive bingo board for all of the fun and unique things that we regularly observe within our community. I was able to knock together the original concept after just a couple of hours thanks to utility provided by View and tailwind. Later I connected it to WordPress via the rest API so that I could more easily manage each of the squares available in the data set. Finally, I added a service worker to make the entire experience work offline.

In this presentation I walk you through how I went from idea to prototype to fully functional web app. We’ll cover the purpose served by my chosen frameworks and why I picked those instead of writing plain, vanilla JavaScript and CSS (or competing frameworks, for that matter). While this will not be a deep dive into code, we will review specific code samples and you should get enough detail to build this – or something like it – yourself by the time the session has ended.

Here’s a specific list of the things you can expect to learn during this presentation:

• Why I chose Vue instead of React for this particular project
• Some of the neat things that Vue provides to us as developers (Vue.js 101)
• The benefits of utility-based CSS classes
• How to register custom REST API endpoints
• How to make a very simple Progressive Web App (PWA) that uses service workers, local storage, and local caching for resilience against connectivity issues and unintended browser refreshes