New online

Overview

As part of our collaboration, we were tasked with creating a "Proof of Concept" and subsequently implementing the transformation of a monolithic frontend, enabling independently operating development teams to gradually rewrite selected parts of the frontend using React.

Initially, the focus was on the ability to deploy the rewritten parts to selected markets where Oriflame operates, while still running the original versions in other markets. This approach allowed for the gradual refinement and scaling of the new solution, as well as providing each market sufficient time to communicate changes with partners and prepare new content.

During the transformation, our developers worked in several feature teams, each managing a specific domain in Oriflame’s sales process, as well as in a platform team that implements and provides the feature teams with the necessary tools for effective development of standalone frontend applications and their subsequent operation, testing, and further development according to the needs of individual markets.

We were thus involved not only in the transformation itself but also in the development and maintenance of key building blocks for the new frontend, such as OriUI—a library of React components and shared functionalities for building a UI in line with Oriflame's brand design.

Challenge

1. Implementation of Microfrontend Architecture: The challenge was to design and implement a microfrontend architecture that is modular and easily scalable. This required careful planning of how individual components communicate with each other and how they are deployed across the entire system.

2. Ensuring Performance and Speed: During development, it was essential to ensure that the application remained fast and efficient even as the number of user components and server load increased. This required thorough performance testing and code optimization.

3. Coordination Among Teams: The project required close cooperation between several feature teams and the platform team. Coordination was necessary to achieve consistent developer experience (DX) and outputs from the feature teams involved in the transformation, ensuring that there were no disjointed implementations of different parts of the frontend.

4. Adapting Technologies: For the gradual rewrite of the frontend and the operation of applications according to the needs of individual markets, we chose Next.js with a high degree of customization at the routing level and operation in both SSR (Server-Side Rendering) and CSR (Client-Side Rendering) modes, where selected features could be managed from an accompanying admin environment.

5. Handling Changes in Requirements: During development, some business requirements and functions changed, which required flexibility and an agile approach to planning and executing changes without disrupting the workflow. These challenges were significant steps toward the successful realization of the project, highlighting the ability of the ApiTree team to effectively respond to complex requirements and ensure a high-quality end product.

Solution

The solution we delivered successfully advanced the frontend development at Oriflame Software towards modern technologies and high efficiency. It also initiated a fundamental transformation of the entire "Online Solution." Colleagues from Oriflame Software are now building on the foundations we laid together, developing their own ecosystem of tools that new team members can quickly and efficiently work with, enabling them to respond flexibly to the ever-evolving conditions and requirements of individual markets.