menu
  • A
  • N
  • N
  • I
  • E
  • T
  • A
  • Y
  • L
  • O
  • R
  • C
  • H
  • E
  • N

The Making of Petite & Minimal Store

Petite & Minimal is actually my lifestyle website (which I also coded myself, you can read The Making of Petite & Minimal , if interested), where I write about eco-friendly options when it comes to food, beauty, style, and minimal living and travel etc. Fashion is one topic I write and think about often, so when it comes to building an e-commerce demo, I chose to build a store that sells clothes that I would buy.

What I did

  1. Web Development
  2. Content Creation
  3. Graphic Design

Tech I used

  1. Gatsby.js
  2. GraphQL
  3. Contentful
  4. Commercelayer
  5. Netlify
LIVE DEMO VIEW CODE

Year: 2020

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

Back to Projects