American Airlines Flight Tracker

A website that gives any information consumers or employees need to know about American Airline flights on any given day. This website provides a map of airports, a list of all flights and airports.

Comment

Inspiration

We were inspired by the American Airlines challenge to improve the customer flight experience.

What it does

Our website displays daily flight information and the locations of American Airlines airports. The airport locations can be sorted by flight number, origin, destination, distance, duration, and departure time by clicking on the column titles. The outgoing flights of today can be shown by clicking the icons on the map.

How we built it

Our website was locally built using javascript, html, bulma, jQuery Mapael, and the Flight Engine repository American Airlines provided. We first created a table, then imported the data from the Flight Engine repository, created a map using more data from Flight Engine, wrote code to display fight information when a map icon was clicked, and finally put it all together.

Challenges we ran into

Many of our challenges stemmed from our team being new to JavaScript and HTML and new to hackathons in general. Here were a few other challenges we had :

-inputting data so that Mapael could use it since the format we were given was different from the format the map accepted. -sorting the graph -fixing bugs with the clicking icon. For instance, map icons displayed where they aren't wanted, and incorrect information being given from Flight Engine API (ex. The Dallas latitude and longitude was actually for a place in China).

Accomplishments that we're proud of

We are all proud of completing our first Hackathon and submitting a final project. We are also proud of learning how to make a website from scratch and so thankful to the mentors and workshops that helped us. It was stressful but nonetheless rewarding as well as an amazing learning experience.

What we learned

We learned how to read and use APIs better, create a website from scratch using HTML and JavaScript (both of which we were all initially unfamiliar with), and how to format data for APIs to use.

What's next for American Airlines Flight Tracker

In the future, we hope to create a better user experience by fixing bugs with the map and including more flight information that they may be looking for. We also would like to include the weather for the specific locations to inform them of the possibilities of delays beforehand.

Share this project:

Updates