↓Skip to main content

Run4Exp

1306 words·7 mins
Table of Contents
Disclaimer!
Run4Exp is a student project, and is not meant to be a real application. See the Context part for more information. However, it showcases my software engineering skills in 2021. My skills have largely evolved since then, but I wanted to keep this project public for any potential recruiter or other learner that would like to learn from this application. Do not hesitate to contact me if you have any questions :) ! Also, I’m french, so part of the documentation, codes, and text inside the apps are in French! You might also find some grammar mistakes… I promise you, on a real applications, I’ll pay much more attention to those 🙃 .
Adrien Dudon / Run4Exp

Run4Exp is a running app where the player’s real movements are transmitted to a virtual map.

0
0

Run4Exp is a full-stack, gamified sport/running application where the player’s real movements are transmitted to a virtual map. The idea is to allow users to race in a virtual world. In order to progress in the virtual race, it is necessary to run or cycle in the real world, but also to solve puzzles or challenges in order to overcome certain obstacles that will be set up on the road.

It is composed of two apps: a web application and a mobile application.

Context
#

This project was made as part of my third-year diploma in Computer Science. As a team, we had to develop a full stack application, as if it was ordered by some kind of customer. We were free to work on the project however we wanted. The main element of the specifications was as follows:

Following a catastrophic report by Santé Publique France on the physiological state of students in France, the Ministry of Health wants to create an application to motivate youngs to do sports.

The idea was to design an application that allows you to run a race in a virtual world. In order to progress in the virtual race, it is necessary to run or cycle in the real world, but also to solve puzzles or challenges in order to overcome certain obstacles that will be set up on the road.

Our team
#

Languages and Technologies
#

  • Web app: TypeScript with ReactJS
  • Mobile app: JavaScript and TypeScript with React Native
  • API: Java with Spring Boot

Software versions
#

Software/frameworks and their versions that need to be installed on the developer computer or production server for the apps to work. This project is getting quite old, so a lot of these are out-of-date, and should not be used in production. You’ll receive a lot of deprecation warnings, but you can ignore those.

  • JDK 11 (Java Development Kit)
  • NodeJS v16.12.0
  • Yarn v1.22.10

For more information on the different technologies used, see: Architecture.

How it works?
#

Run4Exp is a gamified sports app. When a user downloads the application, it is presented with a list of “challenges” from which it can choose. The user can complete a challenge in 3 different ways: by walking, running or biking.

The “gamification” part of the application comes from the fact that from the POV of the application, you’re not running in the real world, but within a virtual world. This virtual world will present you with some challenges to complete on your path to the “finish” line. These challenges can be of different types:

  • A question related to the virtual world (for example, if the player is running within a virtual world representing the Skyrim universe, it will get questions about this world).
  • A quest: the player needs to get to a certain location within the virtual map (which means that it needs to perform a certain amount of km by either running, biking or walking). When the quest is completed, the player can continue the main path

Different things can happen depending on a user answering a question correctly. For example, it can go back to the start of a section, or it will be forced to take a longer path…

Each user is competing against others, and the data gathered by the application is used to display different kinds of statistics to the user with the idea of motivating him to continue doing sport.

Mobile Application
#

The mobile application must be used whenever the user is walking, running or biking. It is used to measure the user’s progress in the real world, and transcribe it to the current challenge. A user can use the app to register for a challenge, see its progress on it, and its overall progress.

Demo videos
#

This shows an example of a user going from the start to the end of challenge (speeded up and artificially done for demonstration purposes).

This shows a user progressing through a challenge by choosing a path and answering a question

Web Application
#

The web application has two purposes:

  • Like on the mobile application, the user can choose a challenge to register, display its overall progression as well as some statistics on its progression.
  • It is also used by “challenge creators.” A challenge creator, is a user that creates the challenge, and places on a map the different checkpoints, questions or quests a user will need to do. Multiple creators can work on the same challenge (not in real time, we did not have enough time to do that).

Demo videos
#

How can a user register to a challenge?

Creation of a new challenge

Add a collaborator to a challenge

Publish the challenge to the public

Developer documentation
#

You will find the developer documentation for the different parts of the project below.

Set up a development environment
#

Clone this Git repository using either the HTTPS or SSH link.

HTTPS

git clone https://gitlab.com/Deewens/Run4Exp.git

SSH

git clone git@gitlab.com:Deewens/Run4Exp.git

API and database
#

Requirements: a MySQL server with a database already created, and the Java Development Kit version 11.

  1. Install Java JDK 11 (it won’t work with a greater version), don’t forget to set up the JAVA_HOME environment variable and verify that the java command is accessible from the path.

  2. If not done already, install a MySQL server on your development machine (Don’t forget to create a new database/schema, but leave it empty, the API will generate all the tables by itself)

  3. Set up the required MySQL parameters in /backend/src/resources/application.properties so the API can connect to it

spring.datasource.url=jdbc:mysql://<DatabaseURL>/<DatabaseName>
spring.datasource.username=<MySQL Username>
spring.datasource.password=<MySQL Password>
  1. Inside a terminal, go to the backend directory and start the Maven job. There are some issues with the unit testing; they are failing for some reason, so use -DskipTests.
cd backend
# Windows
.\mvnw.cmd spring-boot:run -DskipTets

# Linux
./mvnw spring-boot:run -DskipTests
  1. The server should be running and be accessible from http://localhost:8080/api.

Web Application
#

Requirement: NodeJS 16 needs to be installed

  1. Open a terminal inside the webapp directory, and type npm install
  2. Edit the .env file with the correct API URL
  3. To start the development web server, type npm run start

Mobile application
#

Requirement: NodeJS 16 needs to be installed with Yarn v1.22.0

  1. Open a terminal inside the android directory
  2. Download expo-cli with the command npm install -g expo-cli.
  3. Create an expo account if you don’t have one
  4. Type expo login and connect using your expo logins.
  5. Type yarn install
  6. Edit apiUrl constant inside src/utils/const.js with the correct API URL (Don’t forget that by default, if you run the React Native app directly on your mobile device, you can’t use “localhost”, you need to use the local IP address of your computer, you can see it in the Expo dev webpage or just type ipconfig in a terminal.)
  7. Launch the development server with expo start or yarn start.