Match Cards

What is Match Cards?

Match Cards is a memory game built by Tinloof to showcase the power of PWAs (Progressive Web Apps).

The goal of this build was to show how from one single codebase it is possible to create and distribute an app on both desktop and mobile platforms.

You can watch the intro YouTube video here.

What is a PWA?

A Progressive Web App (PWA) is a web application built with certain requirements in mind so it can also be used as a native app.

Instead of having a web developer build the web version and a mobile developer build a native mobile version, it is possible to have a web developer build the web version and have the app distributed to mobile devices.

Here you can watch a short explanation from Fireship or read our blog post about what a PWA is.

How did you create it?

We first started by designing the game's user interface, and then came up with an animated splash page and a promotional YouTube video.

After completion of the design phase, we then began with the development of the app using Remix and TypeScript, and later, deployed it on Vercel.

Once the web app was live, we went ahead and distributed it to the App Store and Play Store with PWA builder, a Microsoft tool used by brands like Pinterest and Tinder to distribute PWAs.

Below, we'll go through more details on both details on the approach to both the design and development.

Previous version

PWAs are not a new concept at Tinloof. We've built our first version in 2018 (in fact we documented that in an article), but we felt like the UI needed to be refreshed to make it more attractive.

New branding concept

To make the game more playful and user friendly, we've conducted a short branding exercise and ended up creating a moodboard that served as the baseline for the interface designs.

To ensure branding consistency for all our clients and internal projects, we make sure to document the necessary standards in a brand guidelines URL.

Design mockups

After completion of the moodboard, designers created the new interface for Match Cards on Figma, ensuring responsiveness and ease of use.

Below, you can directly inspect the Figma file that was handed over to developers.

Animated assets

To add some "spice" to the game, we created a splash homepage and based its animation on the game itself. The letters only light up when they match.

We also added sound effects (that can be muted) on the game, to make it even more entertaining.

One codebase, multiple distributions

From one codebase, we're able to distribute to the web, App Store, and Google Play Store.

We don't need to have three separate codebases for each medium, or two codebases - one for web and the other for mobile.

This makes the application easier to maintain, cheaper and faster to develop.

Web application

After the completion of the designs, we then tackled development.

To ensure fast page speed, we picked Remix as a React framework, and deployed the web application on Vercel.

We reached top Lighthouse scores across the board. You can test it by yourself on web.dev.

Mobile application

Two of the main advantages of using a PWA are the following:

- From one codebase, it is possible to be distributed on the web and also on mobile stores.

- Not being limited to have an app available on mobile, but also be available by default on the web.

This saves on costs as well, since you would not need to expand your development team to have both web and mobile teams.

We used a tool called PWA Builder, created by Microsoft to support the adoption of PWAs.

PWA Builder packages PWAs for Android, iOS, Windows, and Meta Quest. It also allows for a preview of the app before it's published, to make sure it fits all the requirements.

You can download Match Cards on both App Store (link to install here) and Google Play Store (link to install here).

Download from the web

If you want to download the app from the web instead of the App Store, that's also possible. Follow these steps:

1. Go on Safari.

2. Open https://www.match.cards.

3. Click on the Share button.

4. Press click on "Add to home screen".

5. And voilà - you can now even play the game offline.

Content management with Sanity

We used Sanity CMS to manage any types of content that appear on the Match Cards, including the emojis and social sharing images.

Sanity CMS acts as the unique source of truth for content and ensures consistency across the web and mobile apps.

Cookie-less GDPR-friendly analytics

To track analytics, we used an alternative to Google Analytics called Fathom. This allows us to avoid using a cookie banner, and also means we can stay away from issues like GA being considered illegal in Austria.