FundMe - demo decentralized crowdfunding application

A minimal crowdfuding dApp that runs on a decentralized server, ethereum blockchain
Explore the source code »

Live dapp · Report Issue

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Some backend usage examples
5. Folder Structure
6. Acknowledgements
7. Contact

About The Project

FundMe is a demo crowdfunding dApp that uses a decentralized server as a backend, rather than a centralized server making the system more robust by introducing advantages like zero-downtime, complete data integrity and trustless computation/verifiable behavior.

The server is operated by a Solidity smart contract deployed on Ethereum blockchain. Smart contracts are accessible and transparent like open APIs, so anyone can build a frontend on top of these smart contracts. View FundMe smart contract here. HTML, CSS (boostrap) and Javascript are used to create a minimal frontend to assist user interaction with smart contracts on blockchain and send transactions.

See Getting Started section to install the project locally.

(back to top)

Built With

Following are the major frameworks / libraries used in the project -

(back to top)

Getting Started

The following section explains how you can setup the project locally. To get the local copy up and running follow these steps -

Prerequisites

For prerequisites, you need to have Node.js and npm installed on your system. You can download the appropriate installer from the link depending on your system.

npm --version

running the above command should print the installed version of npm. This verifies than npm is installed on your system.

Installation

1. Let's start by setting up MetaMask in browser.

   • Download and add MetaMask extension to your desired browser.
   • Click on the extension and follow the instructions properly to create a new wallet or to import an existing wallet.

2. Getting free Goerli ETH

   • Another thing we need to do is to use the Goerli Faucet to request some Goerli ETH for our account. For this you need to signup at Alchemy. Alchemy is a blockchain scaling platform that allows developers to securely create, test, and monitor their decentralized apps (DApps). In simple words it's simply a node that helps you connect to a blockchain.
   • After you have signed up and logged into your Alchemy account, visit Goerli Faucet, enter the public address of your wallet (present in MetaMask extension) and click on Send Me ETH. A transaction will be performed and soon your account will be credited with some Goerli ETH (note that this is not real Ether currency, a fake Ether currency on testnet).

3. Clone the repo

   git clone "https://github.com/Vedant2254/Fundme-hardhat-blockchain"

4. I have used yarn package manager while developing the project, you can use npm or run below commands to install yarn on you system.

   npm i -g corepack
   corepack enable

5. Install required dependencies. Replace yarn with npm in the below command only if you are using npm package manager.

   yarn install

6. Create a new file named .env and copy paste the below code snippet.

   GOERLI_RPC_URL=
   PRIVATE_KEY=
   ETHERSCAN_API_KEY=
   COINMARKET_CAP_KEY=
   

7. Getting RPC url, Wallet private key and required API keys.

   • RPC url (Goerli testnet)-

     • Signup or login at Alchemy.
     • After signup is completed goto your account dashboard - click on + CREATE APP button - fill in the name and description asper your choice - select CHAIN as Ethereum and NETWORK as Goerli.
     • Once the app is created you could see it in your dashboard. Click on VIEW KEY and copy the HTTPS link. Place it in the .env file as shown below

     GOERLI_RPC_URL = YOUR-RPC-URL-GOES-HERE
     

   • Wallet private key -

     • To get the private key of your MetaMask wallet, open MetaMask - click on three dots on the right side of window - click on account details - click on Export private key - enter you wallet password - copy the private key displayed.
     • Place your private key in .env file as shown below

     PRIVATE_KEY = YOU-PRIVATE-KEY-GOES-HERE
     

   • Etherscan API key (optional) -

     • Will write it soon, you can check it out by yourself at Etherscan

   • Coinmarketcap API key (optional) -

     • Will write it soon, you can check it out by yourself at Coinmarketcap

   • Start by creating a new file named .env

8. Now, first we need to deploy the smart contracts on blockchain then let the frontend know about the contract address, so that it can send transaction requests. npm users, replace yarn with npx in below commands

   • Deploying on local hardhat blockchain -
     • Start the hardhat local blockchain on https://127.0.0.1:8545 using below command

       yarn hardhat node
       

       Keep this blockchain running when interacting with application. Hardhat automatically deploys the smart contracts for you. You don't need to explicitly deploy them.
   • Deploying on Goerli testnet -
     • Before heading over to this part, make sure you have properly setup .env file, as it contains the RPC url and the private key of deployer. Also, check if your account has some ETH balance because we have to spend some ETH to deploy the contract. If you don't have ETH see the 2nd point in Installation.
     • Run below command to deploy on goerli testnet

       yarn hardhat deploy --network goerli
       

   • Telling the smart contract address to frontend -
     • Go to backend/deployments/, then go to localhost folder if deployed on localhost or goerli folder if deployed on goerli testnet. Copy the value of address field in FundMe.json file in this folder.
     • Paste the copied address at

     export const contractAddress = "CONTRACT-ADDRESS-GOES-HERE";

     in frontend/scripts/constants.js.

9. Lastly, we need to install live-server npm package globally to server the frontend. Just run -

   npm install live-server -g
   

   If you are on linux, you may need to add sudo at the start of command.

10. Project is now installed, run command live-server from root directory of project and visit https://127.0.0.1:8080

(back to top)

Usage

To use the website you need to install MetaMask in your browser. See 1st point in Installation

Also, if you want to fund the contract, you need some ETH in your wallet, see 2nd point in Installation

• Connecting to MetaMask wallet - To connect to the wallet click on Connect ot MetaMask account button. MetaMask will pop-up to confirm. Select the accounts you want to connect and click on connect.

• Funding to the contract - Enter the amount of ETH you want to fund and click on fund. Note that the contract will make a transaction only if ETH amount is greater than is 50 USD (nearly 0.04 ETH)

• Withdraw funds from contract - Use the Withdraw button to withdraw the funds. Transaction will succeed iff the selected MetaMask account is also the account that deployed the contract. If you view the website that I have hosted, then you won't be able to use withdraw.

• Get Contract Balance - Use Get Contract Balance button to view the balance of contract.

• View your funds - View your funds shows the amount of funds you have funded to the contract. This resets to 0.0 ETH when the funds are withdrawn from the contract by contract owner.

Some backend usage examples

Note for npm users, replace yarn in commands with npx

The section summarizes some examples of operations that could be performed on the application backend. Some of the operations that can be performed include -

• Deploying smart contracts on local hardhat blockchain - You can run a local hardhat blockchain at http://127.0.0.1:8545/ using following command.

  yarn hardhat node
  

  Hardhat automatically deploys the smart contracts for you. You don't need to explicitly deploy them.

• Deploying smart contracts on goerli testnet - You the below command to deploy the smart contracts on goerli testnet. Before running the command make sure you have properly setup .env file, as it contains the RPC url and the private key of deployer.

  yarn hardhat deploy --network goerli
  

• Interacting with smart contracts through CLI - scripts folder contains the basic fund and withdraw scripts used for making transactions on blockchain. You can run the scripts using following commands. You can also write your own scripts in scripts/ folder.

  • fund.js

    yarn hardhat run scripts/fund.js
    

  • withdraw.js

    yarn hardhat run scripts/withdraw.js
    

• Testing smart contracts - Use following command to run unit test and staging tests on the contracts. The tests are specified in the test/ folder. test/unit includes a .js file that includes are the unit tests i.e. the tests performed on local blockchain and test/staging includes staging test i.e. performed on original blockchain (Goerli Testnet). You can add your own tests in the javascript files.

  yarn hardhat test
  

See Folder Structure to do your experimentation.

Folder Structure

There is more stuff than above examples that you can do with frontend and backend if you have installed locally. Here's a brief of folders so that you can try out your own experiments -

frontend/
• scripts/ contains the scripts of frontend
• static/ contains static content like images
• fundme.html is the main HTML file
backend/
contracts/ contains all the contracts code written in solidity
• test/ folder contains the mock contracts (See Steps.md to know about mock contracts), that needs to be deployed on local blockchains only.
deploy/ folder consists of the scripts used for deploying to smart contracts on local as well as testnet blockchains
• unit/ consists of unit test, for local testing
• staging/ consists of staging test, for testnet testing
deployments/ keeps the record of recent deployments on different networks. The folder is automatically created by hardhat-deploy package when we deploy using yarn hardhat deploy
• goerli/ contains deployment details of goerli testnet
• localhost/ contains deployment details of local hardhat blockchan
scripts/ this folder contains the scripts that can be run using yarn hardhat run
• fundme.js script for funding to contract
• withdraw.js script for withdrawing funds from contract
test/ contains the test scipts for testing the contract
• unit/ test performed on local blockchain
• staging/ test performed on testnet
utils/ utility scripts used in different scenarios, these are imported wherever required.
• verify.js it verifies the contract programatically on Etherscan
hardhat.config.js used for configuring hardhat
• solidity: solidity compiler version is specified here
• defaultNetwork: anytime we run hardhat command, by default it runs on this network
• networks: different network configurations are specified here
• namedAccounts: accounts used for deploying and performing transactions are specified here. The numbers denote the index of private key in accounts array we specified above when configuring networks
• etherscan: etherscan apiKey, used for verifying the contract on Etherscan.
• gasReporter: configuration for gas reporter, it shows the gas usage for each transaction when we run yarn hardhat test
helper-hardhat-config.js is a helper config that is imported in deployment scripts, it exports the following
• networkConfig is a mapping of chainId to the address of contract that gives the price conversion from ETH to USD. This address is passed to smart contract which is used by AggregatorV3Interface in smart contract to give the required price conversions.
• developmentChains is an array of names of networks that run locally. We need these as in deployment scripts we need to decide if we need to deploy the mock contracts.
Other files package.json, yarn.lock, are config files of yarn or npm. You can search to learn more about them.
index.html is just for redirecting to frontend/fundme.html as GitHub pages search for index.html in root directory of project.

(back to top)

Acknowledgements

This project is a part of learning from the blockchain development course provided by freeCodeCamp, taught by PatrickCollins.

I would like to thank FreeCodeCamp and PatrickCollins for providing such a comprehensive blockchain development course for free.

Issues

1. Only works on Goerli testnet for now. Will be soon made workable on other testnets.

Contact

(back to top)