Cover Image for Get Biofuel

Get Biofuel

Background

GetBiofuel advocates for the use of biofuels like ethanol to cut greenhouse gas emissions by 46%, supporting U.S. energy independence with over 97% of biofuel produced domestically. They promote environmental preservation through innovative jobs and cleaner air, aiming to integrate biofuels more broadly across America.

When I was brought on to this project the team had a tight deadline and unfinsihed designs. By thinking in systems I was able to take the incomplete designs and build a component system, so that when new designs came I could use the components that fit into the designs we did have. When I needed to create a new component to fill in a gap in design, I would build with the mindset that piece could be used again to make future pages easier to developer.

Preload slide 1Preload slide 2
Slide 1

BioFuel Finder

One critical aspect of this project was integrating with the google maps api to showcase nearby biofuel locations. The tool could be used on one of two ways, either finding biofuel nearby a current location, or to see biofuel locations that were along a persons route.

BioFuel FInder

The idea behind the fuel finder was to showcase local gas stations that sold Unleaded 88 and Flex Fuel. The following is an example of someone searching for BioFuel in the San Francisco Area

Preload slide 1Preload slide 2
Slide 1

Trip Planning

Probably the most complex integration between between Google Maps and my clients services. That also required custom elements for each map interaction. From the trip inputs to the marker information.

The following example shows a user traveling from San Francisco to Seattle searching for BioFuel along their route.

Preload slide 1Preload slide 2Preload slide 3Preload slide 4
Slide 1

The Technology

  • Gatsby.js - Static website generator
  • React
  • Wordpress Headless API
  • Styled components
  • Google API
  • Netlify build tools and hosting
  • AWS Lambda Microservices

O
t
h
e
r
P
r
o
j
e
c
t
s