Ebay Classifieds Group - Gumtree.co.uk

I joined Gumtree as they looked to reform their technology stack from a Java templating framework called Freemarker into a NodeJS, React and Redux micro-service utilising a design system to automate changes between designers and the front end. Gumtree is also initiating a 'shift left' taking quality assurance into the hands of developers; thus the front end team were looking to set up Cypress for integration and end-to-end testing.

Upgrading the technology stack

Gumtree was re-building the website in React with a NodeJS intermediary to perform Server Side Rendering that communicates with the back-end.

My Role in the upgrade

I was involved in the migration of the View Item Page which displays the product for sale. The aim was to re-create the page exactly so that there would be no effect on the user experience and any changes in the page's tracking information would be due to the change of technology.

To do this:

• I created React components that matched the legacy components made in Freemarker.
• I utilised Percy.io and Cypress to take snapshots after each user interaction with the page. This was then compared against the same View Item Page on the legacy site, highlighting any differences between the two pages. This informed us of what changes worked and which needed further refinement.
• I created Cypress integration tests to test the new components as they often had different selectors, which would break the legacy integration tests.
• I created unit tests using Jest and React Testing Library.

Design System

The design team at Gumtree wanted to be able to update various constants utilised in the front end such as, fonts, font-sizes, padding and margin sizes to enable global updates from the design team.

To achieve this, I queried Figma (the design tool utilised by the design team) to extract the values set up by the design team and update a template in SCSS, CSS and JSON for various different consumers of these values.