Wantalon

Open to all people who are interested in art and like to move.

Wantalon is an art project by Petra Mattheis, whose basic idea came about during the Corona pandemic, when museums and galleries were closed. Wantalon aims to create an art trail in public space that exists and can be visited independently of indoor spaces, and to take users by the hand to walk with them through the city. The app acts as a mediator between public space and art, turning the city into a large-scale gallery. The course shows artistic interventions in places that are normally considered obstacles, such as ruins, wastelands and vacant lots, and is intended to encourage people to walk through the city off the beaten track.

Treat Yourself to the App

The app is free, without ads and does not track you:
👉 Wantalon in the App Store
👉 Wantalon on Google Play

The interactive map guides you to the stations, which are automatically unlocked as soon as you are near them. You can see pictures and texts about each station and send digital postcards once you have visited a certain number of stations.

For more information, visit wantalon.net.

#zeitzseeing

The first Wantalon course has the title #zeitzseeing and leads through the small town of Zeitz in the south of Saxony-Anhalt. The two artists Petra Mattheis and Sascha Nau created a photographic tour, a personal view of the city. Stations can be discovered and collected using the central map. Those who have collected more than five stations have the opportunity to send a digital postcard from Zeitz.

Technology

Hybrid App in Frontend

Under the hood, I developed a web app using the Ionic Framework. Ionic itself is composed of Capacitor, an open source runtime environment for developing web-native apps, a frontend framework like React or Vue.js and custom Ionic components for the chosen frontend framework. Being a Vue lover, I took Ionic to hand with Vue.

The idea behind Ionic components is to mimic the look of native Android and iOS apps. Since Wantalon has its own design style, hardly any components from Ionic were used. I created most of the controls myself.

As a bundler for the web app, I use Vite. Over time, a kind of best-practice approach to web apps grew. Maybe I can reuse the core without business logic for another app or release it open source at some point.

Within the web app, we use Mapbox for the map views, among other things.

Kirby CMS in the Backend

The backend and CMS of choice is Kirby CMS, from which the app fetches the relevant data using the Kirby Query Language API.

Since Kirby is not well-designed for use as a headless CMS by default, I used the Kirby plugin kirby-headless, which was developed in the course of another project. It allows me to flexibly load data even in a multilingual context. With a Vue composable, I can then retrieve lazy data for individual pages in the frontend.

• kirby-headless: Kirby plugin to load token-based KQL data, also suitable for multilingual Kirby installations
• Vue KQL Composable with SWR (stale while revalidate) and more