Skip to content
Marcelo's Case Studies

1SpaceX

Creating a web app that helps you to find all the information about SpaceX components.

Introduction permalink

SpaceX is a private American aerospace manufacturer and space transportation services company. Many of the phyisical components of SpaceX (rockets, capsules and more) are available in the SpaceX API. What about a website that helps you to find all the information about SpaceX components?

Introducing 1spaceX.

What is 1spaceX? permalink

1spaceX is a web app that helps you to find all the information about SpaceX components. You can find information about the capsules, cores, launches, payloads and rockets.

Software Information permalink

  • Project technology: React, Bootstrap, SpaceX API, Vercel
  • Industry: Space Exploration
  • Work Duration: ≈2 months
  • Accessibility WCAG: AA (2.0)
  • Version: 7.4

Features permalink

  • Search engine for all the physical components
  • Information about the physical components
  • Installable on mobile devices
  • Fully responsive
  • Reduces network requests by storing the data in the state
  • Usage without sign up

Development Process permalink

1spaceX works with the SpaceX API, using React and Bootstrap.

The web app is totally responsive and it has a page for each physical component like: capsules, cores, launches, payloads and rockets.

Creating the first page: Capsules permalink

This project started with the idea of creating a web app that helps you to find all the information about SpaceX Capsules. A capsule is a spacecraft designed to carry a crew or a payload into space and return it safely to Earth.

The first page I created was the capsules page. With a search bar and the cards associated to the capsules as the result of the search.

Adding more pages permalink

The process of requesting and filtering the data from the API was the same for all the components. So, I decided to create a component that could be reused for all the components. This phase of the app was quite simple, I just had to create a new page for each component and add the component to the App.js file.

Reducing network requests permalink

The first version of the app was requesting the data from the API every time the user search on the app. This was not a good practice, so I decided to request the data only once and store it in the state of the app.

In this way, the app requested the data only once, and then everytime the user search, the app filtered the data from the state.

Updating React to version 18 permalink

The first version of the app was created with React 15. With Class components and the componentDidMount lifecycle method. I decided to update the app to React 18, using Functional components and hooks.

License permalink

The source code of 1SpaceX is distributed under the MIT License.

References permalink