Loyalty / Membership App: House Rules Club

Intro

The purpose of this app is to allow customers of a board game cafe to collect and use points, credits, or other units such as a free drink or game hour.

Features

• Create any number of card types such as Cash, Drink, Hours, Points, etc
• Card balances must expire in a First-In-First-Out manner
• Must be convenient to auto-update the app in the future

Tech Stack

I decided to build this app as a "Progressive Web Application" PWA, so that we could roll out new features, fix bugs, or change the UI as needed. Another benefit of utilizing PWA technologies was that was it was cross platform. Admin users could also access the same app using a browser on a laptop or tablet, by going to a protected URL.

Framework

I decided to use Svelte for the performance, the superior developer experience, and because I wanted to try SvelteKit. I first built the UI using Svelte, and the separate API using ExpressJS, just in case SvelteKit had limitations. After some tests, it turned out to be the best backend framework for Svelte. Who knew?

Some Hiccups

PWA's are not without its own problems. Firstly, on iOS, the "Add to Home screen" option - the way PWA's are installed - is only available on Safari, whereas Android users may use Chrome other browsers to install the app. That meant, I had to test on both iOS Safari and Android Chrome Browsers. As a web developer, this is far less than a typical web application.

Secondly, Svelte generates javascript that uses some modern Javascript features. That means some features were not available on older browsers that do not support the newer APIs and javascript features. I ran into this problem when I was testing the app on the cafe's POS tablet. It was an Android tablet running a very old version of Google Chrome, and there was no way to update it.

Another minor problem I ran into was that one customer did not have the "Add to Homescreen." They ended up simply using the browser without installing.

Authentication

I chose Firebase Authentication for its convenience to the user. I enabled Google Sign-In only but Firebase supports email/password, facebook, github, and more.

Database

I used Planetscale, a cloud database provider for its free tier and also because I had heard good things about it and wnated to try. There is no risk of vendor lock-in, but there are caveats. Planetscale does not support true foreign key constraints. Due to this restriction, I might migrate to a different provider in the future.

Hosting

I went with Vercel for their ease of deployment when it comes to SvelteKit projects. Also, their free tier covers our use case. One downside I discovered was their slow cold-start time. If it becomes a noticable problem, I will migrate to DigitalOcean. SvelteKit has support for vercel, netlify, or plain node servers.