For information on how to run this locally, please see docs/CONTRIBUTING.md
This dapp is a decentralized crowdfunding application that runs on ethereum. It's similar to Patreon except there's no third-parties. The backend is a modified/working version of Sergei's Pethreon Smart Contract. The frontend is my own react project.
Backend uses Solidity, Hardhat, Typechain, Infura.
Frontend uses React, Ethers, Framer-motion, Typescript, OnboardJS, Vite, Vitest, ESlint
The frontend was made with these design mockups.
In Pethreon, every user is a both "contributor" and a "creator". When a user signs in with their cryptowallet, they're immediately brought to the contributor page. From there, they can deposit funds into the Pethreon smart contract to accrue a balance. The user (as a contributor) can then "pledge" this balance to any creator of their choice so long as they know the creator's ethereum address. Each pledge is paid in full upfront by the contributor, payments are then spread out and sent to the creator periodically over a duration specified by the contributor. The contributor can cancel their pledge at any time to receive a refund for the remaining amount.
To receive money as a creator, the user must navigate to the creator page. Unlike a traditional ethereum payment, the creator must know about this app to receive any payment. The advantages of using Pethreon are similar to that of Patreon, with a few twists. There is no personal data that you have to give up in order to use the app (besides your ethereum address). There are also no middle-men involved and no commissions (just gas fees).
I basically have a react app that talks to a remote server @ Infura. This server is special in that it's also an "ethereum node", which means it can read and write data to the blockchain. Whenever my react app needs to do something with the Pethreon smart contract, it will reach out to this server to make it happen.
My react app doesn't communicate via a library like axios though, it uses ethersJS which uses JSON-RPC (a protocol built on top of HTTP) under the hood. The "RPC" in JSON-RPC refers to the type of calls my react app can make when reaching out to my infura node contract.example(). And the JSON part refers to the output I get back whenever I compile my Pethreon.sol smart contract into a Pethreon.json via the solc compiler (which is baked into hardhat).
The pethreon.json file has two important pieces of information. The EVM "bytecode" for the smart contract, which is what I deploy to ethereum. And the "abi" for the smart contract, an instruction sheet that tells my react app how to use the smart contract (what functions exist).
Some of those smart contract functions cost real money (like creating a pledge) because they require verification from every other node in the ethereum network (~6,000 nodes). Others require no verification at all and are otherwise free, subject to my agreement @ infura -> I get 100,000 free calls a day).