Sales platform for seamless customer interactions

One of the key requirements for all tools available on the platform is maintaining high performance. This particular tool deals with a large amount of media content, such as images, videos, and 3D models, so a smart approach to preloading and caching data was required to use the network and resources wisely. In general, a high volume of media content required different performance optimizations.

Our team has implemented literally every feature with the requirement for high performance in mind. To develop a feature called Board, where a user can add some media and represent it to customers, we used virtualization, which let us reduce the amount of rendering content on the page.

To manage preloading and caching media, we created a proprietary media downloading manager, using a library for orchestration with numerous requests.

Also, for preloading media content within the app, we use a dedicated page where users can see preloading progress or skip this step at all by downloading and caching media during tool usage.

Instead of showing actual video, we have enabled showing a video preview on some pages.

There was a need to allow a salesperson to share a created board with preselected items with customers by providing a public link or creating a PDF version.

To generate a PDF version of a board, Node.js has been used for handling it on the back-end side. On the front-end side, it is just needed to provide a URL to a webpage that will be used by the Node.js service to create a corresponding PDF file.

The tool works as a constructor, providing salespeople with the freedom to create different views. So, there was a necessity to implement drag-and-drop functionality on both desktop and touchscreen devices.

To implement the drag-and-drop functionality, we used a special package that supported the drag-and-drop feature on both types of devices.

The right prioritization of the requests for getting media data should have been implemented.

To implement prioritization, a special library, Async, was used. With its help, we first download media already visible to users and then preload media for the content that can be seen only after certain interactions with a page (e.g., opening a full-screen view of media).

The layout should have been adaptive for zooming in a browser to keep the same view.

To address this challenge, we investigated different approaches and decided to use the one that would be most effective in terms of performance and reliability. We have achieved the desirable result with the help of CSS media queries that detect scale changes and manipulations with the default font size.

There was a need to render thousands of items on a page while maintaining high performance.

We implemented a buyer view, i.e., a garment catalog presented to customers, using virtual scrolling realized through react-window. This has allowed us to display thousands of items without the risk of page freezing.

We should have implemented a complicated drag-and-drop interface to ensure a seamless user experience.

Our developers have built a drag-and-drop catalog constructor with complicated logic and hotkey support, using the React dnd kit.

Again, project requirements suggested adding the ability to generate PDF files.

We implemented this feature by leveraging the power of Google Cloud Run. In this service, Puppeteer is used for PDF file generation, while Google Cloud Bucket stores generated files.

It was important to enable the quick creation of visually appealing catalogs with minimal manual configuration.

We utilized specialized algorithms to dynamically generate layouts based on such factors as item type, screen size, and quantity, ensuring optimal presentation across various devices and scenarios.

The project requirements suggested building a configurable and flexible main application that could be managed through an admin panel, using which a user could customize colors, fonts, and background media, as well as add custom translations, user agreements, and particular checkout and payment options.

React in combination with TypeScript was used to build the features, enabling data reception, editing, and saving for the main application, with an abstract approach to page construction for consistent visual results regardless of settings.

As the tool should have been multi-language, we needed to enable support for more than 10 languages.

Our developers used the POEditor tool to enable the application to support a multitude of languages.

It was also paramount to implement smooth animations within the app.

Our team mostly used native CSS for animation creation, which was the best choice due to its performance, convenience, smaller code size, and better compatibility with modern technologies. However, for some specific cases, the react-spring library was also used.

We were tasked with implementing a full-screen media viewing mode that would offer users an engaging and interactive experience as well as facilitate seamless image browsing, switching, and zooming through intuitive gestures and smooth transitions.

Our team leveraged various third-party libraries like react-zoom-pan-pinch and use-gesture, which resulted in implementing a full-screen media view fully aligned with all essential requirements.