Alston Explorer

Educational app with the gaming concept

services

Mobile App Development

industry

Education / Gaming

duration

4 Months

country

United Kingdom

Alston Explorer

Project Overview

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.

Overview image 1Overview image 2Overview image 3

Challenges

Imagery
The app's theme contains lots of images.
These images needed to be flexible for different types of devices.
They also needed to take minimal time to load.
Local Database
The user profile, task progress, points tracking and other user specific aspects were to be stored locally.
The app's local storage had to handle all data without any sync from the server.
A reliable offline data structure was needed for the app to function independently.
Scratch Card
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.

Our Solution

Imagery
All the images were optimized and regenerated according to the screen densities of a range of devices.
We used image caching for faster loading.
This ensured flexible display across different device types with minimal load time.
Local Database
A complete structure was created to store and track user points and progress.
A global component was created to unlock profile badges and backgrounds.
All user-specific data was managed entirely on-device without server dependency.
Scratch Card
We implemented a component based on the HTML canvas.
We used webview rendering and gesture handling to detect scratch and the percentage of images erased.
This came out to be really fast and responsive to touch.

Features Implemented

Alston Explorer includes interactive trail exploration, location-based tasks, multimedia stories, and a gamified profile system to make learning about history fun and engaging.

1. Introduction

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.

Introduction

2. 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!

Select a Trail

3. Trail Details

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.

Trail Details

4. Trail Map

Choose a trail that you want to explore. Read about the history around the locations and also see your current progress in this trail. Open a full map showing the path that you have to follow to complete this trail.

Trail Map

5. 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.

Points of Interest

6. Explore Points of Interest

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!

Explore Points of Interest

7. Location-based Tasks

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. Time-Trail and Detector-Detective challenges are location-based. You need to enable location and complete the tasks to earn points.

Location-based Tasks

8. Knowledge-based Tasks

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 get points when you complete the tasks! Complete a whole trail and earn bonus points too!

Knowledge-based Tasks

9. Profile Customization

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!

Profile Customization

10. Avatar & Badges

Select your avatar icon. This avatar will be shown on the map screen, leaderboard and other screens. Choose a badge or a background according to your rank. Select a name for your character.

Avatar & Badges

Mobile App Technology Stack

Alston Explorer is built with React Native for cross-platform mobile development, Mapbox for location and mapping features, and Redux for local state management.

Maps

Mapbox

Maps API

Mapbox Directions API

Maps API

Mapbox Matrix API

Local Database

Redux

Cross-Platform

React Native

Conclusion

Alston Explorer brings the historic town of Alston to life through a gamified mobile experience. Built with React Native and Mapbox, the app combines location-based trail exploration, multimedia storytelling, and interactive tasks to make learning about local history engaging and rewarding for users of all ages.

NEED A CUSTOM EDUCATIONAL GAME APP?

Let us help you build an interactive, location-based learning experience tailored to your audience.

More Projects

Case study image

Belong App

Social networking app for communities, events, and meaningful connections.

Case study image

Alston Explorer

Gamified exploration app showcasing Alston’s history and natural heritage.

Case study image

Gas Drop

On-demand fuel delivery app with tracking, scheduling, and payments.

Case study image

GadAround

Event management platform for bookings, vendors, and online payments.

Case study image

Fischer

eCommerce platform for heating systems with rewards and support.