Information System (GIS) where you can combine and monitor various types of geodata.
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.
π Demo online (vercel)
Demo API keys with limitations are included in the repository (src/api/api.js). You can generate your own keys here. Open the live application - GeoInfo.
βββ 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
-
- UI(React), BLL(Redux), DAL(Redux-Saga).
-
- Custom build system based on webpack + Babel, with the ability for gradual TypeScript integration.
-
- For styling, I used sass. To customize the scrollbar, I used react-perfect-scrollbar. For convenient class name combination, I integrated the classnames.
-
- 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.
-
- For routing implementation, I used the react-router-dom library.
-
- 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).
-
- For working with maps, I used the Leaflet library Leaflet.
-
- 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.
-
- Satellite imagery
- General Staff map
- Bicycle routes
- Transport routes
- Tourist route map
- Railway map
- NASA Nighttime Imagery Map
-
- Real-time air pollution
- Rainfall
- Air pressure
-
- Adding markers
- Storing an array of markers
You can run the application on your local development environment in 5 minutes by following these steps:
-
Install Node.js download.
-
Install Yarn download.
-
Clone repository .
-
Install dependencies .
Open CLI in aplication folder and set up in a single command:
yarn install
-
Start aplication in development mode .
Set up in a single command in CLI:
yarn start