Performance and Generation Mechanics of « Verified Reviews » Brand Widgets

Duration
5 months
Team
5 people

The project

Rethink the architecture, generation mechanics, and integration of « Verified Reviews » widgets with a high-performance objective.

Skeepers is the European leader in customer engagement solutions, offering a comprehensive suite of UGC (user-generated content) solutions to help brands interact with consumers, increase their reach, boost engagement, and drive sales. Used by more than 8,000 clients worldwide, Skeepers' solutions are powered by AI to create authentic and effective experiences that build trust and customer loyalty.

Their brand Verified Reviews aims to strengthen trust between brands and consumers by collecting, managing, and publishing authentic and transparent customer reviews. This helps to enhance the online reputation of businesses, increase their conversion rates, and boost their visibility.

The « Verified Reviews » badge widgets are visual widgets integrated into client pages (typically the homepages of retail brands) to highlight the quality of products and services offered through testimonials from « certified » customers. Their presence on the homepages requires high performance of the integrated code execution (code snippet provided to clients) to avoid degrading performance, experience, and SEO. In this context, and following customer feedback, Skeepers requested exFabrica to redefine the architecture, rethink the generation mechanics (back office), and integrate these widgets into client portals with the goal of high performance, responsive display, and tracking solution integration.

This is very good work, the deadlines were met, the widgets adapt to all resolutions, they look great, and they are always very beautiful.

Derhen Houlle, Engineering Manager at Skeepers

Technical proposal

Regarding the technical solution of the widget itself, exFabrica adopted an innovative approach to transition from a non-optimized legacy JS widget to an optimized JS widget, and then to a groundbreaking solution with the generation of a full SVG widget. This new widget offers optimal performance on both Desktop and mobile, with no loss of quality regardless of screen zoom levels. The new widget achieves ultra-fast loading times: from 0.77ms to 1.37ms.

The architecture is based on micro-services using NestJS and TypeORM, employing a Code First approach to generate entities in AWS Aurora. The APIs are documented with REST, Automapper, and Swagger. Widgets are generated in PNG and SVG formats, with SVGs being created on the fly and PNGs generated from the SVGs using the Sharp library. AWS CloudFront and Amazon S3 are used for the distribution and storage of the widgets.

For customers of the « Verified Reviews » brand, an autonomous backoffice has been developed to create customized widgets (shape, size, color, position), generate the « code snippet » to integrate on their site, and automatically regenerate the widgets periodically to display the rating and the correct number of stars based on actual reviews and customer ratings. This backoffice is developed with Angular 13 and Material UI, with automatic generation of proxy objects for API communication via Swagger GEN.

Technical stack

  • API
  • NodeJS
  • NestJS
  • TypeORM
  • AWS
  • BucketS3
  • AWS Aurora
  • AWS CloudFront
  • Angular
  • Material UI
  • VanillaJs

Intervention areas

  • Développement UI
  • Architecture
  • Développement back
  • Développement front
  • Delivery Manager

Results

Speed of execution after delivery
< 2ms
Number of widgets generated
20K per day
Usecases delivered late
0

Client testimonial

Derhen HoulleEngineering Manager at Skeepers

The exFabrica team mastered the project as a whole, not just the technical part that was assigned to them. The developers all share the same vision for the project, they are very involved, and exFabrica brought a true agile organization.

We were very pleasantly surprised by the contribution of SVG, we wouldn't have thought of it ourselves.

We also greatly appreciated the principle of Sprint 0 with the construction of the deployment chain and the Hello World. Usually, we do a first Sprint that mixes functional development and architecture. We will adopt this Sprint 0 for our future projects.

Our exFabrica touch

A multidisciplinary team capable of addressing the entire scope (architecture, backend development, frontend development)

Involvement of a recognized French web performance expert

Proposal for a disruptive technology that goes beyond the client's requirements, aiming for enhanced performance

Introduction of the concept of Sprint 0, which has since been endorsed and widely adopted by the client