Note
As promised during the recent talks: with the April/May 2025 update, the core and Web libraries are now Preply-agnostic, and we rewrote the docs and tutorials accordingly.
This repository contains the implementation of Preply's design system Visual Coverage (React and React Native), that's how Preply measure the impact of the Design System from the users' perspective. If you haven't done it before, please read the Visual coverage: Why and How Preply Measures the Impact of the Design System article about the topic to know the why's behind it, and The Implementation Details of Preply’s Design System Visual Coverage to dig into the implementation details and performance optimizations.
Measuring the impact of a design system is something all the companies that have one struggle with. By sharing the visual coverage's implementation our implementation, we aim to to provide a quick way to test our solution on other companies' context, then collecting feedback and improving it.
This monorepo comes from Preply's design system, and we removed everything apart fro the visual coverage code.
Follow the instructions shared in the @preply/ds-visual-coverage-web's README.
Please note: only some relevant functions are tested, but the code has been battle tested on Preply.com since we calculate the visual coverage there thousands of times a day.
In the production-code/web directory, you can look at all the functions we use to enable the visual coverage in prod and how we send data to our Data Warehouse which, in turn, sends the visual coverage events to DataDog. We are sharing it just to show how we use it, we don't expect you to copy/paste it in your website.
The code we run in our web app is the following
if (isDsVisualCoverageSupported() === 'yes') {
initDsVisualCoverageInProd({
userType,
log: false,
checkInterval: 500,
}).start();
}If you also use DataDog, look at datadog-dashboard.json to create the same dashboard of ours in seconds. Please note it's the dashboard we have at the moment of writing, we will improve it since it's not 100% done but maybe we will not keep the JSON file aligned.
datadog-monitoring-dashboard.json is useful to track and check errors and warnings.
At the moment of writing, the React Native implementation is not as portable as the Web one. We suggest you to get in touch with us if you want to use it on React Native.
We'd like to head your feedback, you can contact us at design-system@preply.com, or directly with me on X, GitHub, or LinkedIn.