CharXTZ

Charity that Matters: A donations accumulator dApp

Comment

Inspiration

This was our first dApp, so we wanted to keep things simple and manageable while also producing something that is functional and of some utility. We initially wanted to create a full-blown crowdfunding application, but time caught up with us soon, and we had to settle for something much simpler.

What it does

CharXTZ is supported on the backend by a single SmartContract, which stores information about an account on the Tezos Ghostnet chain. This account is supposed to represent the account of a charity. The address and other details pertaining to this charity are controlled by the admin.

Users can donate to the SmartContract through CharXTZ, and once the admin-specified target is met, the funds accumulated in the SmartContract are transferred to the charity account automatically, with the full transparency that web3 provides.

How we built it

We built our dApp as a React application. The SmartContract is written in SmartPy. Integration of the front-end with the contract (via the tzkt.io Storage API) was facilitated by Taquito.

We used Tailwind and a Tailwind-compatible components library called Flowbite for styling. We also used commitizen for enforcing the Conventional Commits standard for our commit messages.

Challenges we ran into

There were a bunch of challenges that we ran into.

  • For starters, time was always an enemy.
  • Writing the SmartContract was difficult because of a lack of prior experience. Following documentation too proved difficult because, often, the given information seemed conflicting.
  • We tried to have the contract development set-up locally (and to deploy it through the CLI) but that turned out to be difficult, and we had to settle for the Web IDE.
  • Taquito relies on several Node core modules and also on the CommonJS require-style module system. We had to polyfill the modules, and ultimately had to switch to the webpack-based create-react-app from our initial rollup-based vite setup, because our builds kept failing.

Accomplishments that we're proud of

Gettings the builds finally working was a proud achievement. We had to rely on several workarounds for that. We had to first port to a create-react-app setup (which, as you might know, is no longer maintained, and thus, no longer recommended for bootstrapping React applications). That too did not solve all our problems, because the Node core modules that Taquito seemed to be using were not polyfilled, so we had to introduce a custom webpack config. create-react-app does not support extending the underlying webpack config out-of-the-box, so we had to use react-app-rewired to get it to use our custom webpack config. That solved the build fails on our local machine, but when we had it deployed to Vercel, the build happened to still be failing. Fortunately, disabling a default plugin in the webpack config solved that issue for us.

Writing the SmartContract too was quite a process, but we eventually got there, partly through a thorough reading of the new docs and partly from trial and error.

What we learned

  • The basics of SmartPy to write SmartContracts.
  • The basics of blockchain development: contracts, testing, testnets, faucets, deployments.
  • Integration with web3 wallets

Built With

Share this project:

Updates

Submission history