In October, we attended and hosted a booth at Verge, a sustainability conference in San Jose, CA. It was a great experience being able to connect with people doing incredible work in the climate tech space.

At conferences, you ordinarily attract attendees to your booth by offering swag like pens or coffee mugs. But swag is wasteful, and especially didn’t feel quite right for a conference dedicated to sustainability. We brainstormed for a bit on how to do something fun and distinctive, and hit on the idea of building an app that would let attendees offset the carbon emissions of their travel to the conference. We could demonstrate what can be built with the CNaught platform and help make the conference more green in a small way.

Today, we are making the app we’ve built open source and sharing it with the community. In this blog post we’ll describe how we built the app and some of the key decisions we made, both technical and product. We hope readers can use this as an example of how to create climate user experiences using the CNaught platform - or adopt our apdirectly to help make other events more green.

App functionality

Our goal was to encourage visitors to our booth to offset their travel when they stopped by. This implied a few requirements:

• Mobile-friendly. Folks needed be able to offset on their own devices and access our app by scanning a QR code at our booth.
• Simple and low-friction. Conference attendees are busy, and would only be willing to spend a few moments on using our app. We could only reasonably ask for a few pieces of data.
• Emailing certificates. We wanted to be able to send users a record of their participation.
• Visitor map and scoreboard. We wanted a social aspect to the experience, so we installed a TV at the booth to show the total travel footprint we offset, and a map of where visitors were coming to the conference from. 

To accomplish these goals, we pre-configured the app to calculate travel to the specific location of the conference using one of two transportation modes - air travel and driving - which we anticipated would cover most cases. Thus we only needed to ask participants which transportation mode they used, and the origin airport or home address. We then used our carbon calculator methodology to estimate the footprint of travel to the conference. For those who flew, we calculated based on a round-trip non-stop flight plus round-trip drive from the airport to the event location. For those who drove, we calculated based on a round-trip journey to the event location.

This simple approach was designed to maximize ease of use and ultimately the amount of engagement and impact. It aligns with a core CNaught value of not letting perfect be the enemy of the good.

Building the app

We wanted to be able to build the app quickly because, albeit fun, this was a side project. We were able to build it in about a week thanks to many great open source projects, some of which we highlight below. 

• We already use Next.js for our main web app, so it was a natural choice to use it again. 
  

• For emailing certificates we used React Email. Creating nice-looking emails with broad compatibility is notoriously tricky, but React Email makes it much easier to do so using frontend technologies we were already familiar with - and it allowed us to be agnostic with respect to email service providers used to actually deliver the email.
  

• For the visitor map we used the wonderful Leaflet library (via React-Leaflet). Again, this allowed us to be agnostic of actual map tiles providers.

One challenge was that we wanted to use Edge runtime for all the pages and routes to ensure the pages would load as quickly as possible for all visitors. This meant that we had to port our Javascript SDK, which was using the Axios library, to be purely fetch based.

Results

We had a great turnout at the event and were able to offset 33 tonnes of CO2e for over 55 attendees, with visitors to San Jose from as far away as Australia, Kenya and India offsetting their travel. 

‍

Next Steps

You can find the source code for the app, along with instructions on how to configure and deploy it in your own environment (we recommend Vercel), in our examples GitHub repository.

We’d love to hear your feedback and look forward to helping you build climate experiences into your products.

‍