Getting Started with Web3Task

Running Web3Task locally

In this tutorial, we'll go over how to:

  • Clone the necessary repositories from GitHub

  • Installing dependencies

  • Setting up a local blockchain

  • Deploying the smart contract to the local blockchain

  • Running the frontend

Prerequisites

Cloning the necessary repositories

Clone the web3task-contracts and web3task-frontend repositories from GitHub into a local directory

mkdir web3task
cd web3task
git clone https://github.com/w3b3d3v/web3task-front.git
git clone https://github.com/w3b3d3v/web3task-contracts.git

Install dependencies

Go to each directory and run the commands to install the dependencies

NOTE When choosing between NPM and Yarn for your project, it's generally recommended to stick with the package manager you started with. If you initially used NPM, it's best to continue using NPM for any future package installations. Likewise, if you began with Yarn, it's best to stick with Yarn for future package installations. This helps to maintain consistency and avoid potential conflicts between the two package managers.

cd web3task-contracts
yarn
or
npm i

cd web3task-front
yarn 
or 
npm i

Setting Up Local Blockchain

Run a Hardhat node to start a local blockchain.

cd web3task-contracts
npx hardhat node

The node will generate some accounts. You can realize they are already set at .env.sample, you should just let it be.

Add the first one to Metamask to be the leader and the second to be the member. The account will be:

0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
0x70997970C51812dc3A010C7d01b50e0d17dc79C8

To add the localhost network to metamask, click on the network dropdown and select Custom RPC. Fill in the following fields:

  • Network Name: localhost

  • New RPC URL: http://localhost:8545

  • Chain ID: 31337

  • Currency Symbol: ETH

NOTE Use the recommended accounts to avoid errors.

Deploying Smart Contracts in the Localhost

Makefile will set everything for us, just run:

make mocks

Run the frontend

Go to the web3task-front folder and run the commands below

yarn start
or
npm start

NOTE You must manually add the typescript package to the project in case the module fails to install using yarn.

yarn add typescript

Usage

If you are not using livenet, you should comment chain configurations at hardhat.config.ts or mock the keys in the .env file, otherwise you will get an error from hardhat.

To run all the unitary tests, run:

yarn test

See the demo below to understand how to use the Web3Task

PreviousIntroducing Web3TaskNextAccessControl

Last updated