This project is a DEMO to track ISS Live Position and look for photos of the major cities around that position. This document describes the Components, Methods and APIs used within the app.
ISS LiveLocation Tracker ReactJS to build the User Interface and Webpack to compile, build and optimization for Dev and Prod environments. The Demo App is available in DEMO ISS Website.
The App prints a Marker within a Google Map using the current ISS Position and search Photos (in following releases will fetch videos too) from the Cities nearby to ISS position within a 600km2 area and show them in a Gallery below the map. It shows a Reload button, so you can take your time to check the photos and when you're ready, you can reload the ISS Location and fetch new photos. If no city with photos is near the current location, you can see amazing popular photos while you wait ISS gets a new nearby city. You can click on the photo to see the full resolution version in a new window. A new way to display the picture is comming in the future.
The project is hosted in this GitLab.com Repo.
GitLab allow to deploy projects within GitLab Pages. The project has Pipelines configured to run build for Staging and deploy all branches except master to GitLab Pages automatically. This version is available from Stage Gitlab Pages ISS Live Location Also, an external Deploy Service (DeployHQ) was configurated for Automatic Deploys from master branch to a static server when master is pushed. The production version of this app is in DEMO ISS Website.
UI test were made but for time issues I couldn't create Unit Tests and Coverage Reports for this App. Is a Tech Debt for the next sprint.
Within the code, you can find more clarification comments about the use and the functionality of the code.
App Component. Renders App components and handles ISS position requests
Handles the reload button action. Fetch the new ISS position.
GalleryContainer Component. Renders the Gallery UI and fetch the cities near ISS Location If there is a city near ISS Location, renders the gallery and sends an array of [cities] to Gallery Component
GalleryContainer component, fetch the cities nearby to ISS Position, using axios
Renders the GalleryItems Component Get the photos based on the [cities] nearby ISS Position.
Renders the GalleryItems UI with the data received by the parent (Gallery)
Map React Component. Render the Map from Google Maps and the Marker inside. This is generated by google-map-react module
Marker UI for the ISS Position on the Map. React Pure Component
propsString Text for the marker
Reload Button for reload the ISS Position and the Pictures. React Pure Component
propsfunction Function to handle click action
- Create Unit Testing to run tests
- Add Video Fetch Feature
- Add Portals to display pictures and videos within a modal