AuroraX

For the AuroraX, project we were tasked with developing a modern visualization to display collected aurora data from an API endpoint managed by the University. To accomplish this goal we worked with a stack utilizing Node.js on the back-end which produced a GraphQL endpoint from the existing API. This allowed the team to restructure and compress incoming data. The compression of data from the existing API was essential to make requests on the client side performant and allow playback of the existing time series data.

Development

On the frontend the visualization was built with a pairing of React and three.js for the interface and Apollo for managing GraphQL queries. Through the use of react-three-fibre we were able to maintain an efficient and modern framework for the application that gained the state management and efficient render methods of React while also having a robust and customizable 3D viewer in the application.

The first of these was the introduction of satellite and ground-based instrument data in the second phase of the project, again through the utilization of an API endpoint provided by the University. With the existing structure of the first phase, minimal refactoring was required to allow the interface to support the new datasets.

As part of a third phase of the project, the application was moved towards being more data-agnostic, in particular, our application no longer managed loading and revising data as part of a GraphQL Apollo back-end and instead, this was handled directly by the University of Calgary. This allowed our application to focus on the 3D visualization aspects as well as providing a robust set of options for users to filter, select, and modify displayed data.

Deployment

This project is unique in that our client was knowledgeable in development and deployment processes and for that reason, our deployment structure was simplified. The end project was delivered to the client as source code and a runnable package. In the first and second phases documentation was provided to simply run the Node.JS service using Nodemon or a variety of other runner options.

In the third phase of the project with all server-side logic being moved to other API endpoints managed by the client we moved to a plain HTML/JS bundle. This bundle was provided to the client to deploy to any static asset host of their choosing. This reduced development overhead and allowed us to iterate quickly.

Additionally, as a part of the internal process for every project, we also provided a Docker image to the client, in case the deployment pattern on their end ever changed in the future.

Skills: React, Express, GraphQL, react-query, Docker