Building an eCommerce PWA

How we built an eCommerce Progressive Web App (PWA) with Magento 2 and Contentful.

Insights on our approach to build a PWA eCommerce website for a fashion retailer with Magento 2 and Contentful.

What is a Progressive Web App?

Progressive Web Apps are web applications that take advantage of the latest technologies to combine the best of web and mobile apps.

For more information about Progressive Web Apps, read our article about Progressive Web Apps.

The Project

Our objective was to build an e-commerce website with the following:

  • Perfect score on Google PageSpeed and the PWA badge

  • Integrate with Magento for the catalog and e-commerce features

  • Manage the content using a third party Content Management System (Contentful)

Technical requirements

  • Lightweight infrastructure

  • Full ownership of the components used

  • Tailor-made user experience

Architecture

We built an eCommerce website with Gatsby, a static site generator built on top of React with Webpack and GraphQL.

Other frameworks are available to build E-Commerce Progressive Web Apps such as Vue Storefront which is cross-platform compatible (Magento 1, Magento 2, Shopify etc) and Magento PWA Studio which is a set of tools provided by Magento to build an E-Commerce PWA website.

Read our article about eCommerce PWA frameworks for more information.

Data Layer

GraphQL is query language for API. Gatsby leverages GraphQL to build its data layer at build time.

It provides us with a consistent way to query data from any content source.

Project Structure

Project Structure

Build workflow

The catalog and content is fetched at build time to optimise the performance.

pwa-build-workflow

Lambda functions

Lambda functions are used for registration, authentication and orders.

lambda-functions

A next generation shopping experience

The result is a fast, reliable and engaging eCommerce website with a performance score of 95/100 on Google Lighthouse.

The website features News and a Discovery sections as well as dynamic Shoppable images thanks to the powerful Content Management System implemented.

Have a look at the project here.