Build Your First DApp

2 tutorials

As an aspiring smart contract developer, it's important to have at least a basic understanding of frontend development. The reason for this is that frontend is what enables you to show off your work and create an interface that users can use to interact with your smart contracts. In addition, having frontend development skills will also make you a more well-rounded and versatile developer. You'll be able to create complete end-to-end solutions, rather than just writing the underlying smart contracts. This will increase your marketability and open up more opportunities for you as a developer!

In this module, we’ll be tying together skills learnt in previous modules to build our first Web3 decentralised application (dApp)! These modules include:

  • Introduction to Blockchain & Solidity for building our smart contract
  • Hardhat for Web3 Development as our smart contract development environment
  • Ethers.js for Blockchain Interaction for interacting with our deployed smart contract
  • ReactJS Basics for building our frontend web application

We’ll be building a smart contract that mimics some of StackUp’s functionalities. In particular, this smart contract will contain functionalities such as creating, joining and submitting quests. Then, we’ll see a typical Web3 end-to-end project is created by initialising a React and Hardhat project, followed by using Ethers.js to write functions that allows users to interact with our deployed smart contact.

Let’s go!

Helpful prior knowledge


Learning Outcomes

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

  • Create a smart contract that mimics features of StackUp such as creating, joining and submitting quests
  • Run Hardhat Network and deploy smart contracts to it
  • Use React to build a frontend that allows users to interact with your deployed smart contract
  • Use Ethers.js to read values from a deployed smart contract
  • Use Ethers.js to modify state of a blockchain
Oops, you are not logged in!

Please log in to view this page, and provide additional information required (if any) to unlock the full experience on Learn.