Out of Orbit

Click here to access the hosted game.

Out of Orbit is a space exploration game in augmented reality.

It was designed and built by us as part of our final project phase on the Northcoders software development bootcamp.

The app is intended for young children to learn about the various planets and space technology in our solar system and to earn badges as they demonstrate their knowledge about each. Along the way, space is brought to life in front of their eyes through the use of augmented reality technology.

Tech Stack

Frontend: React, A-Frame, AR.js, HTML, CSS, SCSS, Bulma, Leaflet.

Backend: Node, Firebase, Axios.

Local Development Setup

The guide below will give you all the setup information you need to view this project 'behind the scenes'.

Pre-requisites

• Ensure you have git installed on your local machine

  Follow this link to download the latest version.

• Install Node.js which acts as the runtime environment for this project. This should also install npm to manage all of the dependencies required.

  Follow this link to download Node.js with npm.

  Minimum version recommended: Node v16.8.0

Clone Repository

To clone the repository for access on your local machine, run the following command in your terminal:

git clone https://github.com/kapppa-joe/space-app-frontend.git

Install Dependencies

Navigate to the project directory and run the following command in your terminal:

npm install

This will install all necessary dependencies used in the project, such as React, Firebase, and Bulma.

Run Locally

To run the website on your local machine, run the following command in the terminal:

npm start

The website should then load in your browser.

When this command is running, the website should also be locally accessible through this link:

Click here to access the local website.

Contributors

This app was designed and built by:

• Daniel Beale
• Richard Crankshaw
• Joe Fong
• Mateusz Pogrzebski
• Rachel Taylor

Credit / Acknowledgements

• 3D models of the solar system and factual information were sourced from NASA

• Many of the space-themed graphics were sourced from Freepik

• Many icons used in this app were sourced from Font Awesome

• Custom AR marker pattern generated with AR.js Marker Training, based on rocket icon sourced from Ionicons

• Starry background in 3D view was based on handeyeco/aframe-star-system-component with some customization

• Gesture handling and camera orbiting in 3D/AR view were based on fcor/arjs-gestures and tizzle/aframe-orbit-controls-component