In the Fall of 2018, former Treasurer of the United States Rosie Rios, along with Google Creative Lab, launched an AR experiment and website that lets you see 100 historic American women where they've historically been left out - on US currency. Intended as a way to explore the wide range of accomplishments by these notable women, the iOS and Android apps use AR to place the women directly on any US bill note, and the accompanying website lets users flip through all one hundred bills, view the featured women by category, share individual bills, and includes a teachers kit to help bring these women's stories into the classroom.
The site is built with React and Redux as the framework and state manager. Initially developed with React SSR (server side rendering) paired with a Node server, we quickly realized that it was much more efficient to generate a server-less static site. Because we wanted the ability to deeplink to each individual woman's bill, and to have different metadata for social sharing, HTML was pre-generated for all 100 different bill pages and for the about, view all and teacher's kit pages. This solution minimized our deployment time and ensured that the site would work seamlessly on App Engine's standard Python environment.
It was important for the site to work across all platforms. With this in mind, the front end was built using 5 different breakpoints, a custom grid system, and optimized for both touch and trackpad interactions. The bill animations utilize GSAP timelines and React's fast rendering cycle to to create smooth and efficient animations.
Front end stack: Babel-transpiled ES6 with React, Redux, SCSS, and GSAP, complied with Webpack