Project Bunting

A Gatsby #FuncJam demo by Nicholas Martin


This Gatsby #FuncJam submission by Nicholas Martin has been created to demonstrate how Gatsby Functions could be used to create your own A/B testing platform.

Here are the flags

If you see the badges elsewhere on the page, it means the content will change depending on if the flag is enabled.

Refresh this page, and the flags above should stay the same. Want to see what happens when the flags are switched? Try opening this site in Incognito Mode, or, delete the bunting-flags key from localStorage.

Hidden section example

There is nothing to see here (hint: the flag is disabled).

How does it work?

Lets start with the React components... Using React Context, TextProvider is a component which is used to initialise UserFlags. It will first check localStorage for cached UserFlag data, otherwise, it will query the /api/flags/init endpoint to generate a new set of UserFlags and store it in FaunaDB.

By caching the data using localStorage, any React components relying on the useFlags() hook should render with the enabled flags quickly. It will also ensure the flags are persisted. To ensure the user has all the latest flags available, the data will be refreshed after 5 minutes. This timeout also helps with limiting invocations.

In this demo, flag values are set using Math.random(), so won't be reliable for production purposes, but it is theoretically possible to ensure a more reliable distribution in a round-robin style. Hit me up onTwitter if you want more details about this.

What are the functions?

/api/flags/new can be used to create new flags!

/api/flags/init creates a new set of UserFlags!

/api/flags/{userId} retrieves the user's existing flag values, and generates values for any missing flags that may have been added recently!

This was fun, thanks! All the effort went into the Functions, so please forgive this rudimentary UI.