Demo Application

Look at how to integrate the NASA APIs in a React application.

Now that we understand NASA APIs, we can use these APIs in an example application. We'll use the following NASA APIs in our application:

  • Asteroids NeoWs

  • EONET

  • Mars Rover Photos

  • APOD

Application workflow

Let's look at the application workflow from the user's perspective:

  • At the start of the application, we see the homepage. This page has the Astronomy Picture of the Day and a navbar that we can use to navigate to other pages.

  • The events page presents a table containing all the available events categories. The last column provides a link to see information about all the ongoing events for that specific category.

  • On the asteroids page, we get information about the asteroids closest to Earth today in tabular form.

  • The Mars rover photos page provides images captured by the rovers. By default, it shows images captured by the NAVCAM of the Spirit rover. We can look at the images captured by other cameras and rovers by selecting other rovers and cameras from the drop-down lists on this page.

Demo application

The widget below contains the code for our application. Click the "Run" button to run the application.

Get hands-on with 1200+ tech skills courses.