GeoInfo

Геоінформаційна система, де ви можете комбінувати та спостерігати за різними геоданими.

Відео огляд

Додаток

Геоінформаційна система, де ви можете комбінувати та спостерігати за різними геоданими. Відображення положенння супутників, топографічні карти, забруднення повітря, атмосферні показники та інше. Поставив для себе декілька задач: cпробувати Redux-Saga, попрацювати з картами(Leaflet), заюзати api геолокації та познайомитись з TypeScript.

Відкрити додаток Github

Функціонал

Супутники
- Відображення масиву супутників Starlink(оновлення кожних 10хв), площі покриття зв'язком, кількість виведених на орбіту, детальну інформацію про кожний супутник.
- Відображення МКС в режимі реального часу, пройденої траекторії, зони видимості з землі.
Карти
- Супутникові знімки
- Карта генштабу
- Велодороги
- Транспорт
- Карта туристичних маршрутів
- Карта залізниць
- Карта нічних знімків NASA
Шари
- Забруднення повітря в реальному часі
- Осадки
- Повітряний тиск
Маркери
- додавання маркерів
- зберігання масиву маркерів
- фільтрація маркерів за категоріями

Технології

Архітектура

UI(React), BLL(Redux), DAL(Redux-Saga)
Система збірки

Збірка на основі webpack + babel, з можливістю поступової інтеграції TypeScript.
Розмітка і стилізація

Для стилізації використовував sass. Для кастомізації скролбара використовував react-perfect-scrollbar. Для зручного комбінування класів підключив бібліотеку classnames.
Місце зберігання даних

Для зберігання глобального стану додатка використовував традиційно redux, react-redux, щоб зручно використовувати redux всередині react. Спробував заюзати замість connect хуки. З однієї сторони це знімає необхідність обгортати компонент в HOC(connect hell), але є свої мінуси. Перший - ми використовуємо dispatch напряму. Також ми навантажуючи компонент сторонніми діями, ламаємо парадигму чистих функцій SOLID. Також useSelector на відміну від оптимізацій connect, не зупиняє ререндер компонента, навіть якщо props не змінились, що змушує використовувати React.memo. При передачі callback з dispatch дочірнім компонентам потрібно обгортати в useCallback, щоб компоненти не ренедерились без необхідності.
Маршрутизація

Для реалізації роутинга використав бібліотеку react-router-dom
Взаємодія

Для того щоб мати можливість створювати асинхронні action, сайд ефекти, підключив redux-saga. Використав доступ до SpaceX API v4, NASA API(ISS).
Мапи

Для роботи з картами використав бібліотеку Leaflet.