Earthquakes Map Visualizer

This is a web app showing earthquakes that happen in the world for a specific range of time. The data is obtained from the USGS and displayed on a map with detailed information.

NOTE: This projects is just a frontend development and uses the USGS API to access to all the data. Therefore, the app loading speeds depend mostly from this API availability (from 0.5s to 30s in my tests). It is recommended to make small queries to reduce load times (not many days in range).

You can see this project deployed at here

Features

• LocalStorage to save position on map and latest filter properties
• Color coded earthquakes
• Page animation on load
• Collapsible filter panel
• Toast notifications from API errors

Index

• Earthquakes Map Visualizer
  • Features
• 🚀 Getting Started
  • Requirements 📋
  • Installation 🔧
• 🦴 Project Structure
  • Folder structure 🗂
• 🧭 App navigation
  • Map view 🗺
  • Detail view
  • Not found 🚫
• ✨ Wishlist and decisions made
• 🕵️‍♂️ Resources
• 🖇️ Contributing
• ✨ Contributors

🚀 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Requirements 📋

You need to have NodeJs installed. If you don't have Yarn already need to install it globally: npm install --global yarn

Once you have installed these programs, you need to create an account for: Mapbox

Installation 🔧

First, you will need to clone or fork the repository into your Github account:

$ git clone https://github.com/mhfortuna/carto-frontend-test.git

Then run yarn install in the base folder yarn install

When you have all the dependencies installed you need to create an .env file located in the root of the project with the following content:

REACT_APP_MAPBOX_ACCESS_TOKEN= {your mapbox API key}

🦴 Project Structure

Folder structure 🗂

  
├───.github     // Github actions config files 
├───public
└───src
    ├───api	//Call to external APIs 
    ├───assets
    ├───components
    ├───constants
    ├───pages
    └───utils	// Multipurpose code 

🧭 App navigation

Map view 🗺

In this view, the application shows the map with the earthquakes that match the selected range of time. The markers display a bigger radius and darker color with the earthquake magnitude. If the color is in a blue tone, it means the earthquake wasn't reviewed, if it is a red tone, it was reviewed. To change the range of time, first modify the dates and after that click on "Filter". When updating this data some time is needed. When clicking on a marker a details panel is displayed. To display more information the user has to click on "See details" and the app shows the details view

Detail view

In this view, the user can see most of the API's data of the specific earthquake

Not found 🚫

Due to SEO stats, this app also has a not found page that shows up every time the user tries to enter an unexistant page.

✨ Wishlist and decisions made

• Search bar: The API doesn't have a proper endpoint for search, therefore it isn't very efficient to search in the frontend.
• More filters: The main issue here is that when adding more parameters to the queries, the queries are a lot slower at the moment of the development. Event the request by ID can take more than 30 seconds to load. You can see these times at the browser devtools, filter by Fetch/XHR.

🕵️‍♂️ Resources

• Deck.gl
• Eslint
• Formik
• Framer-motion
• PostCSS
• Prettier
• React
• React Router
• React-icons
• React-toastify
• Tailwind
• Yup

🖇️ Contributing

If you want to contribute, please fork the repository, create a new branch whit your contribution, and push the branch as a pull requests.

✨ Contributors

Mathias Fortuna 💻

This project follows the all-contributors specification. Contributions of any kind welcome!