Sonic Equipment BV

Sonic Equipment makes and sells premium tools and toolboxes worldwide. Its web shop ran on Optimizely Configured Commerce, a monolithic B2B e-commerce platform, built with an external development partner. Sonic brought me in as freelance lead developer to streamline the development process and to act on Sonic's behalf in the collaboration with that partner. Together we moved the shop to a headless frontend in React and Next.js on top of the Configured Commerce backend, so that parts of that backend could later move to specialized services.

The new shop reached customers before the switch. We built the new design and features as a shared React component library, developed and documented in Storybook. It became Sonic's design system: the old storefront, the marketing site and the Next.js frontend all use the same components. The existing storefront used them first, behind feature flags, so the new search, product pages, cart and checkout were live early. When every page was ready, the Next.js frontend went live, with URLs and redirects compatible with the old storefront.

The move to Next.js gave the shop a big performance boost. The catalog is cached wherever possible and stays real-time where it has to, such as prices.

The hardest part was running Configured Commerce headless, logistically and in infrastructure, especially while the old and the new frontend ran side by side. The frontend talks directly to the Configured Commerce Storefront API for sessions, carts, orders and payments. To make the old storefront, the new frontend, the services behind them and the marketing site work as one shop, I built a Cloudflare Worker as a reverse proxy in front of them, with complex routing and translation rules. It also translates every session-related cookie between the public domain and the domains of the services behind it, so a customer stays signed in across every part of the shop.

The core of the shop was renewed along the way. I replaced Elasticsearch with Algolia for search and product listings, built the cart and checkout with Adyen, and set up end-to-end test automation with Cypress and error monitoring with Sentry across the storefront, the marketing site and Next.js.

Streamlining development also meant building an internal team. I started with one frontend and two backend developers from the external partner. By the end the team was two internal frontend developers, one internal backend developer, one external developer and me. I translated the business requirements into work for the team, gave it direction, and built along.

As a Senior Full Stack Engineer and Lead Developer, my responsibilities included:

• Leading the gradual migration from a monolithic storefront to a headless Next.js frontend
• Streamlining the development process and acting on Sonic's behalf in the collaboration with the external development partner
• Building the shared React component library and design system in Storybook, used by the old storefront, the marketing site and Next.js
• Integrating the frontend with the Configured Commerce Storefront API, including sessions, authentication, cart and checkout
• Building the Cloudflare Worker reverse proxy, with routing, translation rules and session cookie handling across domains and services
• Improving performance with caching for the catalog and real-time data where needed, such as prices
• Building search and product listings on Algolia, and the checkout with Adyen
• Setting up test automation with Cypress and error monitoring with Sentry
• Interviewing and selecting candidates for the internal team, and onboarding and mentoring developers