AmeriCAN Go

3D Plane Model and Flight Path
Flight Selection Panel
Chat with the Travel Agent
3D City Scape
View of Excursion
3D Plane Model

💡 Inspiration

Imagine a world where planning your next vacation feels like you're already in flight. With our 3D Passenger Flight Visualizer, we aim to transform trip planning into an immersive, fun, and interactive experience. No more stressing over where to go or what to see. Instead, seamlessly discover unique destinations across the US. Whether you're choosing a quiet retreat or a bustling adventure, our project brings your travel dreams to life before takeoff, making the journey as exciting as the destination.

✈️ What it does

Given an arrival date and flight route selected from American Airlines’ mock API, AmeriCAN Go generates an itinerary of travel stops for you to visit while you’re at your destination, giving you a guided tour of the city.

🛠️ How we built it

We built AmeriCAN Go through the use of American Airlines API for flight and airport data and Google’s new 3D Maps API in order to make an interactive and 3D world viewer.

🛑 Challenges we ran into

One challenge we ran into was the lack of examples and online documentation with Google’s 3D map API with ReactJS. Fortunately, we were able to find a library that could abstract the base implementation for the custom DOM elements but we quickly ran into limitations as it was an alpha version. However, we were able to overcome this issue by extending the typing and combining both the React and pure Javascript implementations.

We also had trouble keeping the state of the application organized and modular so that we could all work on different files. We learned that we could use React context to manage and watch states from any files and share the reference with each other. This made working together significantly easier.

Another challenge some of our team members ran into was a lack of experience building these types of applications. Some of the development time was spent learning the basics of web development and how elements interact with each other on the web page.

🏆 Accomplishments that we're proud of

We were able to successfully build a 3D web app that can read API data and display it in real time with minimal latency. We’re truly proud of this feat because at first, our laptops were on the brink of bursting from the amount of planes being displayed on the screen. We were able to mitigate this by conveniently adding a live flight viewer so that only relevant flights that were in-flight were displayed.

🧐 What we learned

We learned how to use Next.js, Tailwind CSS, and the Google Maps JavaScript API. We learned a lot about web development, as we have only made a couple of websites/applications on our own before. We learned a lot about React and how you can use it to dynamically update the webpage based on API calls and user action.

🕒 What's next for AmeriCAN Go

Next, we’d like to add international flights and airports to AmeriCAN Go so that people can explore the rest of the globe through our application. We also planned to add saving and editing routes, as well as implementing support for booking multiple flights. To this end, we considered adding user authentication to the app, but we decided it would be best left for future development.