LANGBEIN
Turning a recipe website into a lifestyle platform
CLIENT:
ANNABEL LANGBEIN
ROLE:
LEAD DEVELOPER
COMPANY:
FLIGHT DIGITAL 2021
STACK:
- REACT
- TYPESCRIPT
- GASTBY JS
- SANITY CMS
- ALGOLIA
- REDUX / ZUSTAND
- SHOPIFY BUY SDK
Bringing a classic Kiwi brand into the modern web environment.
“Annabel Langbein” is a name that is familiar to many Kiwis. I was tasked with modernising and transforming the old Annabel Langbein recipe website into a new lifestyle platform as a part of their rebranding campaign. The challenge was not only to create a visually compelling and highly interactive front end, but also to tackle the challenge of migrating hundreds of recipes, blogs and SEO data from the old site into the new one.
The site needed to be highly personalised, allowing users to create an account, save blogs and recipes, purchase products and interact with the recipes. The emphasis was on helping the user find what they were looking for as quickly as possible. Because of this, it was clear that developing an effective search function was a must. The search and filtering functionality became a key part of the site’s success, providing an efficient but highly detailed way to get users exactly what they need.
This project propelled the new Langbein brand into the modern tech environment, and has enabled them to scale the brand with a fast and visually exciting platform.
The stack and migration.
At its core, the Langbein lifestyle platform is a statically generated site using Gatsby, that works like a large scale dynamic website. It utilises a combination of Google Firebase and Zustand/Redux to handle the creation and authentication of users, as well as saving users’ favourite recipes and blogs. I used static site generation for page content and a decoupled database for user data. This separation of data querying led to very efficient page loading and reflected positively on the users experience.
The search function was implemented using Algolia. Algolia provided efficient and highly customisable methods for executing searches, which made it an obvious choice for this project. I created custom indexes for recipes and blogs that all had custom behaviours for sorting and ranking. This made sifting through large arrays of recipes a quick and simple process that had a small footprint on performance.
The most unique challenge of this site was data migration, which was solved using a custom import script. The script read through all recipe data and converted the method, ingredients and SEO into a digestible document that Sanity could then upload to the content system.
