Index - What's in this?

• Current status of Project
• Application Features
  • Currently implemented
  • Planned in next versions
• How the application works?
  • Terminology used
  • How the application works? flow of ...
    1. Wallet connection
    2. Campaign Creation & Display
    3. Contributing funds
    4. Ending Campaign
    5. Aborting Campaign
    6. Viewing campaign's transaction on etherscan.io
• Ingredients of recipe (here, recipe refers to application)
  • Key ingredients
  • Tools to prepare
• Running on your own
  • Pre-requisites to run
  • Running locally
  • Running remotely
• Crucial components of implementation - References
  • Getting the gist
  • Making the recipe
• Resources you can use
• Acknowledgements

Current Status of the project 📃

• Application is deployed on Netlify (for frontend) and Infura (Goerli test network) with essential features (listed below).
• Please checkout at here. Found any bugs? or felt like need some features -- please feel free to raise a new issue or submit your pull request.
• Thanks for your time in looking into this project.

✨ Application features ✨

Currently implemented 💡

Feature	User	Explanation
Wallet connection	Fund raiser / backer	Whether campaign creation / contributing funds or any action related (except viewing) needs wallet connection & authorization at each crucial step for providing strong security.
Campaign Creation	Fund Raiser	A campaign to raise funds for a cause. Creator has to fill few mandatory details like title, description, image-URL (for displaying as a banner), minimum contribution amount, target amount, deadline (date & time).
Displaying campaigns	Any user	Displays list of campaigns in the home page, where each campaign will be displayed as a card & current status is displayed as a progress bar. Upon clicking campaign-specific page will be displayed.
Fund raising	Backers	A backer can support to a campaign by raising atleast minimum amount (as set at the time of campaign creation). Contributed amount will be stored in the smart contract until the project end.
Abort campaign	Fund raiser	Fund raiser can abort campaign (before deadline) - with whatsoever may be the reason. In this case, all the raised funds (if any) will be payed back to backers.
Ending & withdrawing	Fund raiser	Fund raiser can end the campaign [ONLY] after the deadline & campaign has reached its goal. Else they need to abort to pay back to backers.

Kept for next version 💼

Feature	User	Purpose
Setting Milestones	Fund raiser	Has to set at time of campaign creation. Why? To protect the funds of backer. The money will be distributed in chunks by showing the progress of funds usage.
Updating campaign page	Fund raiser	To elaborate the cause.
Raising Withdraw requests	Fund raiser	A request with amount needed and reason. Why? the funds raised of backers. The request will be approved only if > 50% of contributors accept it.
Approving withdraw requests	Backer	Depending on the progress achieved by campaign & amount needed, he can approve request. NOTE: Any backer who has contributed >= Minimum amount will be considered as approver.
Contributions page	Backer	A separate page, where backer can only view the campaigns they funded with the amount of contributions. Why? to facilitate how many campaigns they are supporting & to know SPECIFIC campaigns status to monitor how their contributed funds are in usage.
Funds usage	Backer / public	A page which shows the flow of funds (Inflow: from backers, Outflow: by fundraiser with a reason) with all the transaction IDs which can be checked publicly via etherscan.io Why? to provide transparency.
Searching campaigns with filters	Public	(Mainly) to facilitate backers & public, to search for campaigns & know the status of it, usage of funds ... etc.,
Backers withdrawing funds	Backer	This is still in question.

Understanding application flow

Understanding the terminology used ..

Users of application

User	Explanation
Public	- Can be any one. This includes fundraisers, backers and general public.
Fund Raiser	- The one who creates the campaign to raise funds for a cause.
Backer	- The one who can contribute to the campaign.

of Campaign

Term	Meaning
ACTIVE	- Campaign has raised & running. - Hasn't reached the goal set. - Open for contributions.
SUCCESS	- Campaign has reached the goal set before the deadline. - Still, open to contributions.
EXPIRED	- Campaign has achieved SUCCESS stage and its deadline has expired. - No contributions are accepted now.
ABORTED	- Campaign has raised, and its aborted in between, whether it might be in SUCCESS or ACTIVE. - In this case, all the raised funds will be returned back to backers. - No contributions are accepted now.

Now, good to go. Ready with understanding and basic setup.

Understanding the flow of application (with screenshots) 📸

Home page

1. Wallet connection

1. Click on Connect Wallet at top-right in navbar.
2. Select the accounts you would like to connect with the site.
3. Click on Connect

• Notice at the top-right of navbar, that showing connnected wallet's address instead of Connect wallet button. The user can click on it, to get option to disconnect the wallet.

2. Campaign Creation & displaying

1. Click on Create campaign button at top-right in navbar.
2. Fill the details.
3. Authenticate with wallet.
4. After successful creation, navigates to the homepage that shows the newly created campaign.
5. [Page Appearance] When fundraiser clicks on the campaign which they had created.
   Notice that, both are of same addresses, the connected wallet address (at top-right) and in the Wallet address of Fundraiser.
6. [Page Appearance] When public/backer clicks on the campaign which others had created.
   Notice that, both are of different addresses, the connected wallet address (at top-right) and in the Wallet address of Fundraiser.

3. Contributing to campaigns

1. Select the campaign you would like to fund/contribute.
2. Enter the amount >= minimum amount and click on Contribute funds. Click on Confirm to finish authentication with the wallet.
3. Status of contribution

• showing Success message after funding.
• Showing updated status (after closing the message, page gets reloaded).

4. Ending Campaign

0. FundRaiser's wallet balance before ending the campaign.

1. After fundraiser clicks on End Campaign & withdraw, asking for wallet authentication. Noice that, the wallet balance has increased from 0.2065 ETH to 0.2173 ETH.

2. Fundraiser's wallet after successful end.

5. Aborting Campaign

0. Backer's wallet balance before the fundraiser aborting the campaign.
1. Fund raiser clicking on Aborting campaign.
2. Fund raiser filling the reason for aborting and accepting the condition of refund to backers.
3. Fund raiser authenticating the transaction with the wallet.
4. Backer's wallet balance after fund raiser aborting the campaign. Notice that, the balance of backer has increased from 0.4396 ETH to 0.5396 ETH.
   After aborting, each backer will get their whole amount, even if they contribute partially multiple times.

6. Viewing [any] campaign's transactions

1. Any user can view the campaign's transactions in etherscan.io -- By clicking on View on Goerli therscan link on any campaign page.
2. This opens up a new page of goerli.etherscan.io, showing the transactions.

• This provides transparency and trust that,
  • When backer has funded, with what amount..
  • When did the campaign has ended, aborted...

Ingredients of recipe

Packages used 📦

Packages used	Purpose
Vitejs	Fronted tool for fast bundling
MUI	UI tool based on Google's Material design standards.
Solidity v0.8.4	For writing the smart-contracts that can interact with the ethereum & ethereum-based blockchains.
hardhat	Ethereum development environment
ether.js docs	A compact library for interacting with the Ethereum Blockchain and its ecosystem.
web3.js, docs	The ultimate JavaScript library for Ethereum

Tools used ⚒️

Tool	Used for
github	A Version control system, for managing different versions & issue tracking.
VS code	An IDE, for writing code.
Prettier	A VSCode extension, for auto-formatting of code when saved.
gitmoji	A git commit tool, to use emojis in commits.
metamask	A digital wallet as a browser extension, to manage different test accounts & authorize transactions.
Firefox	Browser, for inspection of code with console.
Netlify	For deploying frontend site.
Infura	To deploy smart-contract to remotely in Goerli test network.
Yarn	A package manager, to add & remove packages for the project as per need.

How to run (locally & remotely)? 🏃‍♂️

Pre-requisites 🛠️

• Metamask wallet with some GoerliETH, fine even if had < 0.5 ETH (for testing purposes).
  • Lacking GoerliETH ? -- get it free of 0.2 ETH/day at Alchemy's Goerli faucet -- note that, this needs sign-up.
• Clone this repo.

(ONLY for running remotely)

• Create an account on Infura, can also be on Alchemy. _(This project used Infura with goerli-testnet)

• Create a new project & get an end-point of it.

• Create a new file with name .env.local in project's root directory.

• Store the API key as ..

  INFURA_API_KEY=<Your API_key here>
  PRIVATE_KEY=<Your private key>

How to get Private key? (In metamask wallet)

1. Open your metamask wallet and choose the account of which you need the private key.
2. Goto Account Options (3 dots at top-right) → Account Details.
3. Now click on Export private Key and enter your metamask password.
4. Get this and paste in .env.local file as PRIVATE_KEY.

Running locally (with hardhat) 🏃‍♂️

(Run these commands by being in project root directory)

• Install the project dependencies

  yarn dev

• Run local hardhat network

  npx hardhat node

NOTE

• This command alone should be run in a separate terminal and as long as this keeps running, local blockchain network stays. Once gets quit, everything gets lost. Had to repeat all the transactions made.
• Thus, following commands to be run in separate terminal.

Make changes to the smart-contract if needed.

• Compile the smart contract via

  npx hardhat clean    # If previously compiled and would like to discard
  npx hardhat compile

• Deploy the smart contract

  npx hardhat run scripts/deploy.js --network localhost

• This outputs the message as..

  Contract deployed to address: <Hex_address>
  

• Paste this address at utils/contract/crowdHelp.js as value for crowdHelpContractAddress variable.

• Run the frontend

   yarn dev  # or use "npm run dev"

  • This will run server on http://127.0.0.1:5173

Making transactions with metamask and hardhat

• Please refer ChainStack: Using MetaMask with a Hardhat node; metamask docs to connect hardhat to metamask wallet.
• Once connected, import the private key of 20 accounts provided by hardhat in metamask.
• At least importing of 2 accounts is must, as the campaign creation and funding cannot happen from same account (considering the actual usecase, fund-raiser himself won't be funding his own campaign).
• Now you are ready to test the features - Campaign creation, Funding etc.

Running remotely 🏃‍♂️

• Follow the above steps. Now just change the network as goerli_testnet while deploying.

   npx hardhat run scripts/deploy.js --network goerli_testnet
  

• To run on different test-net..
  • Use different URL in hardhat.config.js.

References taken ⚓

for understanding of crowdfunding idea with blockchain & developing smart-contract

Research papers 📝

Web references 🕸️

for implementation 🎬

(Majorly...)

1. Betterfund - @harsh242

   • for UI designs, smart-contract & connection.

2. Crowdfunding-DAPP - @spandan114

   • for upgrading the smart contract with latest version - v0.8.4.
   • running via hardhat, deploying locally & remotely.

3. MUI

   • their templates, for ready use & little customization.
   • for implementing various design components

Docs & reports 📘

• Detailed Documentation PDF version - Earlier version, Latest with new changes
• PPTs - Review_1 - Introduction, SRS & Literature Survey, Review_2- System Design, Use cases & Sequence diagrams, Review*3 - Implementation screenshots, conclusion & future upgrades (Not prepared, but all these are available in this README.md) - Final Viva - concised version (Almost similar to Review-3)
• Design files - done in app.diagrams.net (formerly draw.io)

Acknowledgements

(Specially)

• Finally, to Omniscient, without whom, this project doesn't even reach this stage. All is HIS grace, nothing is mine.