Match Cards is a memory game built as a PWA (Progressive Web App) and available on desktop, App Store and Google Play Store.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
Below an example of Match Cards' analytics powered by Fathom:
A PWA, short for Progressive Web App, is a web application that can be distributed to mobile stores like a native app would.
To publish a PWA on both App Store and Play Store, we use a Microsoft tool called PWA builder.
We would first assess what functionalities you need for your mobile app to understand if to go for a PWA or native app (e.g. using React Native).
The main drawback is usually the adoption of more complex features, although nowadays those can be achieved by leveraging SDKs and APIs.
The other advantage of using a PWA is that you would have the web version as well, which is practical for those who like to use their laptop. For example, doing online groceries is more convenient on a larger screen than on a phone.
In terms of cost, you would only need a web development team, and would maintain one codebase only, compared to onboarding an extra mobile app team and incur maintenance costs.
Yes. As a mobile app development agency, Tinloof can also support you with native apps built with React Native.
If you already have a native app, we can support you with it.
If you're starting from scratch, we can conduct a research phase first to assess if a PWA would fit your use case.