How I Built WPBingo: a PWA That Uses Vue.js, Tailwind CSS, and the WP REST API

Summary:
In 2017 made a simple bingo game using Vue.js and the REST API and you can, too! This session provides an excellent primer on working with a new JS framework (Vue.js in this case) and extending the REST API. In 2019 I converted it into a Progressive Web App (PWA). The entire thing is lightning fast and can even work offline!

Full description:
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

Speaker

Categories