Using design to create a searchable database for radio-controlled airplane plans.
Flywire was a project built to catalog the many DIY radio-controlled foam airplane plans that are available online. To find specific planes you want to build you needed to click through various forums and websites. The primary goal of Flywire was to be able to visually find and browse through the next RC airplane that you would want to build and spend more time building.
Technologies & tools
- CMS — Headless WordPress w/ wp-api
- Front-end — AngularJS 1.4.1, SASS
- Web scraper — Gulp & NPM
- Layout design — Sketch
- Logo design — Adobe Illustrator
Quite a few of the other major RC airplane sites were older forums that you had to click through pages to find what you were wanting to build. With Flywire, I was wanting to start from the ground up with search and tags as the main point of the site. Planes were always shown with a thumbnail that could quickly show you the finished product of a plane you could build.
With Flywire, I was wanting to utilize the quickness of single page apps (SPA) that would allow users to quickly search for planes without having to have the browser reload. Tags and categories were another feature I was wanting to add to all of the planes so that you could quickly browser different types of planes such as World War II planes or biplanes.
The front-end of the website was all built with Angular JS 1.4.1 which allowed quick filitering of the planes as well as different views for individual planes, search results and tags.
Firebase was intially used to store all of the planes information. Angular would then make requests to Firebase when a user would search or filter out planes. After a while, I realized I need an easier way to add new planes and edit current ones. I didn't want to go through the Firebase UI each time, manually edit JSON, or custom develop a CMS on top of Firebase so I started looking at the WordPress WP-API. I exported and imported all of the planes into WordPress and used custom fields for the meta data such as plane designer and links to the pdf plans.