Mobile apps

Tandem - built with Capacitor, Vue and Supabase

Simple, fun, and has few rules - cross-platfrom realtime mobile game developed with Capacitor.js, Vue.js and Supabase. Tandem handles multiple users and hundreds of games every week.

About

Tandem is simple, fun, and has few rules. All you need to do is answer the same thing as your teammate. Easy, you think? Yes, maybe, but you need to know each other well since you will only answer with one word when the category comes up.

Of course, you are not allowed to talk to each other or have any form of communication when the question comes up. If you answer the same thing, you get points. If you are not in sync, you can create a suitable punishment that is appropriate for the event.

What's extra fun is that you are in teams of two, where you can be on a team with friends, mother and daughter, siblings, father and son, boyfriends and girlfriends, roommates, grandmother and grandchildren, or you can be on a team with someone you don't know so well and get to know each other even better?

Technologies

I was wondering best fit for an app accessible across multiple platforms, including the App Store, Google Play, and the web.

React Native, Flutter, and Ionic (with Capacitor.js) were the options I considered. As a web developer Capacitor.js seemed like the easiest option because it allows building mobile apps using web technologies, minimizing the need for additional learning. In this way, I could build a frontend using Vue.js, PrimeVue (a Vue UI library), and the Vue Router library.

On the backend side, I initially started with Firebase because of my prior experience. However, there's a significant drawback: the inability to set a hard cost limit. I've heard stories of enormous bills received from Google due to DDoS attacks. That's when I discovered Supabase, a Firebase alternative which is a Postgres database with built-in authentication, real-time subscriptions, and many other features that I needed.


Supabase offers real-time broadcast, database change events, and presence. The last one is very helpful for handling online users who are in the lobby with the app open.