We Fund
Decentralized Crowd-Funding made easy.
Demo
About
The problem it solves #### Decentralized crowdfunding has many benefits over the traditional centralized crowdfunding apps including - - The biggest benefit of decentralized crowdfunding is the transparency it brings to the table. As there are no intermediaries involved, there is a clear money trail to follow. - Another benefit to explore is the cost-efficiency of decentralized crowdfunding. As no intermediaries are involved, there is a significant reduction in costs to organize the sale and collect money afterward. - Global availability ( 24/7 ), as it is a Dapp that runs on the ethereum network which is highly secured and decentralized.
How it's made
Challenges we ran into One Hurdle that I ran into was to make sure how to reduce js load time on the client-side react app. I was using [Scaffold-eth](https://github.com/austintgriffith/scaffold-eth) as my dev environment, this template has quite useful hooks that we can use, like `useBalance`, `useContractReader`, etc.. So the way my Contracts are deployed are that we have a parent Contract `CrowdFunding.sol` that is responsible for creation of new `Project` Contracts that are then stored in a state variable like so - `Project[] public projects;` ( this stores addresses of all the deployed Projects ) And each Project contains title, Description, amountToRaise, creator etc.. as its own state variables. So in my client app I map through this `projects` array and then with an individual Project's ABI combined with the address, I render it like so ` {projectsList && projectsList.map(project => ( <Project .... /> ))} ` The problem comes when we have multiple of these projects and they all start calling these hooks to fetch data, **and Combined with the fact that these hooks also poll for the data** after some `pollTime`. That gave an extremely slow page load plus every time the hook polled for data, the project component rendered again ( which again caused problems with Inputs as their state was cleared ). Moreover, we cannot call hooks conditionally, so again it was a hard route. **So the way I dealt with this was to make sure we only load data once and avoid polling, but whenever we realize that we performed a write operation on the chain, just reload the window.** Something like this in code - ` tx(writeContract.Project.contribute({ value: parseEther(formatedValue.toFixed(4)) })) .then(() => { window.location.reload(); }) .catch(e => {}) ` We could have avoided reloads by calling functions, but again as this template had hooks so I cannot call them conditionally.