Mobile GIS App (Expo Go)

Location-Based Game for Karlsruhe

Project Description

This project was developed as a location-based game app using Expo Go and React Native, as part of the final project for the course of Mobile GIS. The app challenges players to explore different parts of Karlsruhe by navigating to nearby touristic locations using Google Maps. At each location, the user must answer a quiz question to earn points. Once all locations have been visited and all questions answered correctly, a congratulatory message is displayed and the user is given the option to restart the game.

Idea and Concept

The core idea behind the app is to combine mobile GIS with gamification to promote exploration of Karlsruhe. Users must navigate to mission points and answer location-based quiz questions to earn points.

Mobile GIS App Home Screen

Features

  • Location-based services integrated with Google Maps to find nearby touristic sites.
  • An interactive game where users answer questions at each mission point.
  • Persistent state management for tracking visited locations and answered questions.
  • A "Get Location" feature that shows the nearest mission point along with its name and distance.
  • An in-app help button with instructions on how to play the game.
Map View with Mission Points

Technical Implementation

This app was built using React Native with Expo Go, enabling cross-platform development on both iOS and Android with a single codebase. The project leverages:

  • React Native and Expo Go: For rapid cross-platform development.
  • Google Maps API: To integrate mapping and geolocation functionalities.
  • Geoserver Integration: Hosting data for mission points, questions, and answers.
  • Modular React Components & Context: For location requests, map rendering, and state management.
Project Code Structure

Demo and How to Play

When the app is launched, it will request permission to access the device's location. Upon approval, the app displays the nearest mission point. Tapping a mission point presents a quiz question. Correct answers allow progression, and once all questions are answered, a congratulatory message appears with the option to restart the game.

Logo of the app

Repository & Testing Instructions

To clone and test this app on an Android emulator, please follow these steps:

  1. Install Node.js and npm: Download and install the latest version from nodejs.org.
  2. Install Expo CLI: Open your terminal and run npm install -g expo-cli.
  3. Clone the repository: Run git clone https://github.com/AaronArt/MobileGISApp.git.
  4. Navigate to the project folder: Run cd MobileGISApp.
  5. Install dependencies: Run npm install to install all required packages.
  6. Start the Expo development server: Run expo start in the terminal.
  7. Launch the Android emulator: Open Android Studio, start an Android Virtual Device (AVD) using AVD Manager, then press a in the Expo terminal (or click "Run on Android device/emulator" in the Expo Developer Tools) to launch the app.
  8. Alternatively, test on a physical device: Download the Expo Go app from the Google Play Store, scan the QR code displayed by Expo, and run the app.

You can view the complete source code on GitHub here: MobileGISApp Repository.