American Airlines Gate Finder

The leaderboard where you can get a rank for your steps and calories.
Blue Bar when there is ample time to walk around.
Red Bar when you have to start running.
Yellow Bar when you have to start going to the gate and there are 15 mins left.

Inspiration

Every time we have flown, we have been kind of scared to leave the gate to go get some food or look at a store in another terminal. We also missed some flights due to being late to our gates. As soon as we saw the AA challenge, we had some ideas on how to improve customer satisfaction, and this was at the top of our list. We wanted to find a way to ease the stress and occurrence of missing a flight. A major way for us to relieve the stress was to gamify the app so people would have some fun while still going on time to their flights.

What it does

Currently, our app gives you the time it would take to travel between 2 places in the airport by walking, and it is calculated by actual google maps directions, so it is accurate if we assume normal walking speed. The path is then displayed on the screen with a time to boarding, and it will be updated in real time with gate updates, and any boarding time changes. The app then changes colors based on how long you have to get back to your gate so you can take a quick glance and know what to do. There is also a leaderboard of steps taken so people can have some fun with walking around and it will keep people active. Another main feature is that you can select options to do things that will add to the time and so the bar at the top changes colors. For example, if you add that you want to go to the bathroom, 30 minutes gets added to the time needed, and so the time left goes down. This feature is especially useful for people who have lengthy layovers and want to find a way to exercise without leaving the airport.

How we built it

We built this using React and Material-UI. To display our map and calculate how long it would take to get to your gate, we used Google Maps API with Directions. We are also getting flight data in real time from Flight Engine, which would also link up with the current American Airlines API to display all of the information based on your flight number. Flight Engine did not have gate numbers or locations for flights at the time of writing, so we had to make a fork of it and build that functionality into it.

Challenges we ran into

Our initial challenge was that we started with React Native but it didn’t work with Material-UI, which was the style framework we wanted to use to style our app. They had a compatibility issue, and so we had to switch to React.js and then make it a web app. Another challenge we had was getting Google Maps API to work with React because it wouldn’t work with it directly. We had to use another package called react-google-maps to use the API. Another major challenge we had was to figure out how to style our app because none of us had much front-end experience. We overcame this challenge by using the Material-UI framework which gave us many style options to choose from.

Accomplishments that we're proud of

We managed to incorporate many aspects of technology from the Google Maps API to calculating the time. We are very proud of the fact that we used the Flight Engine API in our app because it shows a lot of promise for continuous real-time updates to gates and boarding times. We are also proud of the fact that we were able to style the webpage because none of us had experience in UI at all.

What we learned

We learned how Google Maps API works and how to integrate it with other applications. We also found out how to utilize the Flight Engine API, and make API calls with React.

What's next for American Airlines Gate Finder

We want to take current location to use as an input and having stores as a part of the directions. Further, we want to display directions on a different screen if the user wants them. We can add a circle on the map for distance you can travel and add more leaderboard options. The leaderboard could also connect with an existing health app that you have for accurate steps and calories. We could also later integrate it with the actual American Airlines app/API, so the flight number and gate would automatically be imported in, and the user would know what they are doing. If people are frequent fliers, we could recommend waypoints in the airport so they have options to automatically alter the directions and time. We also want to improve the UI of the app so it matches the current AA app.