Overview

I worked at Left Field Labs, where I was embedded within a larger team at Google. Our largest event of the year was Google's developer conference, which attracts hundreds of thousands of people in the tech industry annually.

Features

Below are just some of the main features of the apps over the years.

• Progressive Web App created with Preact
• Pre-rendering or Server-side rendering for better indexing and performance
• Schedule with session reservations, bookmarks, and feedback surveys
• Video player with fullscreen, picture-in-picture options, and additional information overlays

• Time-picker for testing purposes
• Scheduled and toggle-able updates to the UI during the days of the conference

• Dynamic, deep-linked modals for both sessions and speakers

• Interactive, custom-designed map
• Live feed
• Live, interactive schedule
• Marketing pages with unique branding elements (masked images, SVG animations)
• Component library using Storybook

2018

This was the first year my team, which was embedded inside the Creative Engineering department at Google, worked on the Google I/O app. Due to time restraints and our team inheriting the work of two separate teams, we ended up having a hybrid website, where half of it was created with Grow, a static-site generator, and the more interactive, livestream half of the application was created with Preact and MobX.

Though the live site is no longer active, you can see the recap of I/O 2018 here.

2019

For the 2019 app, we knew we had many improvements ahead of us since the previous architecture wasn't sustainable. Because of this, I helped re-architect and re-build our application from the previous year by initially presenting a prototype to my team, getting feedback, and then collaborating with the two other developers on the project on the rest.

Personal accomplishments

• Helped re-architect, re-build, and streamline our application from the year before. Instead of using two different repositories and two separate applications, we combined them into one repository, removing Grow and using Preact throughout.
• Implemented server-side rendering. Not only did this improve performance, but it drastically improved SEO, particularly for dynamically generated routes like individual sessions.
• Created a design grid system using CSS Grid.
• Restructured a MobX implementation to separate data-updates and UI updates. This allowed us to have a root store for high-level UI, which was useful particularly for global styles (i.e. check if a modal is visible).
• Implemented a component library using Storybook.

For more info, see the recap site

2020

Though 2020's I/O was eventually cancelled due to the pandemic, my team and I updated the previous year's site with a new design and created a teaser game for the Internet to solve.

I was the technical lead this year, and I helped work with a team of three other developers to update our previous app, improve web performance and accessibility, and think through the architecture for new features.

Credits

I've been able to worked with many talented, hard-working people on this large project over the years. Below is a list of all of my teammates who collaborated with me.

2018-2019

• Development: Left Field Labs

  • Developers: Fernando Guerrero, Steve Geer
  • Producers: Magali Devic, Shauna Lacoste
  • QA: Carolina Machado
• Design: Instrument
• Google Developer Marketing Team, headed by Monica Bagagem and Kerry Murrill

2020

• Development: Left Field Labs

  • Developers: Keren Megory-Cohen, Matt Masurka, Mikey Wagner
  • Producer: Elisha Kersey
  • QA: Altheria Weaver, C.J. Quick
• Design: Instrument
• Google Developer Marketing Team, headed by Kerry Murrill