Meteorite - Explore meteorite strikes

Meteorite App

Table of Contents

• Overview
• Usage
• Dependencies
• Application Structure
• FAQ
• Change Log
• Contributing
• Authors
• License

Overview

This app provides its users with the ability to explore meteorite strikes across the globe by searching the Meteorite Landing dataset on the Nasa Open Data Portal.

This application was built to support the Medium article "How to use Profiling & Baselining to Boost Performance & Reliability". As such, it has been important to preserve the state of the application at each point in its evolution. The following branches are key to achieving this goal.

• master - Same as feature/05-cache-control
• development - Same as feature/05-cache-control
• gh-pages - The host used for testing. At any step in the development and performance tuning cycle changes made to any branch can be deployed here for testing and measurement.
• feature/01-initial-app - The initial untuned application.
• feature/02-service-worker - Addition of a service worker for offline caching
• feature/03-pagination - Addition of pagination to the Meteorite Landing table
• feature/04-debounce - Reduction of the wait time in the call to Lodash debounce
• feature/05-cache-control - Correct cache control policy and request chain diagnostics in Devtools Performance Audit

Usage

UI Features

Meteorite landings are displayed in alphabetical order of the name of the landing location. Users may scroll through the list of landings, or use the search box to search for a names that include the entered search term. Searches are case independent.

The results list can be reset to it's original contents by clearing the search box and clicking the 'Search' button.

Starting & Building the App

To start the application in development mode simply run npm run startfrom the command line. The application will automatically open a new tab in your browser with the url localhost:3000.

To start the application in production mode run npm run serve from the command line. In production mode the app will automatically create a new browser tab with the url localhost:5000. The main difference between production and development modes is a Service Worker runs in productin mode to support offline execution.

The production version of the app on GitHub Pages is built by running npm run publish.

Environment Variables

Environment variables that control the operation of the app are defined in the .env file in the application root. These variables and their usage are shown in the following table. It's important to keep in mind that when these settings in the .env file are changed npm run build must be run before they will take effect.

Environment variables maintained in the .env file are made available to the application code via process.env.<variable-name>. For example, the homepage for the meteorite landings data is accessed in the code by referencing process.env.REACT_APP_METEORITE_LANDING_HOMEPAGE.

Remember that even though this keeps secure tokens like client id's and secrets out of application code it does not make them secure.

Environment Variable	Description	Example Setting
REACT_APP_METEORITE_LANDING_HOMEPAGE	Nasa Meteorite Landing homepage	N/a
REACT_APP_METEORITE_STRIKE_DATASET	URL for JSON dataset	N/a

Dependencies

Libraries

This app has the following dependencies

Module/Library	Environment	Description	Related Files
@material-ui/core	Development	Material Design React components	N/a
@material-ui/icons	Development	Material Design React components	N/a
gh-pages	Runtiime	Publish to GitHub Pages	N/a
lodash.debounce	Runtime	_debounce text input	N/a
prop-types	Runtime	Type checking for props	N/a
react	Runtime	UI Library	N/a
react-dom	Runtime	DOM renderer for React	N/a
react-scripts	Runtime	scripts and configuration used by Create React App	N/a

In addition to these libraries, which the app explicitly depends on, Create React App includes other libraries such as Babel and Webpack. For more information about Create React App and it's dependencies consult its documentation.

External Dependencies

In addition to libraries Meteorite Explorer also depends on webservices to provide with details about places. The Meteorite Landing dataset site contains the detailed data about meteorite landings required by this app.

Application Structure

The component structure of the Meteorite Explorer application is shown in the following diagram.

Frequently Asked Questions

TBD

Change Log

For more information see Change Log

Contributing

See Contributing and our Collaborator Guide.

Authors

Developers on this project can be found on the Contributors page of this repo.

License

MIT