In 2022 AKQA Berlin delivered the new Dr Oetker website. The task was to connect up thousands of Dr Oetker recipes in multiple languages across 20+ locales to a modern UI, whilst upgrading their CMS to Hygraph, and giving users enhanced search capabilities.
As developers we were provided with designs in Figma and built React components that would make up a large components library. We would build and test the library locally on Storybook first then publish the package automatically to NPM as part of the CI pipeline. Later we would hook up our components in the Next JS UI and plumb all the data in to the relevant pages and their respective components. For styling we would use Tailwind in the first instance, then Styled Components if some functionality was not available in Tailwind.
Developers were not assigned a specific set of components or tasks, which meant I was exposed to most parts of this project: from configuring the tracking for GTM, writing graphql to query the CMS, building components, adding animations, creating content models, and much more.
The market roll-out is still in progress but the UK market was the first:
UK market: www.oetker.co.uk
One of the reasons for building a component library was so the client could reuse the components we'd built for other websites they may have, inparticular their corporate website:
Global corporate site: www.oetker.com