Johnnie Walker

Working as a contractor for InfoPlus (TransformCX), their client Diageo brought them in for their transformation projects.

I was the Frontend tech lead architecting CMS platform using NextJS siting on a .NET Umbraco instance for Johnnie Walker's (one of Diageo's subsidiaries) new transformation site.

The project was divided into two parts:

1. Apply a personalisation journey to the current Johnnie walker site

   • The current site used an Umbraco .NET Backend using Razor views
   • My role was to create and the lead the front end architecture of this.
   • Webpack was used to compile the frontend JavaScript code and published for the Backend Umbraco Razor view to reference from a CDN.
   • Tech used was: HTML (Razor view), SCSS, JQuery, Webpack and Grunt to build the FE bundles.

2. The second part was to work on the new CMS implementation of the Johnnie Walker site

   • NextJS was used on the Frontend (TypeScript)
   • Created a component lib that would map to CMS values and dynamically render on a given page
   • Used Tailwind for the styling solution
   • Converting .NET integration layer to TypeScript
   • Tech used was React, NextJS, TypeScript, Tailwind, MongoDB, Node Micro Services

A few screen shots from the pages I worked on in the personalisation project:

I built this carousel from the ground up using JavaScript and CSS transformations. It was quite a challenge as it was not driven by a modern framework like React and the inital render was from razor view.

The most challenging part of this was the fact that we again were not using a modern frontend UI framework to render the elements on the page dynamically. Each update was a call to the Backend for new HTML to render on the page. We would then need to do a replaceChild each time we had received a response from the backend.

The CMS implementation used more modern web technologies, Here is where we used NextJS on our FE Node microservices:

The current infrastructure in Johnnie Walkers integration layer for handling things like authentication, session state were all written in .Net. It was my responsibility to rewrite the services in node (TypeScript) and also up skill the integration developers on how to refactor the code to TypeScript. Giving insight to the structure and code implementation.

The frontend architecture required it to consume content from a headless CMS and display components dynamically (based on content editors inputs). This is where NextJS came into the picture. We architected a component library that had all the necessary React components which made up for their bespoke designs. The components where styled using Tailwind, creating the styling to accommodate for different brands.

The library had specific mapping helper functions that allowed for the consuming Next application to render the correct components based on CMS data that was pulled from the content service. This made for seem less CMS platform that could be reused with different brands.

This was the first project I used Tailwind on, it was a great experience as I had come from using styled-components in my previous projects. I was surprised at how quickly we could build reusable components which were easy to customise