Table of contents:

• Introduction
• Requirements
• Dependencies and installation
• Project structure
  • Client folder
  • Contracts folder
  • Migrations folder
  • Test folder

Introduction

This is an example of simple CRUD DApp, a decentralized application running on Ethereum blockchain. The application is composed of two main parts:

• The backend, running on the blockchain with a smart contract (in Solidity);
• The frontend, made in React and connected to the blockchain to allow CRUD operations.

You can clone the repository on your computer and run the project, but you'll need to have some tools installed on your computer.

Requirements

As mentioned above, you need to satisfy the requirements to run this application. You need to have installed on your computer:

• Node.js
• npm
• truffle --> a Solidity framework, made in Node.js, that you can simply install with npm
• ganache --> a local Ethereum blockchain that can be used to test smart contracts
• metamask --> a crypto wallet that you'll need to configure to interact with the application

Otherwise, you can use Remix, an online Solidity IDE, to test smart contracts.

Once all the tools have been installed, you need to set up Metamask, connecting it to one of the automatic generated accounts of Ganache.

Here you can see the Ganache UI, with all the accounts with the balances and the network informations. You'll need to connect Metamask to this local network, with one of the Ganache accounts, as you can see in the next two images.

Once Metamask is correctly configured you can continue with the installation.

Dependencies and installation

You need to clone the repository on your computer, than compile and deploy the smart contracts to your local blockchain with this commands:

truffle compile

truffle deploy

Now the smart contracts are deployed, you have to go to the "client" folder and install the npm dependencies with:

npm install

Once installed the dependecies, all is ready and you only need to start the node server with:

npm start

You can check the application running on your browser:

Let's see the npm dependencies:

• @material-ui/core and @material-ui/icons
• node-sass
• react, react-dom and react-scripts
• web3 --> a collaction of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.

Project structure

Client folder

The "client" folder contains the frontend of the application, made in React.

As in the other projects, i organize the React components following the Atomic Design methodology, although in this project there are few components.

Furthermore i didn't used class components but only functional components, with React Hooks.

In the "components" folder there are all the React components with their scss files. In the "contracts" folder there are the json generated compiling the smart contracts. In this json files there is data that the frontend need to use to connect to the smart contract deployed to the blockchain. In the "utils" folder there are two files, containing the functions to instantiate the Web3 client and the smart contract instance.

For a more detailed analysis of the code, i recommend reading the code's comments.

Contracts folder

This folder contains the smart contracts written in Solidity. The "Crud" file is the smart contract on wich the application is based and contains all the CRUD functions.

Migrations folder

The "migration" folder contains the JavaScript files needed to deploy the contracts to the Ethereum network.

You can run the migration from the console with this command:

truffle migrate

Test folder

The "test" folder contains the JavaScript files needed to test the smart contracts. Indeed, once a smart contract is deployed to the network, you can't edit the code and fix bugs. The code is immutable, once it's in the blockchain.

Therefore smart contracts need to be tested carefully before being deployed to the Ethereum Mainnet, because deploying smart contracts costs Gas.