Skip to content

jdmedlock/meteorite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Meteorite - Explore meteorite strikes

Meteorite App

meteorite last commit
Packagist

Screenshot

Table of Contents

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.

React Component Structure

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

About

Explore Meteorite Strikes using the Nasa Open Data Portal

Resources

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published