This is an extra-curricular project of the software engineering immersive course at GA London. The assignment was to create a react app using data from any API of our choice. The assignment was to be completed individually over one weekend.
Using live air traffic data from the OpenSky API, my app displays the current number of airplanes above London, putting this into perspective by comparing it to the total number of planes in the sky above entire countries.
You can launch the game on GitHub pages here, or find the GitHub repo here.
- Create a react app that talks to an API and displays some data
- Use any API you like
- Use some new libraries in your creation
- Host it on Github pages
- HTML
- CSS
- JavaScript (ES6)
- React.js
- Anime.js
- OpenSky API
- Git and GitHub
- BoundingBox
- Bulma
- Google Fonts
- Found bounding boxes using BoundingBox and stored them in an array that the code loops through, can be expanded easily
const boundingBoxes = { 'United Kingdom': [-14.02,49.67,2.09,61.06], 'Switzerland': [5.9559,45.818,10.4923,47.8085], 'Germany': [5.87,47.27,15.04,55.1], 'Italy': [6.63,35.29,18.78,47.09], 'India': [68.11,6.55,97.4,35.67], 'Australia': [112.63,-43.65,153.75,-10.55] }
- Fetching data from the API at the very start and handing it down to components which do different things with it
- One fetch request for London (storing all data) and each country (storing only number of planes, i.e. length of array)
- already sorts the countries in order of number of planes when saving them in state
.then(resp => { let countries = [...this.state.countries] countries .push({ name: country, count: resp.states.length }) countries = countries.sort(function(a, b) { return b.count - a.count } ) this.setState({ countries }, () => console.log(this.state)) })
- already sorts the countries in order of number of planes when saving them in state
- API is not always the fastet, and since not possible to calculate fractions, the components are not mounted until the data from London and at least one country has been returned (until then show a loading screen)
- takes detailed data from London
- plane count is enclosed by rotating circle using anime.js
- puts origins in an array of objects and sorts it according to number of planes
getOrigins(dataLondon) { const dataArray = Array.from(dataLondon) return dataArray .reduce((sum, elem) => { const origin = elem[2].toString() const index = sum.map(e => e.country).indexOf(origin) if ( index > -1) { sum[index].count += 1 return sum } else { sum.push({ country: origin, count: 1 }) return sum } }, []) .map((country) => { const newCountry = country newCountry.perc = Math.round((country.count) / dataArray.length * 100) return newCountry }) .sort(function(a, b) { return b.count - a.count } ) }
- takes number of planes above London and each country and divides to get percentage
- Could extend this to more cities
- Could display a map of London showing the location of planes in real time
- Since rotation animation requires adjusting the transform CSS property, and having the number and the circle on top of each to be in the same position, had to wrap the rotating image into an empty wrapper that was fixed in place causing some layout issues with flexbox, probably there would be more flexible solutions
- Since the page needs to have at least the number of planes above London and one country to display correctly, the page shows a loading screen until that minimum amount of data is returned from the API (since it can take even up to a few minutes depending on how responsive the API is)
OpenSky by The OpenSky Network
BoundingBox by Klokan Technologies
London skyline from OpenClipart-Vectors via pixabay
... and name provided by Luca Grezio