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.
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)
Full ownership of the components used
Tailor-made user experience
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.
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.
The catalog and content is fetched at build time to optimise the performance.
Lambda functions are used for registration, authentication and orders.
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.