The problem We Fund 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.

Challenges I 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 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.