GlobeFlights allows users to search airports using their full name or IATA code in our database, which result is used to query more information on the selected airport through the aviationstack API. In addition to searching manually, users can also select the airport directly by clicking the cylinder on the globe. Once an airport is selected, its real-time information like weather and current flights will be displayed on the website. Users could further click on each individual flight to query the detailed information related to it.

Our code is entirely comprised of frontend reactjs code, which consists of a UI layout based on ant design and a 3D globe based on react-globe.gl.

We built our globe component based on the react-globe.gl with supports and styling matching what we intended for the final result. This component will set the states on the top UI layout component to let it know which flight and airport are selected.

The UI layout handles all the data communication with external API and parses the information for the globe to consume.

We initially want to set up cloud functions to call APIs and perform some additional operations on the collected data, but ran into some strange issues with our deployed code and have to switch to the full frontend approach.

The globe can autofocus itself when you click the airport and flight!

Get to know/review reactjs and some basic web graphics knowledge.

We plan to add more information to each flight and airport based on other APIs as well as increase the number of airports displayed.## Inspiration

GlobeFlights allows users to search airports using their full name or IATA code in our database, which result is used to query more information on the selected airport through the aviationstack API. In addition to searching manually, users can also select the airport directly by clicking the cylinder on the globe. Once an airport is selected, its real-time information like weather and current flights will be displayed on the website. Users could further click on each individual flight to query the detailed information related to it.

Our code is entirely comprised of frontend reactjs code, which consists of a UI layout based on ant design and a 3D globe based on react-globe.gl.

We built our globe component based on the react-globe.gl with supports and styling matching what we intended for the final result. This component will set the states on the top UI layout component to let it know which flight and airport are selected.

The UI layout handles all the data communication with external API and parses the information for the globe to consume.

We initially want to set up cloud functions to call APIs and perform some additional operations on the collected data, but ran into some strange issues with our deployed code and have to switch to the full frontend approach.

The globe can autofocus itself when you click the airport and flight!

Get to know/review reactjs and some basic web graphics knowledge.

We plan to add more information to each flight and airport based on other APIs as well as increase the number of airports displayed.