Saudi Arabian tech leader

This platform is known for its digital solutions aimed at enhancing business processes and efficiency, including resource planning (ERP), customer relationship management (CRM), and other business management needs.

As the platform’s user base and scope grew, the company noticed multiple business issues holding up its day-to-day operations. The main issue was a mishmash of technologies that prolonged development, forcing employees to manually maintain an extremely complex ecosystem of nearly 40 websites. Additionally, the system holds a lot of fragile data, making the company cautious about security. The organization wanted to make the upkeep faster, cheaper, and future-proof. 

Business problems

An outdated platform can significantly hinder user engagement and satisfaction and be a headache for teams that maintain and improve it. 

We were approached with a clear set of business problems: 

1. The organization didn’t plan architecturally for such a gigantic project, which made it counterproductive to maintain and expand. 
2. The platform’s different applications used a mix of technologies, primarily React and Vue, which caused inconsistencies and complicated scalability.
3. The dedicated team had to manually maintain and improve each application. Every tiny change required a lot of coordination and took too much time (e.g., to add an extra partner logo in the footer, the graphic element had to be sent to various teams, and each app had to introduce that change by hand). 

Desired business outcomes

This was one of the biggest projects TSH has ever worked on. Based on business requirements, together with our Saudi partner, we established the final success factors: 

1. Easily add more applications and unify the technology stack. To fulfill that goal, a central source of information with common parts of all websites must be created to manage and maintain the entire ecosystem.
2. End users must feel like they are operating a single application when, technically, it’s an interconnected web of various services. 

We analyzed the business goals and recommended a technical solution based on our findings – a scalable and modular architecture for their platform, which would require advanced security to handle the aforementioned fragile data. 

Tech requirements

Our solution included: 

• frontend modernization, 
• React unification, 
• micro-fronted architecture,
• React Core (a single knowledge base that automatically integrates and manages common components across the entire ecosystem).

The client’s ecosystem consisted of nearly 40 websites, each serving different user personas and fulfilling various business functions. Instead of manually handling each app separately, we introduced React Core – a single knowledge base that automatically integrates and manages common components across the entire ecosystem. 

It only took three months to achieve the project’s success. This resulted in continuous, years-long cooperation, with TSH as the technological leader for over 300 developers from multiple companies involved in the platform. 

Stage 1: Business analysis

The Saudi company initiated the project with a detailed planning phase, engaging all teams to estimate the time required for full implementation. During this phase, we conducted an in-depth analysis of the current architecture, identifying key issues in the infrastructure, deployment process, and developers’ needs. This discovery phase was crucial in selecting appropriate end-user applications.

To meet the tight 3-month deadline, we took proactive measures such as onboarding additional team members and simplifying complex logic when necessary. This planning phase resulted in a well-defined backlog of tasks – a roadmap with milestones.

Stage 2: Developing architecture

We developed a modular architecture based on micro-frontends, allowing for independent development of individual components. This approach standardizes the creation of individual websites and reduces the time required to implement changes.

The technological goals

The Software House team has been chosen as a leader for all developers involved in the project – coordinating efforts across numerous websites and services, integrating new business functions, and aligning all elements under a single, cohesive user experience.

Tasks for our team included:

• establishing React Core – since independent teams and companies work on different apps, the main source must contain permanent elements for all websites (e.g., menus, footers, and sidebars),
• introducing scalable, microservices-based architecture,
• ensuring a uniform technology stack with React modernization,
• developing a custom React Starter to support automation,
• revamping the interface according to modern design philosophy,
• boosting efficiency and performance to meet growing user demands and contemporary frontend standards.

Planning and analyzing risks

We meticulously planned and estimated the necessary work, set individual milestones, and conducted a comprehensive risk analysis to minimize potential impacts on the solution’s delivery. 

Instead of putting out fires later, we always expect the unexpected and introduce security procedures accordingly at the early stages of working on a project. 

Agile development

Using an agile approach, we continuously monitored work progress. This method allowed us to adjust estimates and work pace as necessary, ensuring we stayed on track to meet deadlines.

Unifying frontend technology to React

Different applications on the websites used different technologies on frontend. Some operated on React, and others on Vue. During the entire process, the technology was to be unified on React. Standardization tools were to be implemented to control logs and handle processes common to the entire platform.

Stage 3: Creating React Starter

We have developed a React Starter with all the tools and configurations for a quick launch. It serves as a comprehensive boilerplate and tech stack for all ecosystem websites. This powerful tool generates a fully configured application seamlessly connected to the core architecture with built-in user authorization, routing, translation management, and third-party integrations.

With our custom React Starter, clients receive a ready-made app they can use to log in immediately. It features common elements such as a complete menu, intuitive navigation, and all essential functions. The only task left is to add the styled unique views. 

The core already includes a library of pre-built components, eliminating the need to create them from scratch and significantly speeding up the development process.

Our system is designed to streamline the vendor integration process. Designers create the UI and upload it to the core, and vendors easily incorporate those elements into their applications without requiring separate setups. This allows additional functionalities to be implemented with a single command!

Furthermore, our React Starter ensures that all teams remain agile and responsive. Thanks to the standardized and user-friendly setup, everybody works without interruption – even if someone drops out or a new team member joins. Our React Starter is the ultimate solution for developers seeking efficiency, flexibility, and ease of use in their web projects.

Stage 4: Implementing React Core

We implemented React Core, a set of common components and functionalities, such as user authentication and language management.

 This package included:

• Centralized project management. React Core is the central hub for project management, setting standards and architecture for all external vendors and projects.
• Component repository. Components listed in the repository are accessed and used by other sites, ensuring consistency throughout the ecosystem.
• Consistency and continuity: Even if personnel or vendors change, everyone understands the architecture and what is happening in the project from the get-go.
• Global changes: “automagically” propagates the changes to existing components. 
• Cross-app display: Once configured in projects, elements or views from one app can be displayed in another. Standardized elements support developers across the platform.
• Client-approved core: The core, agreed upon with the client, ensures consistent appearance, robust functionality, and extra-high data security.
• Expandable apps: While everyone can use a base option, there is also flexibility to expand applications.

Stage 5: Finishing touches

Creating Designs

We collaborated with a dedicated design team to develop new, user-friendly designs based on the existing implementation while incorporating necessary business changes. We employed Event Storming to map out the business processes, providing developers with a clear understanding of the business logic, accelerating onboarding, and laying the foundation for comprehensive documentation.

All design elements are uploaded to React Core through the design system library and later spread throughout the ecosystem like other elements. 

Documentation and support

We developed comprehensive technical and business documentation, established processes for reporting React Starter and Core issues, and opened communication channels for all teams, providing ongoing production support.

Integration and testing

All microservices were integrated with React Starter and Core. We conducted numerous tests to ensure consistency and reliability, supported the migration process, and used automation tools to ensure smooth transitions.

Deliverables & effects

In the past, things were a bit chaotic. Everything was written in an old version of Vue, and there was no consistent standard across vendors. Something as simple as changing a logo in the footer required updates in 20 different applications from various vendors.

The plan was to bring order and switch everything to React or the new version of Vue, allowing for more control over the entire ecosystem:

• React-Project-Starter and NPM-Package-Starter

These tools ensure a quick start for new projects and packages, adhering to accepted standards and conventions, thereby minimizing the time needed for initial setup.

• NDA-React-Scripts

It is heavily inspired by the `react-scripts` library and provides commands for building, testing, and starting the application in development mode. The framework offloads the responsibility of application configuration from business websites, allowing them to focus on implementing new functionalities.

• NDA-Eslint-Config

This configuration ensures uniformity in the code of the client’s frontend applications, making transitions between projects seamless. It simplifies debugging for the Core team, as all sites maintain a consistent structure.

• React-NDA-Core

This library provides essential functionalities such as user authorization, routing, and translation management in business applications. It also propagates micro-frontend components throughout the organization, ensuring correct typing, loading states, and error handling.

Benefits for the Saudi partner. Changes take hours, not weeks

Spending extra time on research and planning can be worthwhile, and it pays off in the long run.

Business changes are quickly introduced globally

All websites are unified under a single React technology, featuring a standardized application creation structure and a comprehensive Design System implementation. The micro-frontend architecture allows for rapid and widespread implementation of business changes. 

Now, the organization makes changes only in the Core, not individual applications, one by one. For instance, we added an urgently required “global search engine” functionality to the React Core, and from there, it was distributed globally to all end customers simultaneously.

Bootstrapping a new app takes a day instead of two weeks

Facilitating business management, we focus on checking the core rather than individual applications, streamlining oversight and maintenance. 

Initially, launching a new project took about two weeks to bootstrap a new app, but now it takes just one working day. 

This efficiency is particularly beneficial for large clients with complex applications (just like this project), as there is no need to build anything from scratch.

More time to focus on actual business processes

Developers working on business websites can concentrate on understanding and implementing the client’s business needs without worrying about application configuration or user authorization. Various libraries from the Core team provide these functionalities.

Configuration is finally efficiently centralized

By centralizing the configuration of bundlers or test runners within the NDA-React-Scripts library, the Core team performs numerous experiments and tests to improve performance. Once identified as more efficient, these changes are propagated globally, reducing test execution times and the application build process, which requires less budget for managing the CI/CD infrastructure.

Debugging

The company achieved greater platform stability with fewer reports of production issues. While the micro-frontend architecture allows for rapidly propagating new functionalities, it can also spread bugs globally. 

Thorough testing of all functionalities before each release is now the norm. It is precisely because we provide a ready-made component that we do not have to test globally.

The app’s maintainers don’t have to consider whether uploaded components are battle-tested. They are isolated from the target application but can be adapted locally on chosen websites. 

300 people onboard and no communication breakdowns

Working on a large project requires effective communication and well-defined processes, especially if nearly 300 developers from different companies and countries are on board. By establishing easy and natural communication channels, we eliminated unresolved questions that accumulated and created more significant problems. Now everybody knows what’s up at all times. 

Enhanced UX/UI

Increased user engagement resulted in fewer support calls for website operations, which shows that end-users find the platform intuitive and easy to use and are willing to trust the organization with their data. 

Frontend modernization in just three months

The Saudi company, with TSH’s support, successfully designed and implemented a scalable, modular architecture with stable React Core. The frontend modernization and unification enabled easy integration and management of common components, ensuring high performance, top security, and flexibility.

Despite a tight deadline—two months for development and one month for testing and migration—all goals were achieved. 

Keeping a stable partner for years

Now, the TSH team permanently leads the frontend part of the project. The Software House has managed the client’s scattered frontend teams for the past two years. Stable cooperation and shared trust have significantly contributed to the success of this streamlined process. 

The improvements have allowed the platform to freely increase its user base. As of this writing, 82% of its target audience in Saudi Arabia uses the ecosystem—over 11 million users!

We continue to work on new solutions and customer needs, share our knowledge with other teams, and support and supervise them in their daily work.