COSMIC is a suite of web applications surrounding inventory management of the spacesuit. I work on these projects on an ongoing basis in my role as Frontend Engineer with MRI Technologies.
Spacesuits are complicated but they need to be reliable and safe. To that end, NASA and its contractors have procedures and processes in place to ensure that the suits are assembled properly and that parts are where they are supposed to be when they’re supposed to be there and in the state they need to be in.
I can’t offer too many screenshots as the applications are internal and contain some sensitive information but I can talk a little about their functions and their tech stacks.
The COSMIC logo
But first, in the way of visuals, I had an opportunity to do a bit of design work and make a logo for COSMIC. Anyone who follows me knows I love both design and programming and although I’m better at the latter I like to partake in a bit of design when I get a chance.
I did a lot of exploration with type. The goal was to have something minimal but interesting. I landed on the possibly-overused-but-I-don’t-care-it’s-awesome typeface, Proxima Nova by Mark Simonson Studio. I couldn’t pass up the space reference. Proxima Nova also has a clean geometric look and feel that was well suited for this purpose. Its capital letter “O” is so round that I was able to sub it out for an actual circle stylized as a ringed planet (I’m trying to make the nickname “Cosmicon” catch on) and it looked right at home.
Here are some variations of the final logo.
The COSMIC application
COSMIC is a data intensive application that revolves around the concept of hardware. Hardware can take the form of a high level specification like a drawing, or it could be a specific piece of inventory that has been assembled a certain way for certain purpose, or various stages in between.
“Hardware,” in general, can be thought of as the center of the wagon wheel of COSMIC and various other entities form the spokes around it. A piece of hardware can be part of an activity like an inspection. That inspection could produce a document like a discrepancy report. A piece of hardware could be used as part of an event like a spacewalk. An event can happen at a particular location. Information about many pieces of hardware could be aggregated into a report for management. Activities, Events, Documents, Locations, Reports—COSMIC manages these types of entities and more.
Its biggest feature is how it relates all the data together and shows you information that is relevant to you at the time, with lots of ways to see the data from other perspectives.
COSMIC also includes some smaller, separate-ish apps. In particular, the On Orbit Tracker, which manages data about hardware on the ISS and the related events, activities, and reporting that goes along with that.
The tech stack
Some of the smaller apps use different stacks but I will discuss the main COSMIC application here. And mostly the frontend since that’s what I understand best. It uses:
- Google Cloud Platform for infrastructure (I could provide more details here if I understood them1)
- Postgres and GraphQL for the database and API
- Apollo as the frontend data layer
- Vue 2 and Vuetify for the frontend UI
- TypeScript for the frontend language
Some of this tech was new to me when I started in 2019 so it has been fun learning and getting better at it.2 COSMIC is a large application and goes way beyond the obligatory todo list examples that you see in webdev tutorials. It has been interesting working with these technologies at an enterprise level and discovering some of the bottlenecks as we push some of these technologies to the limit (looking at you, webpack).
In many ways it feels like we’re just getting started, so I’m looking forward to continuing to improve and expand the system.
I may update this page in the future with any big developments.