ASSIGNMENT

I was brought on to help with the modernization efforts for Costco’s consumer and business delivery websites for both the US and Canada. The primary targets were the home, search, and category pages which included shared components such as the global header and footer. Business stakeholders were seeking a no-code solution to manage the content, layout, and configuration of the entire UI of the modernized pages.

SOLUTION

The high-level architecture was for each modernized page to be a NextJS app which uses a common component library built on MUI and atomic design patterns. Costco’s existing CDN (Akamai) would glue together all modernized and legacy pages to deliver a cohesive user experience. We used Contentstack to manage all content, configuration, and language translations for the three locales (en-us, en-ca, fr-ca). React Server Components were used to fetch and render data server-side which garnered performance and SEO wins. Storybook and msw were used to demonstrate and test components in a stable and isolated environment.

Global footer I implemented. The entire component is driven by Contentstack including the configuration, layout, and language translations.

CHALLENGES

Many; complexity being the first. These components were to be shared across four applications and three locales, comprising six variations each component must handle. Adding to complexity is the size of Costco. We had dozens of developers spread across several teams all contributing to the same codebase. The polyrepo project structure compounded complexity and added unnecessary steps to deploying code. Performance is of course a primary concern for Costco, so we had to be meticulous in following React best practices.

PARTNERS

Costco has the resources to build teams with all the roles they need to thrive. It was a pleasure to collaborate with QA, DevOps, UI/UX designers, a11y testers, analytics specialists, product owners, and fellow developers.