Create a Full-stack Fundraiser Dapp Using Truffle, Solidity, React, Material UI, and Web3 | by Abhishek Chauhan | Jan, 2022

Set up a fundraising campaign, donate ETH, generate a receipt, and withdraw the amount

Abhishek Chauhan
photo credit: Shubham Dhage
mdkir fundraiser
cd fundraiser
truffle unbox react
rm contracts/SimpleStorage.sol  migrations/2_deploy_contracts.js  test/*
touch contracts/FundraiserFactory.sol
touch contracts/Fundraiser.sol
touch migrations/2_factory_contract_migrations.js
npm install @openzeppelin/contracts
import '../client/node_modules/@openzeppelin/contracts/ownership/Ownable.sol';
truffle develop
compile
migrate
Starting migrations...
======================
> Network name: 'develop'
> Network id: 5777
> Block gas limit: 0x6691b7
1_initial_migration.js
======================
Replacing 'Migrations'
----------------------
> transaction hash: 0xf04ee2a0c62330e7a051148d4660de...
> Blocks: 0 Seconds: 0
> contract address: 0x6Af651D4c6E9f32a627381B...
> block number: 1
> block timestamp: 1566526994
> account: 0xb94454C83ff541c82391b...
> balance: 99.99477342
> gas used: 261329
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.00522658 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.00522658 ETH
2_factory_contract_migrations.js
================================
Replacing 'Factory'
-------------------
> transaction hash: 0xebc5a26bbe12f52b809d9144...
> Blocks: 0 Seconds: 0
> contract address: 0xB7780C9AD3ef38bb4C8B48fab37...
> block number: 3
> block timestamp: 1566526995
> account: 0xb94454C83ff541c82391b4...
> balance: 99.95063086
> gas used: 2165105
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.0433021 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.0433021 ETH
Summary
=======
> Total deployments: 2
> Final cost: 0.04852868 ETH

Fundraiser Setup

cd client
npm i
npm start
metamask

React Routing

npm install — save react-router-dom
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom"
import NewFundraiser from './NewFundraiser'
import Home from './Home'
touch Home.js
touch NewFundraiser.js

React and Material UI

npm install @material-ui/core --save
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles({
root: {
flexGrow: 1,
},
});
const classes = useStyles();

Creating Our New Fundraiser Page View

const displayFundraisers = () => {
return funds.map((fundraiser) => {
return (
<FundraiserCard fundraiser={fundraiser} />
) })
}
fundraiser

Adding Detailed Information About Each Fundraiser

receipt

Leave a Comment