Jump to content

Ecumenical city pilgrim trail Villingen App


Recommended Posts


The ecumenical city pilgrim trail in Villingen, Germany is a small trail through the city where you can visit churches and other places of interest. This Progressive Web App is a small website to guide visitors through these places and give additional informations. You can install it on your smartphone or tablet and walk the trail with it.




  • Interactive Map
  • Progressive Web App


Interactive Map


Before entering the map you get a little tutorial where you can choose between two routes, the standard trail or a more accessible trail. You can track your position on the map and click on the markers. Each marker is a view with additional information to the place. The views can contain texts, quotes, images or a chat element.

The map was realized with Leaflet and styled with Mapbox.


Progressive Web App

The website can be installed as Progressive Web App on your smartphone or tablet for a better experience. The PWA remembers the last visited view and has no unnecessary browser navigation. It can also partly work offline and caches almost everything.

The PWA was realized with the help of Workbox.


Modules used:


Regards, Andreas

Edited by AndZyk
Fixed typo
  • Like 9
Link to comment
Share on other sites

Nicely done. I like the color schema a lot.

You might want to make the "Los geht's" CTA a bit more clear though. I wasn't really sure what I need to do/click on the introductory page. Also I feel more whitespace after it wouldn't hurt as well.

  • Like 1
Link to comment
Share on other sites

@AndZyk great work. ?

Only other feedback I have is that the buttons "What do I see?", "What do I hear" & "How does the hustle & bustle affect me?" don't go anywhere/show anything. My cursor changed from normal arrow to an 'edit' icon, not pointer on hover. Is this supposed to happen?

I'm using Chrome on an iMac

  • Like 1
Link to comment
Share on other sites

Strange, that you can see a different cursor. There are no pointer stylings on this element and you should get the standard text cursor. Maybe it is a caching issue.

Either way this website was designed for smartphones and tablets, so visitors don't see a cursor anyway. ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...