This project aims to display data from the SpaceX API in an accessible, informative and interactive format.
Own Objectives:
- Learn to code in collaboration.
- Make something with my data visualization's skills.
- Improve my skills in React
Site Objectives:
- Present SpaceX's launch data in an intuitive and fun way.
- Promote interest in SpaceX's activities.
User Needs:
The target audience is SpaceX and space enthusiasts. Users should be able to:
- Interact with SpaceX's launch and payload data.
- See images, external video links relating to each launch.
- Find out about future launch details.
- See location of launch pads.
| Opportunity/Problem | Importance | Viability/Feasibility |
|---|---|---|
| A. Display launch data to the user | 5 | 5 |
| B. Allow interactive filtering of data | 5 | 5 |
| C. Display underlying filtered data in a table | 4 | 5 |
| D. Promote interest in SpaceX's future activities | 3 | 3 |
- CSS3 : used for styling all the components of the page.
- React : used for programming with a component logic, and make it easier to maintain/debug my code.
- ChartJS : a very useful framework to draw common graphs.
- react-leaflet : used for displaying launchpad's location in map.
- VSCode : preferred code editor for web app.
- W3C Validator : used to validate HTML & CSS.
Extensive manual testing was conducted to ensure the site functions and looks well on all major browsers (Chrome, Firefox, Safari, Edge) and device sizes.
The following manual tests passed:
| Test No. | Test Name | Result |
|---|---|---|
| 1 | Launch dashboard can be filtered and unfiltered on graph segment click | PASS |
| 2 | Any filter applied within a dashboard group updates all other graphs in that dashboard group (ie in Launches or Payloads groups) | PASS |
| 3 | No excessive amounts of text | PASS |
| 4 | All navigation links smooth scroll to correct section | PASS |
| 5 | All text is readable and appropriate size | PASS |
| 6 | All external links work and open in new tabs (target="_blank") | PASS |
| 7 | Add Launch to Calendar button fires with correct parameters | PASS |
| 8 | Page and graphs do not take excessive time to load and render | PASS |
The following tests failed:
| Test No. | Test Name | Result | Issue |
|---|---|---|---|
| 1 | All charts are appropriately sized for each device (Mobile, Tablet) | FAIL | On mobile devices, table overflow maximum width size |
| 2 | Correct display of content | FAIL | The range of the graph of launch results, is display outside its container |
The site was deployed automatically on codesandbox
The underlying data for all charts is sourced from the SpaceX API, using the following endpoints:
- Launches: https://api.spacexdata.com/v4/launches
- Landing Pads: https://api.spacexdata.com/v4/landpads
- Rockets: https://api.spacexdata.com/v4/rockets
Thanks to Ryan Tankeng, for his help during the development. Also, thanks to friends for helping with the UX testing.