Hands-On Smart Contract Development with Solidity and Ethereum

Chapter 10. Our Larger DApp

Now that we’ve finished the contracts for our large-scale application, let’s create the client side so we can have users interact with our contracts in the browser. After we create the frontend for our application, our users will be able to create their own fundraisers and see them show up on our home page. Our users will also be able to view more information about an individual fundraiser and donate to it. We’ll be using the Fundraiser contracts we wrote in the previous chapters.

Let’s get started on the development of our application.

Starting with React Truffle Box

We’re going to use React Truffle Box once more to generate frontend code for our Web3 application to get it running quickly and interacting with Web3. Let’s start by making a new directory for our fundraiser application and creating a fresh Truffle React Box application inside it.

The first thing we will need to do is create the new empty repository for our Fundraiser application. Next, we’ll change into that directory and unbox the React Truffle Box:

mdkir fundraiser
cd fundraiser
truffle unbox react

Just like in Chapter 8, this will quickly create scaffolding of a React application that is set up to interact with our fundraiser smart contracts and Web3. After the React Truffle Box has finished unboxing, let’s import all of our contracts and migrations.

We’ll first need to delete the 2_deploy_contracts.js file that has the migration for the SimpleStorage contract because we will no longer ...