Building a Scalable Microfrontends Platform for a Leading Financial Analytics Provider

Client

The client is a global provider of financial and cross-industry data, helping businesses make informed credit risk and investment decisions.

Need

When the client’s existing solution for financial insights reached its limits, unable to scale efficiently or support growing user demands, the company turned to fintech web development services for ecommerce. They needed a modern solution that could deliver personalized insights, improve data accessibility, and handle growing complexity without sacrificing performance.

With significant volumes of financial information passing through the platform, speed, security, and ease of use were high priorities. The site also had to keep up with the latest front-end innovations while delivering a quick and responsive front-end for customers.

Solution

The Expert Soft team was responsible for the front-end part of the solution. After assessing the existing platform and business requirements, we proposed a microfrontends architecture to ensure the flexibility level required.

Every microfrontend was separated into its own repository, reducing dependencies and making debugging simpler. To enable continuous updates without interruption, we optimized deployment using Amazon S3, while a JSON import map brings in updated components dynamically, enabling continuous enhancement and stability of the system.

During the system redesign with a flexible microfrontends architecture, we also improved the onboarding experience. Taking advantage of this new flexibility, we consolidated a former five-step process into a seamless three-step flow that was more intuitive and easier to use. This allowed users to customize their experience by choosing market sectors, geographic markets, and financial interests so that the homepage could render dynamic content specific to their needs.

We also integrated an AI-powered assistant to make financial data more accessible. Rather than having to hunt for reports manually, the user could now access research, analyze rating trends, and look up investment information through natural language queries. This significantly reduced search time and allowed quicker, more precise information.

In addition to these upgrades, we focused on performance optimizations throughout the platform, allowing seamless data rendering and a future-proof front-end capable of scaling with future user load.

Challenges

Performance Issues in Large Data Tables

The platform presented vast financial datasets in a table form, consisting of thousands of rows and columns. Conventional table structures were unable to handle this amount of data, resulting in slow rendering times and a poor user experience. 

To speed up table rendering, Expert Soft improved table performance with an AG-Grid-based table component from the Design Library and introduced lazy loading for data-heavy pages. This cut down load times, making even the largest sets of data visible within a matter of milliseconds. Users can now navigate financial insights in real time without lag, making data-informed decision-making both quicker and simpler.

Managing permission-based data visibility

The site needed to limit users from viewing data that is not pertinent to their subscription level and access right. For this, we extended back-end security with permission logic management in the UI, so access control became transparent while remaining quick, responsive, and consistent with user-specific settings.

Upgrading to React 18 & adjusting the Design Library

The React 17 to 18 upgrade wasn‘t merely a version upgrade. It was also about tackling significant upgrades in the Design Library and AG Grid, which both involved breaking changes. While React itself had minimal impact, the Design Library saw key components deprecated or reconfigured, requiring careful refactoring to keep microfrontends running smoothly.

AG Grid’s update hit particularly hard, affecting tables across the platform. Since they were everywhere, each one needed to be audited and rewritten. To top it all off, React was hardcoded into RdrGateway‘s import map, so dependencies needed to be strategically updated so that microfrontends would load properly.

Through refactoring the fundamental parts, redoing dependencies, and setting adjustments, we ensured that the migration was seamless, stable, and future-proof, making the platform fast and maintainable.

Managing external dependencies in import maps

The microfrontend configuration needed to be handled carefully in terms of shared dependencies to prevent version clashes and guarantee stability among independently deployed parts. For this, our team reorganized import maps, reducing compatibility issues and simplifying the integration process for different microfrontends. This optimization improved the development workflow and build efficiency.

Technologies

React 18, AG-Grid, Amazon S3, JSON Import Maps