Why JAMstack?

JAM refers to javascript, api and markdown. It separates the front-end presentation, content management and back-end logic to different modules. It unlocks designer and coder’s creativity for front-end, speeds up loading and improves the performance of the website. Using micro-services also means the team can focus on solving critical business issues and gain valuable time to the market, instead of spending lots of resources to maintain the security or complicity of the back-end.

The Architecture

For this project I used:
- Contentful as my headless CMS;
- Commercelayer as the commerce management system that is connected to the warehouse for product stocking, warehouse, payment and shipping;
- Gatsby to generate static website for the store.
When a merchant uploads the information such as price, quantity and market availability about products in Commercelayer, a content editor can go to Contentful to add more pictures and fill in description of the products, then Gatsby pulls the data from both systems to populate the website. For example, the title, description and pictures are from Contentful, and sizes, availability for delivery, shopping bag and the whole checkout system come from Commercelayer. It also allows flexibility to have multi-national, and multi-lingual website, which can use the same piece of data for the same product. For instance, in Petite&Minimal Store the UK and Sweden shares the same catalog, which means they use the same warehouse in Europe, while US market has a different warehouse, so you won't see certain items, such as coats in US market.

More details

For more details about JAMstack e-commerce demo, please refer to the essay I wrote for this project.

Download PDF