4 blockchain applications using Ethereum, Solidity, React and Next.js.
| # | Project | Description |
|---|---|---|
| 01 | Inbox | A small project to understand how to test and deploy smart contracts with Solidity. |
| 02 | Lottery | An Ethereum lottery to build and test a more advanced smart contract. |
| 03 | Lottery React | A React front-end created around the lottery contract. |
| 04 | Kickstart | A crowdfunding app using Next.js. |
A small project to understand how to test and deploy smart contracts with Solidity.
- setting up a project in VS Code with Solidity syntax highlighting.
- creating a compile script for Solidity with solc.
- testing the contract with Mocha.
- fetching fake accounts from Ganache CLI.
- deploying locally with web3.
- deploying to Rinkeby network with hdwallet-provider and Infura API.
- observing deployment on Etherscan and testing the new contract in Remix.
An Ethereum lottery to build and test a more advanced smart contract.
- understanding basic and reference types in Solidity: arrays, mappings and structs.
- entering the lottery and validating payment with a require statement.
- generating a pseudo random number and selecting a winner.
- sending money to the winner and resetting the lottery.
- restricting access with a function modifier.
- debugging with Remix.
- writing tests with Mocha and using try-catch assertions.
- deploying to Rinkeby network with hdwallet-provider and Infura API.
A React front-end created around the lottery contract.
See Demo deployed on Vercel (MetaMask Plugin is required)
- setting up a React project.
- creating a web3 instance and a local contract instance.
- detecting the MetaMask Ethereum provider with @metamask/detect-provider.
- enforcing the connection to the Rinkeby test network.
- rendering contract data.
- entering the lottery, checking user input and sending a transaction.
- adding user-friendly notifications.
- picking a winner.
A crowdfunding app using Next.js.
See Demo deployed on Vercel (MetaMask Plugin is required)
- using struct for request and creating struct instances.
- understanding the difference between storage and memory.
- using mappings rather than arrays for performance reasons.
- deploying a campaign factory to keep track of deployed campaigns.
- testing the factory with Remix.
- compiling the contracts with solc and fs-extra.
- testing the contracts with Mocha, Ganache CLI and web3.
- deploying to Rinkeby network with hdwallet-provider and Infura API.
- creating a test campaign with Remix and Metamask.
- handling server and client Web3 instances.
- fetching deployed campaigns with getInitialProps.
- building an interface with Semantic UI React.
- handling forms to create a new campaign and to contribute.
- navigating between pages with Link and useRouter.
- displaying campaign details with Next dynamic routes.
- listing out all the requests and adding a new one.
- approving and finalizing requests.
Based on Ethereum and Solidity: The Complete Developer's Guide by Stephen Grider (2021).