Natura & CO Whitelabel 2023

The Natura Whitelabel project was developed to serve as an interface to Natura Group websites with a single source code.

Currently, the websites in handled by Whitelabel are:

Natura Brazil;

Natura Argentina;

Natura Mexico;

Natura Peru;

Natura Chile;

Avon Brazil;

Avon Mexico;

The Body Shop Brazil.

Natura Group also has another Front-end with different technologies, that renders the interface of other websites:

Natura Malaysia;

Avon Argentina.

I was responsible for implementing Natura Peru, Natura Chile and Natura Argentina in the Whitelabel, understanding how the API sends data and translating it into the format expected by the interface components through an SDK, detailed further ahead.

The migration that I have made for Peru, Chile and Argentina has significantly improved those websites performance, resulting in a 218% increase in the number of pages visited and a 40% reduction in the bounce rate during navigation. These metrics directly contributed to increased sales for e-commerce platforms.

React, TypeScript, JavaScript, Redux, Redux Toolkit and TanStack Query were the main technologies used in the projects, along with other various tools.

The Whitelabel project is highly focused on performance, with the primary goal of continuously enhancing websites with faster loading times and smoother navigation. Additionally, it facilitates the quick and easy migration of any brand's website to this Front-end, as it is capable of working with any Back-end. To enable the swift migration and operation of all websites on the same Front-end, even if each has a different Back-end, we developed a SDK (Software Development Kit) that allows data retrieval from various REST Back-ends.

Currently, ATG, Salesforce, and a Node.js-built BFF (Back-end for Front-end) are used. The most crucial aspect of the SDK is data handling, as each Back-end sends information in a different format. In this regard, the SDK leverages TypeScript's typing to understand the data format expected by components, converting the API-obtained data into the model expected by the components. This approach allows the use of a single Front-end with various different Back-ends.

A comprehensive article published on the Compass.uol Blog about the migration can be found by clicking here.

I am very happy to be part of this project as I have evolved significantly through the construction of this front-end. I have enhanced my front-end development skills, gained experience with modern technologies, and honed my ability to tackle complex challenges. I am available to share more details if needed!