Educational app with the gaming concept
Alston Explorer app is a game-like app where the users can explore and discover more about the historical and natural environment in and around the town Alston, situated in the United Kingdom by unlocking and completing various tasks displayed in the app.
Select a trail
You can choose to play any of the available trails that go around the town of Alston. These trails contain points of interest, each of which has a story attached to it. These stories are clues which help to solve the tasks and challenges for each point of interest. Complete the whole trail and earn bonus points!
It's as easy as 1-2-3!
Choose a trail that you want to explore. Read about the history around the locations and also see your current progress in this trail.
See the points of interests that are covered by a trail. Read a brief description of each location and your distance from the point
Open a full map showing the path that you have to follow to complete this trail.
Points of Interest
These are historic locations in the city, that you can explore and learn more about the town of Alston. The app contains audio and video stories that you can listen to. Watch and listen carefully as these stories contain the clues to solve the mystery challenges! The challenges will be unlocked only after you reach the location.
Each trail has points of interest, which are locations around the town of Alston.
The point of interest has a story attached to it, for which you can watch the video or listen to the audio.
Each of these points also has a task. Complete these tasks and earn points! You can use these points to unlock goodies in the app.
Each point of interest has a task that is related to its history. The app detects whether you have visited the location and unlocks the task automatically. You get points when you complete the tasks! Complete a whole trail and earn bonus points too! There are four types of tasks
Time-Trail and Detector-Detective challenges are location-based. You need to enable location and complete the tasks to earn points
Rubaway-Quiz and Super-Sleuth tasks are knowledge-based tasks. You must listen carefully to the stories and answer the questions to earn points.
You can create your custom profile from the profile section. First, select an avatar icon from the available avatars. Then select a name for your profile. You can also decorate your profile with badges and backgrounds, which can be unlocked by earning points!
Select your avatar icon. This avatar will be shown on the map screen, leaderboard and other screens.
Select a name for your character.
Choose a badge or a background according to your rank
Mobile App Technology Stack
A framework for building native apps with React.
Mapbox is a location data platform for mobile and web applications which uses OpenStreetMaps. Mapbox provides building blocks to add location features like maps, search, and navigation.
Mapbox Directions API
The Directions API is a service that returns turn-by-turn route navigation between locations. We can calculate optimal driving, walking, and cycling routes using traffic- and incident-aware routing.
Mapbox Matrix API
The Matrix API is a service which provides shortest distances between locations. This API is used to find the shortest route which covers multiple points on the map.
The app’s theme contains lots of images. These images needed to be flexible for different types of devices and also take minimal time to load.
The user profile, task progress, points tracking and other user specific aspects were to be stored in the app’s local storage without any sync from the server.
We needed to implement a scratch card component. There were some natively implemented solutions but they were not performant. We needed a performant and responsive component to use for scratching gesture.
All the images were optimized and regenerated according to the screen densities of a range of devices. We used image caching for faster loading.
A complete structure was created to store and track user points and progress. Also, a global component was created to unlock profile badges and backgrounds.
We implemented a component based on the HTML canvas. We used webview rendering and gesture handling to detect scratch and percentage of image erased. This came out to be really fast and responsive to touch.