WEB3.0 COMPOSABLE COMMERCE EXPERIMENT

-------------------------------------------  COMPLETED ------------------------------------------

We completed this experiment on 5/30/2023.  If you are interested in learning more send me a note r.pedersen@richcanvas3.com. 

  

Solution incorporates on-chain hierarchical NFT Categories for marketplace site navigation and NFT Product Assets for sale.  This eCommerce Solution is driven by on-chain NFT's and associated IPFS metadata stores.   Demonstration implements a Decentraland Marketplace modeled after https://market.decentraland.org.

This solution allows for multiple product providers, selling affiliates and storefronts to collaboratively construct and manage a common marketplace.  Where the catalog and assets are managed entirely on-chain with linked IPFS stored metadata.

This hybrid Web2.0/Web3.0 composable commerce solution overcomes limitations found in current centralized commerce platforms like Opensea and even Decentraland Marketplace.

Github repository for Ethereum Contracts, GraphQL Service, and Marketplace UI link.

All on-chain contracts based on new ERC-721 Catalog and Product Extension Specifications

Blockchain ERC-721 Catalog Extension Specification
- Leverages ERC-6059 Hierarchy Spec
- Introduce Category NFT's
- Introduce new Category metadata standard
- Introduce new Catalog metadata standard

Blockchain ERC-721 Product  Extension Specification
- Introduce Product Asset NFT's
- Introduce new Product Asset metadata standard
- Introduce new Product metadata standard

Technical Architecture
- Web2.0 Vue-Storefront front-end
- Web3.0 Python Product Asset Service (graphQL API) integration between blockchain and headless front-end.
- Web3.0 Python Catalog Service (graphQL API) integration between blockchain and headless front-end
- Web3.0 Ethereum private network geth server
- Web3.0 NFT sync service between Ethereum mainnet and private network
- Web2.0 ODOO Headless Commerce Server (User Mgt, Shopping Cart, Wishlist, and Checkout)


We don't know of any other hybrid Web2.0/Web3.0 composable eCommerce implementation where all metadata is driven by on-chain NFT categories and NFT product assets. 




Goal is to create a similar marketplace to Starbucks Odyssey Marketplace.

Starbucks is working with Nifty to construct an NFT marketplace leveraging the Polygon network.  

The Odyssey Marketplace does not require a customer digital wallet.  User creates a traditional Web2.0 account.  The account generates a private/public key combination using a technology similar to web3Auth.io.  This public key is used to interact with the polygon marketplace.  The user purchases things using a standard credit card.


Odyssey has a Polygon NFT Collection: 0xf9389c150c46b772e5c658ad458d050e9be185cd

Web3.0 Composable Commerce Experiment Implementation 


Vue-Storefront Front-End

Front-end driven by Web3Store Categories and Product Assets

Vue-Storefront is a leading out of the box open source eCommerce front-end (Headless Progressive Web App).  It's composable integration layer connects to a standard GraphQL backend headless services layer.
 
- Storefront Product Asset API composable connected to backend Product Asset Service GraphQL API
- Storefront Category API composable connected to backend Catalog Service GraphQL API
- Introduced a new product assets and asset detail theme pages and associated vue-storefront asset composable.

Vue-Storefront provides a flexible set of eCommerce UI-Components to construct an ecommerce solution.   The pictures below show their out of the box e-commerce UI features.

Decentraland Land and Wearables category hierarchy are held in ERC-721 Catalog Extension NFT's (Categories) derived from ERC-6059 Hierarchy Spec. 

Facetted filter driven by on-chain NFT categories with attribute type metadata stored in IPFS storage.  Product Asset NFT are filtered based on their attribute (trait) data stored in IPFS storage.   NFT-721 Product Extension and NFT-721 Catalog Extension metadata standards make this all possible.

There are many Headless Progressive Web Apps (PWA) like Vue-Storefront that sit on top of headless ecommerce backends like Magento, Shopify, and Commerce Tools.

The goal of this experiment is to show how a standard front-ends framework can be used to produce very similar UI solutions to those found in custom apps like OpenSea marketplace, Decentraland marketplace and Starbucks Odesseys marketplace.


Front-end driven by Web2.0 Commerce ODOO Backend

User Authentication, Account Management, Shopping Cart, Wishlist, Checkout is driven by Web2.0 eCommerce backend ODOO.


Customer Shopping Cart and Wishlist

Backend Services Layer

Front-end PWA retrieves its data from the backend GraphQL services layer.  This services layer provides a standards based API to blockchain category and product asset NFT's.  

Catalog Service 

Marketplace categories are managed on the chain via ERC-721 Catalog Extension contracts link.   

Marketplace category NFT's and Hierarchy is managed via the ERC-6059 hierarchy specification as shown below.

Catalog Service GraphQL API

This service provides the following services to drive marketplace front-ends.

Category Query with Children

results

Category Query w/ Products Results

From the category front-end solutions can get related products.  Products represent blockchain "Product Contracts" that manage Product Asset NFT's.

Marketplace front-ends can choose to show products or they might just show their product asset NFT's directly in a list view.

results

Category Query w/ Attribute Type Results

Attribute Type metadata is used to which Product Asset NFT traits can be filtered on, as shown below.

results

Product Asset Service

Marketplace product asset NFT's are managed on the chain via ERC-721 Product Extension contracts link.   

This service provides a GraphQL API to product assets.

Product Asset Service GraphQL API

This service provides the following services to drive marketplace front-ends.

Product Assets Query by Category Slug

results

Web3.0 Commerce Blockchain Contracts

ERC-721 Catalog Extension Contract link

ERC-721 Product Extension Contract link