Crowdfunding dApp

My first blockchain-related toy project. A simple crowdfunding dApp built with Hardhat, Ignition, React, and Tailwind CSS.

Features

• A smart contract for the crowdfunding campaign is deployed to the local Hardhat node.
• The campaign has a target amount and a deadline.
• Accounts can contribute ETH to the campaign.
• Only the owner can withdraw the funds when the campaign is successful.
• Contributors can refund their contributions when the campaign is not successful.

Project structure

• smart-contracts/: Solidity smart contract, deployment script (Hardhat Ignition), and test suite.
• frontend/: A React-based web application built with Vite and Tailwind CSS to interact with the campaign.

To run the project

Currently only works on localhost.

Step 0. Prerequisites

Install MetaMask extension in your browser: https://metamask.io/

Step 1. Install dependencies

Install pnpm if not already installed:

npm install -g pnpm

Then install dependencies for the smart contracts:

cd smart-contracts
pnpm install

In a new terminal, install dependencies for the frontend:

cd frontend
pnpm install

Step 2. Run the project

First start the Hardhat node:

cd smart-contracts
pnpm run node

Then in a new terminal, deploy the smart contract:

cd smart-contracts
pnpm run contract:deploy

See the output of this command for the contract address, create a .env file in the frontend directory by copying .env.example and set VITE_CROWDFUNDING_ADDRESS to the contract address.

Then, start the frontend:

cd frontend
pnpm run dev

Step 3. Connect MetaMask

Look at the output of the pnpm run node command. At the top you will find the server URL and some default accounts. You can use any account to contribute to the campaign. The first account is the owner of the contract (the only person who can withdraw funds when the campaign succeeds).

Go to MetaMask extension in your browser and add a custom network using the server URL from the output of the pnpm run node command. Chain ID is 31337 (default for Hardhat).

Now import an account in the MetaMask extension using a private key from the output of the pnpm run node command. You can import multiple accounts but you need to manually manage which one is currently connected to the frontend.

Then open the frontend in your browser, click "Connect MetaMask" and select an imported account.

Step 4. Try it out

You can now try the test cases below. To start fresh each time, you need to restart the Hardhat node and redeploy the contract. After you redeploy, ensure that the contract address has not changed, otherwise you need to update the frontend .env file. It also sometimes happens that MetaMask caches previous data, so you might need to e.g. close and reopen the browser.

Case 1: Campaign is successful

1. Contribute to the campaign until the goal is reached (before the deadline).
2. Locally we can simulate the progress of time by running cd smart-contracts && pnpm run fast-forward.
3. Now you should see the campaign status change to "Successful" (maybe you need to refresh the page).
4. If you are connected to MetaMask as the owner, you should now be able to withdraw the funds.

Case 2: Campaign is not successful

1. Contribute to the campaign some amount less than the goal.
2. Progress time: cd smart-contracts && pnpm run fast-forward.
3. Now you should see the campaign status change to "Failed" (maybe you need to refresh the page).
4. If you are connected to MetaMask as a contributor, you should now be able to refund your contribution.
5. If you are connected to MetaMask as the owner, you should not be able to withdraw the funds.