5. Creating an Art Marketplace on the Ethereum Blockchain

An art marketplace is one of the best use cases of non-fungible tokens given that we can identify each unique piece with a provable secure number that also helps to track changes about who owned it in the past. Great for making sure that the piece has been in the right hands.

That’s why you’re going to learn how to create a digital art marketplace for selling digital artistic creations such as those that you find on DeviantArt and dribble. We’ll start by setting up the project in react.js, then the user interface and finally implement the framework for making our entire ERC-721 application.

6. Setting up the React.js Application

In this project we’ll use react because it’s a powerful technology for managing applications once setup. Let’s start by setting up all the essentials for using react properly.

First, create a new project called art-marketplace . Inside, run the command npm init -y to setup node.js so that you can install node packages. Install the following packages like so:

npm i -S @0xcert/cert @0xcert/conventions @0xcert/ethereum-asset-ledger @0xcert/ethereum-metamask-provider @babel/core @babel/preset-env @babel/preset-react babel-polyfill babel-loader css-loader html-loader html-webpack-plugin react react-dom style-loader webpack webpack-cli

That huge line of code will install the require 0xcert dependencies, babel, webpack and react.

Then create 2 folders: dist/ and src/ . The source folder will contain the uncompressed react code while the distribution folder will contain the files that will be sent to your users.

Now create a webpack.config.js file to setup the compiler that will generate our distribution code. Here’s how it looks like:

We’re essentially setting up the entry, output, the loaders for css, html and javascript.

Inside the src/ folder create an index.ejs file containing this basic html structure:

HtmlWebpackPlugin is the plugin we installed at the beginning. You now will see the changes every time you compile webpack without having to clear the cache because a new html file will be generated.

Then create 2 empty index.js and index.css files which we’ll use in the next section with our entire application’s code.

7. Creating the React.js User Interface

In this section we’ll write the entire code for designing our 0xcert react application that will generate an art marketplace where you can create unique art pieces. First setup the structure commonly used in many react applications inside index.js :

Then create the babel configuration file which is required to let webpack know how to process these types of files. Create a file called .babelrc and put this content inside:

That will compile your files properly. To see your application, bundle your code by running webpack -d on your root project folder and setup a static web server with http-server dist/ . If you don’t have it, you can install it easily with npm i -g http-server

Which will generate a static server for you that you can open at localhost:8080 . You’ll see a message on the website saying, “The project is setup.” which is exactly what we coded in the react file.

We now need to add a few buttons and information to help people understand what’s going on. Change your render function to the following:

As you can see, I’ve added an h1 tag with a paragraph to describe the project clearly, then we’ve added a container that will hold all of our art pieces and a couple buttons to deploy and update your collection. Take a look at the changes by compiling with webpack -d and running the server again.

If you get tired of constantly having to re-bundling the code, you can run webpack as a service with the command webpack -w -d where the -w flag means watch so that it updates the bundle every time you save some changes in your files. The flag -d means development which doesn’t minimize your code for better error messages.

After your application is complete, use the flag -p instead of -d which means production for improved speed and reduced bundle size. Improve the appearance of the project with some css:

So that it looks like so:

Now that you have the design done, let’s move on onto adding the 0xcert functionality to create assets and interacting with them.

8. Using 0xcert for Generating ERC-721 Tokens

The way 0xcert generates ERC-721 is very interesting. Each token is sorted in Assets, Asset Ledgers and Blueprints. The process goes as follow:

Define a schema which contains information describing the asset. Think of an asset ledger as a box of toys, each asset as a toy and the schema as a text describing what’s inside that box. The schema will determine the name of each asset, the description and any other feature you’d like to add. Each schema has different mandatory properties. For instance, if you use the schema 88 to define your assets, you must setup a name, description and image for each token. Then you can add more optional properties up to you such as age or color. In that schema 88 you also have to use the $schema property to let others understand that you’re following that specification. Deploy an asset ledger that will contain 1 type of asset. A ledger contains 1 type of asset with its unique properties, for instance: the hotel asset ledger contains 30 hotels with the same properties such as number of rooms. The apartments asset ledger contains 100 different apartments and the penthouses asset ledger contains 20 different penthouses. We are creating different versions of houses in each ledger while each ledger contains identical copies. Create a new asset inside the deployed ledger with a unique id. If you try to deploy that asset again, you’ll receive an error. The asset is associated with the account of your choice, generally yourself.

You can then transfer, delete or create new assets. Usually ledgers are managed by various accounts so they can create or delete assets as needed. Note that assets are identified by numbers. Each number id must be unique. You can make approval like with ERC20.

First we need to import the required 0xcert libraries, do so with these imports at the top of your file:

You can omit the comments if you want, they are for clarification purposes. We need the MetamaskProvider for using metamask in our application. Then schema88 which is our blueprint describing the type of ERC-721 tokens we want to create, it’s where we define the characteristics of our asset.

Then we imported the Cert library which is used for certification of your assets. The AssetLedger class will be used for creating and using ledgers while the AssetLedgerCapability will be used to indicate the permissions that our ledger has when it comes to using the tokens inside it.

Remember, the process that we’ll follow is:

Create the schema with the properties of our Art Pieces. Deploy an asset ledger with the schemaId that you wish to use. Create as many new assets as we want inside this ledger. Note that you must generate a new imprint for each asset.

Now we can start to create our blueprint. To do so, create a function inside your react project like so:

The asset object provides the name, description and an image of the art piece we’ll use. You can define as many properties as you want like color, size, age and so on, the idea is to provide as much information as possible about the asset for your decentralized applications. The schema88 that we’re using in this example,

Then we are generating the imprint. The imprint is a unique hash containing those asset inputs. It’s a cryptographic proof for verifying the token. Then the expose function is just used to read properties of the imprint which in this case is the [‘name'] and the [‘image'] url. Setup your asset properties or use the same as me and console.log the imprint and expose functions, you can see the result on the console of the developer tools.

Update your code like so and run the project again:

You can see that the blueprint has been created successfully from the expose function: