The Idea
Boeing wanted an interactive experience to act as a hub where all the media, social posts and content surrounding the 777x. Another aspect of this was to have something Boeing could put on a touch screen display in one of their offices. They also wanted a fun way to show the timeline of the 777x.
What it Does
The site allows users to drag the board around and interact with different cards. There are a few different card types that are generated based on the content entered. There’s also a toggle that allows the user to see all the cards in a timeline view.
One of the biggest challenges was how to handle integrating the site into Boeings existing CMS, Teamsite. To get around the limitations of the CMS we had to generate static files for everything. This way we could upload all the files as static HTML that would then be served up by their CMS to act as a single page app.
Under the Hood
The Backend
The backend for this project wasnt too complex since they were all static files. The site could run on anything that served up HTML, CSS, and JS. The true backend for this would be the static site generator. We built the generator using Node with Handlebars as the templating language. To manage all the data we used Contentful with GraphQL. We hosted the node app on the an EC2 server and built out a simple admin UI to allow non developers to run a process to generate the static files, create a zip and download that zip to the users computer.
The Frontend
The frontend for the site was built with Three.js, vanilla JS, CSS and HTML. The site acts as an single page app but in order to support social sharing of individual posts or cards all with their own meta data and open graph data each card had its own generated HTML file. Once the user loaded up the URL for the site JS would take over handling any URL changes as to not require a page reloads when changing cards.
What’s up with it now?
Unfortunately the site is no longer live. However when the site got launched in 2018 it won a Bronze Addy in the “Business-to-Business Website” category of the Phoenix AAF american advertisting awards.