GeoInfo

Geographic Information System (GIS) where you can combine and monitor various types of geodata.

Video review

Application

Geographic Information System (GIS) where you can combine and monitor various types of geodata. It displays satellite positions, topographic maps, air pollution levels, atmospheric indicators, and more. I’ve set a few goals for myself: to try out Redux-Saga, work with maps (Leaflet), use the geolocation API, and get familiar with TypeScript.

Functional

• Space

  • Display of the Starlink satellite array (updated every 10 minutes), coverage areas, the number of satellites launched into orbit, and detailed information about each satellite.
  • Real-time tracking of the ISS, its past trajectory, and visibility zones from Earth.

• Maps

  • Satellite imagery
  • General Staff map
  • Bicycle routes
  • Transport routes
  • Tourist route map
  • Railway map
  • NASA Nighttime Imagery Map

• Layers

  • Real-time air pollution
  • Rainfall
  • Air pressure

• Маrkers

  • Adding markers
  • Storing an array of markers

Technology stack

• Architecture

  UI(React), BLL(Redux), DAL(Redux-Saga)

• Build system

  Custom build system based on webpack + Babel, with the ability for gradual TypeScript integration.

• Layout

  For styling, I used sass. To customize the scrollbar, I used react-perfect-scrollbar. For convenient class name combination, I integrated the classnames.

• Store

  For storing the global state of the application, I traditionally used redux with react-redux. I tried using hooks instead of the connect function. On one hand, this eliminates the need to wrap components in HOC (connect hell), but there are some drawbacks. The first is that we directly use dispatch. Additionally, by loading components with external actions, we break the clean functions paradigm of SOLID. Also, unlike the optimizations with connect, useSelector doesn't prevent component re-renders even if the props haven't changed, which forces us to use React.memo. When passing a callback with dispatch to child components, it needs to be wrapped in useCallback to prevent unnecessary re-renders.

• Routing

  For routing implementation, I used the react-router-dom library.

• API

  To be able to create asynchronous actions and handle side effects, I integrated redux-saga. I used the SpaceX API v4 and NASA API (ISS).

• Maps

  For working with maps, I used the Leaflet library Leaflet.

Github

Contacts

• If you have any questions or proposals, please feel free to message me 🙂.