Tutorial

Creating Your First Web3 DApp Frontend

15 steps

In this tutorial, we’ll be creating a frontend for users to interact with the smart contract created in Tutorial 1. We’ll be using the React framework to build the frontend, Hardhat as our development framework and the Ethers.js library to interact with the deployed smart contract. As such, it is highly recommended that learners complete the following modules before proceeding with this tutorial:

  • ReactJS Basics
  • Ethers.js for Blockchain Interaction
  • Hardhat for Web3 Development
Join us on Discord

Helpful prior knowledge

Solidity

Learning Outcomes

By the end of this tutorial, you will be able to:

  • Run Hardhat Network and deploy smart contracts to it
  • Initialise a Hardhat project directory
  • Initialise a React project directory
  • Import Hardhat Network as well as Hardhat Network accounts into MetaMask
  • Connect a MetaMask wallet to a webpage
  • Use Ethers.js to read values from a deployed smart contract
  • Use Ethers.js to modify state of a blockchain

Tutorial Steps

Total steps: 15

  • Step 1: Initialising Hardhat Project
  • Step 2: Compiling Stackup.sol
  • Step 3: Starting Up Hardhat Network
  • Step 4: Adding Hardhat Network to MetaMask
  • Step 5: Importing a Hardhat Account Into MetaMask
  • Step 6: Deploying a Smart Contract to Hardhat Network
  • Step 7: Initializing React Project
  • Step 8: Tidying Up
  • Step 9: Connect Wallet
  • Step 10: Getting Contract Address & ABI
  • Step 11: Read Admin Address
  • Step 12: Get Quests Information
  • Step 13: Get User Quest Statuses
  • Step 14: Joining a Quest
  • Step 15: Submitting a Quest
Help Center Need help?

Find articles to support you through your journey or chat with our support team.

Help Center