Grenvals/GeoInfo

Geographic information system(GIS) where you can combine and monitor different geodata.

GeoInfo

Geographic information system(GIS) where you can combine and monitor different geodata.

Review

Geographic information system(GIS) where you can combine and monitor different geodata. Display geodata from SpaceX and NASA, the position of satellites(Starlink), ISS. Topographic maps, air pollution, atmospheric parameters, and more.

🌎 Demo online (vercel)

В репозиторії залишені демо ключі API(src/api/api.js) з обмеженнями, тут ви можете згенерувати власні. Додаток онлайн - GeoInfo.

📂 Folder structure

  ├── dist                      /* generate build in production mode
  └── public                    /* static files
  |     ├── index.html          /* change title and static html here
  |     └── favicon
  └── src 
  |     └── assets              /* images, fonts, additional files
  |      ...   
  |     ├── components          /* react components  
  |          └── common         /* reusable react components       
  |     ├── hooks               /* custom react hooks        
  |     └── store               /* store  
  |          ├── api            /* api
  |          ├── sagas          /* redux-saga generators
  |          ├── actions        /* actions 
  |          ├── constants      /* constants 
  |          ├── reducers       /* reducers
  |          ├── selectors      /* selectors
  |          ├── state          /* initial state
  |          ├── types          /* typescript types
  |          └── store.js       /* create store         
  |     ├── scss                /* general style, reset & normalaize
  |     ├── utils               /* utils, handlers
  |     ├── App.js              /* general component, router
  |     └── index.js            /* app starts here ;)
  |      ...
  ├── .babelrc                  /* babel config
  ├── .eslintrc                 /* eslint config
  ├── .prettierrc               /* prettier config
  ├── package.json              /* dependencies
  ├── webpack.config.dev.babel  /* webpack config for development
  ├── webpack.config.prod.babel /* webpack config for production
  └── .gitignore                /* ignore folders & files
   

💻 Technology stack

• ARCHITECTURE

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

• Shell

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

• LAYOUT

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

• STORE

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

• ROUTE

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

• API

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

• MAPS

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

💻 FUNCTIONAL

• SPACE

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

• MAPS

  • Супутникові знімки
  • Карта генштабу
  • Велодороги
  • Транспорт
  • Карта туристичних маршрутів
  • Карта туристичних маршрутів
  • Карта залізниць
  • Карта нічних знімків NASA

• LAYERS

  • Супутникові знімки

• MAPS

  • Забруднення повітря в реальному часі
  • Осадки
  • Повітряний тиск

• МАRKERS

  • Додавання маркерів
  • Зберігання масиву маркерів
  • Фільтрація маркерів за категоріями

🚀 Getting Started (development)

###Demo online

You can run aplication on your local dev environment in 5 minutes with these steps:

1. Install Node.js download.

2. Install Yarn download.

3. Clone repository .

4. Install dependencies .

   Open CLI in aplication folder and set up in a single command:

   yarn install
   

5. Start aplication in development mode .

   Set up in a single command in CLI:

   yarn start
   

📷 Screenshots