In this tutorial, we will be building a decentralized application(Dapp) for the crowdfunding smart contract we created and deployed to the Celo blockchain previously. A decentralized application(Dapp) according to Wikipedia is an application that can run autonomously, typically through a smart contract, that runs through a decentralized computing, blockchain, or other distributed ledger. Simply put a Dapp is an application that runs without human intervention and is not owned by any one entity. Tokens are distributed by the Dapp to represent ownership.

Prerequisites

For the purpose of this tutorial, you will need to have some level of knowledge of Javascript, React, tailwindcss, and Solidity.

Requirements

For this article, you will be needing a code editor VScode preferable, a chrome browser, and the Celo wallet extension installed on your chrome browser. If you don’t have the Celo wallet extension installed, follow this video tutorial on how to install the Celo wallet extension on your chrome browser.

The Smart Contract

In a previous tutorial, we created and deployed a crowdfunding smart contract to the Celo blockchain. Here is the smart contract code.

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

contract crowdFunding {
    address payable public owner;
    uint public MinimumContribution;
    address[] public contributors;

    constructor(uint minimum) {
        owner = payable(msg.sender);
        MinimumContribution = minimum;
    }

    modifier onlyOwner() {
        require(owner == msg.sender);
        _;
    }

    function contribute() public payable {
        require(msg.value > MinimumContribution);
        contributors.push(msg.sender);
    }

    function withdraw(uint amount) public onlyOwner returns (bool) {
        require(amount < address(this).balance);
        owner.transfer(amount);
        return true;
    }

    function viewBalance() public view onlyOwner returns (uint) {
        return address(this).balance;
    }

    function viewContributors() public view onlyOwner returns (address[] memory) {
        return contributors;
    }
}

In the smart contract code above, we created the contract class and called it CrowdFunding. In our smart contract, we defined a variable of owner to store the address of the creator of the smart contract, a variable defined as minimunContribution to store the minimum amount a contributor can contribute to the crowdfunding program, and a list of addresses to store the addresses of contributors. The smart contract also contains function calls that allow users to make contributions to the smart contract. For in-depth details on creating and deploying the smart contract, go through the tutorial on creating your first smart contract on the celo blockchain before continuing with this tutorial.

The Dapp

We will be using React to build the Dapp/website. React is an open-source JavaScript library for creating websites and user interfaces. Visit the official Reactjs website to learn more about React.

First, you will need to create a new react app. In the previous tutorial, where we built our smart contract, we created a folder called crowdfunding-contract, it is in this folder we will also be creating our react app. In the terminal point to the crowdfunding-contract and type

mkdir dapp
cd dapp
yarn create react-app .

yarn creat react-app initializes a new React project for us. For the stying of the Dapp, I will be using tailwindcss. To install and initialize tailwind, copy and paste these commands in your terminal:

yarn add --dev tailwindcss
npx tailwindcss init

npx tailwindcss init creates a tailwind.config.js file in your dapp folder. In the tailwind.config.js file, copy and paste this code.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives for each of Tailwind’s layers to your index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;