Client

RxVantage

Technologies
  • React
  • WordPress
  • Marketo
LittleBox's Role

Solution architecture, web development and project management

RxVantage is a US-based company that connects healthcare providers with medical experts primarily via their flagship mobile and desktop applications. They needed a new corporate website to support their substantial online ecosystem. The goal was to build a site that not only reflected their precise branding direction, but was also easy for non technical stakeholders to manage, highly performant and secure.

Our role and solution

The LittleBox team was brought on to develop this new central hub for RxVantage’s corporate brand. After some careful study, it became clear that at the time, leading OSS server side CMS’s such as Django, WordPress or others did not quite have the frontend performance needed to drive the client’s vision. On the other hand, the node based CMS offerings were largely immature at the time, and the client was better acquainted with WordPress. We resolved to develop a bespoke headless implementation, with React as the speedy frontend, and WordPress as the well rounded backend service.

Custom decoupled architecture  & content empowerment

We needed the best of both worlds: performant frontend and intuitive backend, but it presented it us with some not insignificant engineering challenges. At the time, the WordPress REST API was approaching maturity but was not well expanded to include the other tools we needed, like Advanced Custom Fields, Yoast SEO, Search and a series of others. The client needed powerful control over their content in the form of a dynamic page builder. Instead of creating a series of pre-defined templated content types or static pages, we needed to support a rich, multi component page builder (before blocks and Gutenberg!).

We built our modules on top of the core REST controller, but expanding it to deliver support to our additionally required functionality. On the React side, we had to make sure that each route and URL was gracefully handled dynamically, while still respecting good SEO practices like canonical paths, and further that each page layout and content structure was fully dynamic, shaped completely but the incoming API response.

In the end, our solution provided the client with complete autonomy over their content. The custom-built CMS makes it easy for the RxVantage team to create new landing pages and edit existing content without needing to stay within the confines of a series of rigidly structured templates, site map or even content modules.

A host of integrations

To support the client’s marketing and sales efforts, we integrated the new site with a series of third party tools, including tracking, accessibility enhancers, analytics and chat bots. Probably the most interesting use case was our deep Marketo integration. Although Marketo does expose an API, its scope at the time was restrictive. Marketo’s primary integration use case was simple form embedding, where all markup was controlled by the Marketo servers and rendered in an iFrame. This presented two main issues: the markup was impossible to customize adequately to respect the site look and feel; we needed certain triggers from Marketo submissions to be used to gate custom resources in the RxVantage resource library. Our team had to dynamically unpack each response from Marketo and then re-assemble each HTML form in native React. We had to sniff and then reverse engineer Marketo’s interactivity on the site and then simulate it ourselves in order to properly submit info back to the Marketo servers while still acting as a proper middle man. Marketo’s public integration API and toolkit has improved a lot since then, but these early integration days were an engineering challenge into themselves.

Performance tuning

We optimized our React site for high performance using insights from Google Lighthouse audits. By systematically analyzing Lighthouse’s performance metrics such as Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), we identified and resolved key bottlenecks affecting speed and responsiveness. This included implementing code splitting and lazy loading to reduce initial bundle size, optimizing image assets with next-gen formats. We leveraged efficient caching strategies including local cache management with local forage, and spent extensive time analyzing the React profiler for expensive or blocking rendering components, inefficient tree shaking and slow queries.  We also minimized render-blocking scripts, removed unused dependencies, and ensured critical CSS was inlined for faster above-the-fold rendering. Continuous Lighthouse testing became part of our CI pipeline, allowing us to maintain near-perfect performance scores as we iterated on new features.

The demands on the backend were similarly rigorous. WordPress is not a naturally high performance platform, and the nature of our dynamic content building approach further taxed the limit of what the WordPress content query API could handle. Using flame graph and other slow path analysis tools, we spent time combing trough the app, adjusting and optimizing queries where needed and managing the transient cache with precise granular control.

Finally we designed and lead the implementation of powerful caching middleware both on the frontend and backend in order to make sure large REST queries were delivered at high speed.

RX - thumb 1
RX - thumb 2

Key outcomes

The final product is a high-performance, flexible, and powerful website that truly represents the RxVantage brand. By building a platform that empowers the client to manage their content easily and efficiently, we provided them with the digital tools necessary to grow their business and engage their audience. The new site delivers a superior user experience, performance, and a solid foundation for future growth.