Meteor Mapper is an online data visualization tool built in React, utilizing NASA's API to showcase recorded meteorite landings worldwide. It was developed as a mini-app during the front-end section of my Northcoders Software Engineering Bootcamp to help with learning React, third party library access and APIs.
View a live demo here: https://meteormapper.netlify.app/
- Mapping: Utilizes React Leaflet for interactive mapping.
- Filters: Enables filtering by meteorite class and observed fall.
- Sorting: Provides options to sort meteorites by name, year, class, and mass.
- Reset: Allows resetting filters and sorting options to default.
- Loading Indicator: Displays a spinner during data loading.
- React with Vite
- React Leaflet
- Axios
To run the application locally, follow these steps:
- Clone the repository.
- Install dependencies using
npm install. - Start the development server with
npm start.
- Toggle Observed: Toggle between observed and fell meteors.
- Filter by Class: Select a specific meteorite class to filter results.
- Filter by Year: Filter meteorites by the year of observation.
- Sorting: Choose sorting criteria from the dropdown menu.
- Reset: Reset all filters and sorting to their default state.
The List component manages the list view of meteorite data. It includes:
- Filters for class, year, and observed fall.
- Sorting options for name, year, class, and mass.
The Map component displays meteorite landings on an interactive map using React Leaflet. It includes:
- Custom markers for observed and fell meteors.
- Popup details for each meteorite.
Meteor Mapper was developed collaboratively with during a software development bootcamp using pair programming techniques. It integrates multiple React components to achieve seamless data visualization and interaction.
Feel free to explore and contribute to enhance Meteor Mapper!