Building frontend UI components

In this section, we will build our digital art market DApp frontend components. Before we start to write the code, we will install all the dependencies needed in the project.

Setting up project dependencies

In our DApp frontend, we will use the MDB framework as a UI CSS framework, react-route as a URL router navigation library, and truffle-contract as a utility to read the compiled contract ABI file. Web3 is used to communicate with the backend blockchain network. The following is the list of the npm dependencies defined in package.json:

Figure 10.22 – Project dependencies

Install all these dependencies by running the install command, as shown here:

npm install

After installing all the necessary dependencies, we will instantiate our smart contract instance.

Getting the instance of a deployed contract

In the Working with the Web3 JavaScript API section, we learned how to instantiate a Web3 instance...