Back
Battersea Power Station
Shopping Centre Indoor Navigation App
Technologies: Vue.js, Vite, Tailwind, Keystone.js, Node.js, Typescript, PostgreSQLTime together: 6 months Team: 1 PM, 2 developers

Overview

The application allows visitors to find their desired location in the mall or outside it in several ways. You can select one of the categories, search by name or select directly on the map.

Purpose and Need

The main purpose of this application is to operate 40 terminals placed inside Battersea Power Station. So it’s super easy to find the route from the user's current terminal location to the selected store, restaurant, or any other destination.

Workflow

The map itself was designed by design agency Popcomms. So we worked closely together: the guys were responsible for the cool design, and we took over the development. Our interaction took place on a regular basis, and the partnership turned out to be productive and enjoyable.

Technology

However, it was not quite a typical project for us as a web development company, we managed to build it with a regular stack: Vue App with Tailwind css framework build no Vite as UI. Backend is just slightly tuned KeystoneJS as Admin interface and GraphQLapi provider.

Perhaps, most interesting part was implemented on a CI/CD level, as we setup deployment on a Digital Ocean App Platform with automated releases and dependencies updates.

Structure and Features

Route Finding

Obviously, the main feature of the entire app is route finding. We used a graph based algorithm to automate this process as we have 5 levels inside the building and some exterior locations to consider with over 40 terminals.

routes.gif

Multi-floor support

When the destination is on a floor other than the current terminal, there are several options for finding a route: manual selection using the level switcher or the navigating panel.

If there is no direct transition to the destination floor, for example, the elevator only goes to the penultimate floor, the algorithm can handle this and find a route through the intermediate floor.

There are also navigation pop-ups that can help the user switch parts of the route between floors forward and backward to ensure that the entire route is consistent and visually accessible.

Finally, we’ve add accessible routes support, to avoid stairs, escalators and steps.

multifloor.gif

Navigation Panel

Using the navigation panel, visitors can find places by categories and levels. Both groups have a short description of the selected places and internal navigation if the number of places within the category is more than can be placed on one screen. Route finding function is also available from here.

nav.gif

Screen Keyboard

Another way to search for places is the on-screen keyboard. It has some useful features like autocomplete and name suggestions so when the user starts typing there are only available characters left to continue. Location description and routing work here too.

keyboard.gif

Results

We have successfully deployed the entire application on the client Digital Ocean instance and provided the ability to set the current terminal location with a simple URL query on application start. 

It is especially interesting that our real users will be visitors to this famous giant building on the banks of the Thames. At its peak, the legendary Battersea Power Station provided a fifth of London's electricity. After decades of neglect, it is now being redeveloped into one of London's most exciting and innovative destinations. This is really one of the most famous places in the country, about which you will find many interesting facts and even see it on the cover of one of the Pink Floyd albums.

These are some of our perfect matches

We are burning not only with cool projects, but also with the people behind them. And a perfect team match truly matters. Our clients are our partners, co-authors, and friends at all project stages. Here are some examples of times when Gearheart became a best-fit teammate for our customers.