About ModLi

ModLi is a modest fashion marketplace operating in multiple countries with over 50K products. The webshop was originally built with Magento 1 and migrated to PWA Studio on top of Magento Commerce 2.4 in November 2020. Here we want to give a quick overview of the biggest technical challenges on the backend and frontend side as well as the solutions implemented during the PWA project.

Base Technology Stack

For the backend, we chose Magento 2 Commerce because of its advanced marketing and e-commerce features such as Page Builder, content staging, or store credits. Since more than 50% of ModLi’s customers are mobile users, and the ratio constantly shifting more and more towards mobile devices, ModLi decided to take a big leap forward and create the frontend of the webshop as a single page PWA.

Even though PWA Studio did not provide full feature coverage at the start of the project, it was a natural framework choice as it is the PWA solution closest to Magento Commerce, providing out of the box support, for example, for the Page Builder, and is developed and supported by Adobe with the help of the Magento Community.

Multi-Language and Multi-Currency

The ModLi webshop has a global outreach with a growing number of languages and currencies so it was essential to implement all the multi-language and multi-currency features of Magento for PWA. For this, we utilized our ITG PWA Studio Multi-Site and Multi-Language Package, which contains a number of optimizations and improvements over the multi-site support of PWA Studio, such as country-based site selector and GraphQL integration for translations with the Magento backend.

Performance optimization for Catalog GraphQL

To make layered navigation, search and catalog in general performant with a huge number of products, stores, languages, and currencies, the response times of the catalog GraphQL queries had to be improved. Varnish was one of the options to achieve the goal but in this case, it was not considered ideal as the permutations of the different filters, language, and currency variations were huge and even cache warmup would not deliver full coverage. To enhance the catalog GraphQL performance, we leveraged our PWA Performance Package, which is based on Elasticsearch indexing and makes it possible to achieve response times similar to Varnish even for the first time the data is requested without cache warming. For this, we created a separate Magento GraphQL endpoint that can communicate with Elasticsearch without bootstrapping the whole Magento backend and communicating with the database.

Multi-color Bundles

ModLi uses highly bundled products to handle clothing sets, a special sort of “multi-color bundles”, a unique bundle product type with configurable products as their individual options. For example, a swimming dress with different configurable colors and sizes for each part, which can be mixed and matched separately. This product type can consist of hundreds of different simple products with all the different color and size combinations, prices, and gallery images. Multi-color bundles required several frontend and backend optimizations. We also created our own ITG PWA Studio Gallery Package to enhance the UX of the product page.

Checkout

The ModLi checkout experience is tailored for the bundle products during the checkout flow, with PayPal One Touch and Braintree as payment methods and PayPal Express support in the cart. Into our ITG PWA Studio Checkout Package, we compiled these features as well as a progress bar and other UX optimizations.

SEO

ModLi has several SEO adjustments on the frontend side, such as extended meta tags, canonical URLs, hreflang tags, buttons converted to links for better crawlability, optimized 301 and 404 redirects. ModLi also uses Cloudflare as a CDN with a heavy reliance on Service Workers, for example, to route bots to Seo4Ajax, ModLi’s choice of pre-rendering service. We integrate all these solutions in our ITG PWA Studio SEO Package.

Additional Features

ModLi has many other tailored frontend features, including dynamic blocks with Magento Page Builder and content staging, Nosto recommendations with multiple placements and Page Builder Support, GTM integration with improved data layers, customized reward program, and dashboard.

CI/CD

ModLi is built and hosted with our ITG PWA CI/CD solution. In our local environments, we use Rewardenv, a Swiss Army knife CLI utility for orchestrating Docker, developed by our DevOps team based on the well-known Warden tool. ModLi uses Node.js Upward for PWA Studio. The Node.js server is Dockerized via Bitbucket pipelines and pushed to the AWS Fargate service. We also support Kubernetes as an orchestration service.

Conclusion

There are many ways to approach a PWA project. Before starting the development, it is important to have clear commercial and technical goals to build a suitable project for your business’s needs. Above all, it is of utmost importance to work with a professional and experienced team that has a comprehensive understanding of your project´s requirements and operations.

Contact us so we can help you discover the solutions that adapt to your business needs.