One-click link: www.AeroView.site
Project background
Currently, flights across the globe have been significantly reduced due to the COVID-19 pandemic. Due to the extended quarantine measures (for inbound passengers) in many countries, people are unable to travel overseas or even domestically. We envision that airline industry will exponentially boom when quarantine is lifted and flights resumed.
Our web app will provide more information to travelers about the planes within commercial airline (Delta, American Airlines, etc.) fleets and which ones are the most comfortable. We also provide an easy-to-access data source for Aviation Enthusiasts and flight simulator gamers.
About AeroView
This AeroView website is designed for aviation enthusiasts, now built with React framework. Users can view technical performance data of civil airplanes. Use filter and option button to fine-tune airplane and metadata selection, and go to comparison page to compare performance data's difference across planes.
To further customize the site, we introduce a 1-5 star rating and favorite buttons on every airplanes. In every detail page, users can take freestyle note and check plane's takeoff and landing compatibility on airports. Thanks to Google Firebase, users can now use e-mail to create account to store their customizations (experimental feature).
My contribution
• Design the site's appearance and fine-tune its style.
• Implement runway validation and user's note-taking modules in the airplane's detail page.
• Actively collaborate with the project group on website's programming and stability improvements.
Ideation
Desktop experience
Mobile experience
Competitive Analysis
Wikipedia
Wikipedia collects technical specifications for airplane models, but it shows data for each model on standalone pages, so it is difficult to compare multiple airplane models in an intuitive way. Since different Wikipedia entries may be maintained by various people, the format of data visualization/presentation is not consistent, such as Airbus A380 Specification section and Boeing 787 Specification section.
Aviation Stack
Aviationstack is just an API for developers; it does not provide a visual representation of the data.
Airbus A380 Specification section in Wikipedia
Boeing 787 Specification section in Wikipedia
The Comparison feature
Many websites that present a electronic device offer a visually-appealing comparison page, and user can compare technical performance data across different models.
Most noticeably: Intel ARK processor comparison page and Apple iPhone comparison page.
Comparing 3 Intel processors
Comparing 3 Apple iPhones
Technologies and frameworks
This excellent website is build from:
• React framework
• ReactStrap framework (a BootStrap implementation)
• Font Awesome library
• Firebase (for user-data storage)
• React Autosuggest
• SunEditor
Future development
Our project group will continue developing the AeroView website, here are some additional features we're considering:
• A private photo album for airplanes: users (when logged in) can upload pictures of an airplane.
• Pop Quiz: randomly choose a curated image, users can guess which airplane model that picture shows.
• Airport Log: Users can add airports that will be marked on a world map, and geotag uploaded pictures to display them on a map.
• Data Customization: Since all technical data is gathered from the best available source, users may need to “fine-tune” the data. Hence the user can modify the value when logged in, and the customized value will persist in this user account.
• An Yelp for airplanes: Users write reviews of airplane experience, including content moderation for website admins.
Product promotional flyer
