A leading Saudi Arabian tech company aimed to streamline its complex ecosystem of nearly 40 websites. However, significant operational challenges stifled its business efforts. Within three months, it succeeded in all its business plans: it modernized the front end, implemented a unified React architecture, and established a secure system, leading to a years-long partnership with TSH.
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, multiple business issues held up 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 held a lot of fragile data, making security a critical concern. The organization wanted to make upkeep faster, cheaper, and future-proof.
Business problems
An outdated platform can significantly hinder user engagement and satisfaction and be a headache for teams maintaining and improving it.
We were approached with a clear set of business problems:
- The organization hadn’t architecturally planned for such a gigantic project, making maintenance and expansion counterproductive.
- The platform’s different applications used a mix of technologies, primarily React and Vue, causing inconsistencies and complicating scalability.
- The dedicated team had to manually maintain and improve each application. Every small change required extensive coordination and took too much time (e.g., adding an extra partner logo in the footer required sending the graphic element to various teams, and each app had to introduce that change manually).
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 final success factors:
- Easily add more applications and unify the technology stack. This required creating a central source of information with common parts for all websites to manage and maintain the entire ecosystem.
- 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 requiring advanced security to handle fragile data.
Tech requirements
Our solution included:
- Frontend modernization
- React unification
- Micro-frontend architecture
- React Core (a single knowledge base that automatically integrates and manages common components across the entire ecosystem)
The ecosystem consisted of nearly 40 websites, each serving different user personas and fulfilling various business functions. Instead of handling each app separately, we introduced React Core — a single knowledge base that integrates and manages common components automatically.
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 project started with a detailed planning phase, engaging all teams to estimate the time required for full implementation. We conducted an in-depth analysis of the current architecture, identifying key issues in infrastructure, deployment, and developers’ needs. This discovery phase was crucial in selecting appropriate end-user applications.
To meet the tight 3-month deadline, we onboarded additional team members and simplified complex logic where necessary. This planning resulted in a well-defined backlog — a roadmap with milestones.
Stage 2: Developing architecture
We developed a modular architecture based on micro-frontends, allowing independent development of individual components. This standardized website creation and reduced implementation time.
Technological goals
TSH was chosen as leader to coordinate efforts across websites and services, integrate new business functions, and unify user experience.
Tasks included:
- Establishing React Core to manage permanent elements like menus, footers, and sidebars across apps.
- Introducing scalable, microservices-based architecture.
- Ensuring a uniform technology stack with React modernization.
- Developing a custom React Starter to support automation.
- Revamping the interface with modern design philosophy.
- Boosting efficiency and performance to meet user demands and frontend standards.
Planning and risk analysis
We meticulously planned work, set milestones, and conducted comprehensive risk analysis to minimize impacts.
Security procedures were integrated early to prevent issues later.
Agile development
Using agile methods, progress was continuously monitored, allowing adjustments to keep on track.
Unifying frontend technology to React
Various frontend technologies (React, Vue) were unified to React for consistency. Standardization tools controlled logs and common processes.
Stage 3: Creating React Starter
We developed a React Starter with tools and configurations for quick launch, serving as a boilerplate for all ecosystem websites. It includes user authorization, routing, translation, and third-party integrations.
Clients received a ready-to-use app featuring common elements like menus and navigation. Only unique views needed addition.
The core includes a library of pre-built components, speeding development.
Designers upload UI elements to the core; vendors integrate these easily without separate setups, enabling fast feature additions.
React Starter ensures agility and responsiveness, allowing smooth onboarding or departure of team members.
Stage 4: Implementing React Core
We implemented React Core, a package with common components and functionalities like authentication and language management.
React Core acts as:
- Central project management hub, setting standards for vendors.
- Component repository accessed across sites for consistency.
- Ensures continuity despite personnel or vendor changes.
- Propagates global changes automatically.
- Allows cross-app display of elements.
- Client-approved for consistent appearance, robust functionality, and high security.
- Provides expandable app options.
Stage 5: Finishing touches
We collaborated with design teams to develop user-friendly designs based on existing implementations and business changes. Event Storming was used to map business processes for clearer developer understanding and documentation.
Design elements were uploaded to React Core and propagated through the ecosystem.
We created comprehensive technical and business documentation, established issue reporting processes, and opened communication channels for ongoing support.
All microservices were integrated with React Starter and Core, tested extensively, supported migration, and used automation for smooth transitions.
Deliverables & effects
Previously, the platform was chaotic: changes in logos or elements required updates in 20 different apps from various vendors.
The plan was to bring order and unify the platform under React and the latest Vue, gaining more control.
Key tools included:
- React-Project-Starter and NPM-Package-Starter: Quick start tools adhering to standards.
- NDA-React-Scripts: Commands for building, testing, and running apps, simplifying configuration.
- NDA-Eslint-Config: Ensures code uniformity across frontend apps, easing debugging.
- React-NDA-Core: Provides core functions like authorization, routing, and translation; propagates micro-frontend components across the platform.
Benefits for the Saudi partner
- Business changes now take hours, not weeks.
- All websites unified under React with standardized app creation and design systems.
- Micro-frontend architecture enables rapid, global business changes.
- Changes are made once in Core, then distributed globally (e.g., global search engine functionality).
- Bootstrapping new apps takes a day instead of two weeks.
- Developers focus more on business processes rather than app configuration.
- Centralized configuration improves performance and reduces CI/CD costs.
- Platform stability improved with fewer production issues due to thorough testing.
- 300+ developers coordinated effectively with smooth communication and defined processes.
- Improved UX/UI increased user engagement and reduced support calls.
- Frontend modernization completed in 3 months despite tight deadlines.
- Long-term partnership with TSH ensures continued support and development.
- Platform user base grew to over 11 million active users in Saudi Arabia (82% of the target audience).
