Flightless birds and headless Sector - Bird of the Year 2019

Forest & Bird’s ‘Bird of the Year’ competition has again proved popular in 2019 (some even consider it New Zealand’s second most important election!) - with over 40,000 votes on the dedicated Bird of the Year website.

This year, Sparks Interactive built the Bird of the Year site on a ‘headless’ Sector - aka a decoupled Drupal - where Sector provides the content management system (CMS), and some technical magic turns this content into the site seen by the public.

In this project, Sector proved to be an excellent team player - not only is it good for managing content, but also capable of serving content and interactions to other, non-Drupal web applications. 

A new voting system and a new winner

With emotions inevitably flying high when it comes to handing out the coveted Bird of the Year title, it’s important that voting is fair for both the feathered candidates and the people voting for them.

The 2019 voting system is based on Instant Runoff Voting and is more in-depth than in previous years.

While it was once a straightforward most-votes-wins scenario, this year voters could rank up to five birds to ensure their favourites are represented. At the end of the voting period, the winner is decided by rounds of elimination:

• Votes are counted for each bird (how many rank #1, #2, #3, #4, and #5 votes it received)
• The bird with the fewest #1 votes is eliminated
• Anyone who voted for the eliminated bird gets their other votes adjusted to replace their eliminated vote
• The votes are then recounted, and the next round begins.

The last bird standing is the new champion Bird of the Year!

Bird of the Year, not Bot of the Year

New Zealanders are passionate about both native wildlife and competitive events, and in the past some individuals have ruffled feathers by trying sneaky methods to boost votes for their favoured bird. 

To avoid robots having an unwelcome say in the results, Sparks Interactive built a custom validation system for votes submitted through the webform. As part of the voting process, each voter receives an email with a custom code and link - for their vote to be counted, they must manually enter their unique code on the linked page.

How does a ‘headless’ Sector site work?!

A 'headless' Sector is a decoupled Drupal site. In essence, there are two websites for Bird of the Year - the Sector CMS where Forest & Bird can edit and manage their content, and the static site seen by the public.

When Forest & Bird finish editing content on the Sector CMS (which they are familiar with from the Forest & Bird website), they can see the pending changes and click a button to deploy them all to the public site. This magic is done via the Drupal ‘Build Hooks’ module, which checks for content changes on the Sector site, fetches the content, and replaces the static public site with a new one.

To generate the public site, Sparks Interactive used Gatsby - an open source static site generator. Using Gatsby’s Drupal plug-in made it easy to pull content from the Sector Drupal site into the public-facing Gatsby site.

It was also easy to use React - a JavaScript library for building user interfaces - to create the front-end of the site as it links neatly with Drupal components. React is able to take the Drupal webform used for Bird of the Year voting and map the components to React components, then post vote submissions to Sector like any other webform submission. The voting-based interactions with the Sector site (submitting and validating votes) are exposed on the public site by JSON API.

Using React to build the user interface means that it was straightforward to implement features like the drag-and-drop components for voting - and in the Sector spirit, this also gave access to the large open source community for React.

Want to learn more about New Zealand's native birds?

While the competition has wrapped up for this year (congratulations to the Hoiho!), you can still visit the website and learn about its competitors at www.birdoftheyear.org.nz