Rockets of the Galaxy is a chrome extension that bring widgets on your browser to know about the next rocket launching and their crew!
By quoting Chrome documentation, "Extensions are software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences".
This system, along with other methodologies such as Accessibility, and modern web application development, help us to bring data from Rocket launches through a daily basis using a favorite tool such as the Browser.
Since Crew members play a crucial role in the success of a crewed mission, our goal is also to highlight them as part of the widgets in the app extension.
Our chrome extension can be easily installed from communal libraries to schools' computing labs to inspire kids and students with the crew members biography and role on each mission and allow them to interact with these heroes of the galaxy through their social network.
Teachers can also use this tool and its widgets component as inspiration for storytelling at the classroom.
Rockets of the galaxy aims to share how the past events brought knowledge to the present and hope for the future expeditions!
Our Stack was based in the following web technologies:
- React JS
- HTML 5
- CSS 3
We used the following chrome extension documentation to build our integration:
- API extensions https://developer.chrome.com/extensions/api_index
- manifest.json https://developer.chrome.com/apps/manifest
We also used Node module to build our web application:
- "react": "^16.4.2",
- "styled-components": "^4.0.2",
- "webpack": "^4.16.5",
- "webpack-dev-server": "^3.1.5"
Some of the SVG used in our UI are from:
We worked using a GIT flow methodology to collaborate while coding the challenge.
our code was pushed to a GitHub repository https://github.com/meligatt/rockets-galaxy-2
One of our problems was to retrieve in a short time the ideal data source to feed our widgets, to sort this out.
To move forward, we based our custom JSON file with data taken from the NASA.gov website, in launches and landing section.
Throughout the hackathon, we had to rearrange our JSON structure many times to suits our Agile development process.
Another challenge was to learn how to create a browser-extension app from scratch, and how to integrate this approach to our client-side app.
Also, we needed a particular behavior for our created extension, that is to bring data on every “new created tab” in the browser, to solve this, we started from small steps first, getting familiar with the manifest.json file structure so adding later a more complex config was less confusing.
With the time given, we were able to generate an extension for Chrome (desktop version), although our goal is to replicate this steps for other browsers such as Firefox and Edge, and also Mobile.
We had to make sure that the performance on loading data via the extension was high, for this we had to make sure that the compiled code was correct according to the chrome rules.
SpaceApps is a NASA incubator innovation program.