StarMapDB
Star Citizen published a web application, StarMap, that allows users to view a map of all the different star systems and planets in their game Star Citizen. Think of it like a 3D Google Map for a universe.
Using the backend data from StarMap, I built a web application that displays the data in a table format so that the user can easily sort and compare all the records.
TECH STACK
- React.js
- Node.js
- MongoDB
- Bootstrap
- jQuery
- DataTables
// The Problem
View the Data
While using Cloud Imperium's StarMap, I found myself wondering how many of the planets were marked as habitable. Unfortunately the StarMap was designed to be a map, not a database. This meant I would have to click into hundreds of planets to see their details to find out which are habitable. I decided to design and build my own app that allows users to query and view the raw data behind the StarMap instead.
// The Needs
It's all about the Data
The first and most importantly, the application needs to access the Star Citizen's StarMap data calls. Then the data would need to be stored in a way that could be referenced by entity type. Finally, the data would need to be displayed in an interactive table. A classic web app senario.
Parse
The data used by Cloud Imperium's StarMap needs to be parsed. I was able to find a series of backend web calls that were used to retrieve data.
Store
Since the data calls from the StarMap were structured to follow its own interaction paradigm, it was not conducive to querying by entity. So the parsed data would need to be stored together in a database.
Display
The data would need to be displayed in an interactive table that allows users to search and sort it.
// The Solution
Tech Stack
For this app I chose to use MongoDB for my backend due to its ease to use with JavaScript programming languages and growing popularity. I chose to use Node.js as a backend for similar reasons. It also has the added benefit of not making me switch languages while developing. DataTables made a perfect front end solution for displaying the data.
// Highlights
// Hurdles
An Apostrophe
While setting up the code in Node.js to parse the StarMap data calls, I ran into an issue that left me perplexed. After turning to stackoverflow, I realized that it was due to a simple apostrophe.