To comply with the EU Deforestation Regulation (EUDR), bol needs to be able to show, for every product it sells, whether it has contributed to deforestation. That called for a brand-new compliance application, and Flock.'er Cees joined the team building it, alongside fellow Flock.'er Niels.
It was a greenfield assignment, exactly the kind of work Cees enjoys most. Cees took ownership of the frontend. All of the team's existing applications and services were built in Angular, but bol's tech guidelines had set React as the way forward. The team had little React experience yet, so Cees brought that knowledge in and built the compliance app in React from day one, in line with those guidelines. Starting fresh gave us the chance to think the setup through without legacy constraints, and to deliver something the team could reuse as a template for migrating its other apps.
Cees set up the frontend in a few steps:
- A React application structure designed to be reused as a blueprint for future migrations;
- Storybook to develop and test UI components in isolation;
- A clean separation between application code and the component library, with as little custom code around the components as possible.
That last step was born out of necessity. At the time, bol was moving between two component libraries: Puik, built on web components and already deprecated, and its successor Universe, which contained hardly any components yet. The app was built on Puik, knowing the app would need to switch libraries within about six months. Instead of treating that as a burden, we used it as a design constraint: if a library is going to be swapped out, keep the seams clean so the swap is as painless as possible.
The hardest technical nut to crack was the integration between Storybook and Puik's web components. Testing web components properly means working inside the shadow DOM, which takes some puzzling to get right. Luckily, Cees had run into similar issues at a previous assignment and could put that experience to use straight away.
Getting up to speed quickly was a challenge of its own. Starting at a large organisation often means spending your first weeks hunting for documentation. Here, an internal AI tool that could search documentation and GitLab repositories made a real difference. It helped less with writing code, as AI assistants weren't yet as capable as they are now, but it quickly pointed Cees to the right repository or document.
The result is a new compliance service, frontend and backend, built to be future-proof. The React frontend gives the team a working reference for building new apps and for moving existing Angular apps over.
What made this assignment special was the combination of a greenfield start and the trust we received to shape the setup within bol's guidelines, which let us move fast from day one.
