Web3, Full Stack Solidity, Smart Contract & Blockchain - Beginner to Expert ULTIMATE Course | Javascript Edition
Welcome to the repository for the Ultimate Web3, Full Stack Solidity, and Smart Contract - Beginner to Expert Full Course | Javascript Edition FreeCodeCamp Course!
All code references have both a javascript and a typescript edition.
Recommended Testnet: Sepolia
We have updated the repos to work with Sepolia due to Rinkeby and Kovan being sunset, and Goerli being a disaster. Let us know if any of the changes break stuff!
Main Faucet: https://faucets.chain.link
Backup Faucet: https://sepoliafaucet.com/
โ ๏ธ All code associated with this course is for demo purposes only. They have not been audited and should not be considered production ready. Please use at your own risk.
Resources For This Course
Questions
Table of Contents
Resources
- Testnet Faucets
- Resources For This Course
- Table of Contents
Lesson 0: The Edge of the Rabbit Hole
-
Welcome to the course!
-
Best Practices
Lesson 1: Blockchain Basics
-
What is a Blockchain? What does a blockchain do?
- The Purpose Of Smart Contracts
- Other Blockchain Benefits
- What have Smart Contracts done so far?
- Making Your First Transaction
- Gas I: Introduction to Gas
- How Do Blockchains Work?
- Signing Transactions
- Gas II
- High-Level Blockchain Fundamentals
Lesson 2: Welcome to Remix! Simple Storage
- Introduction
- Setting Up Your First Contract
- Basic Solidity: Types
- Basic Solidity: Functions
- Basic Solidity: Arrays & Structs
- Basic Solidity: Compiler Errors and Warnings
- Memory, Storage, Calldata (Intro)
- Mappings
- Deploying your First Contract
- The EVM & A Recap of Lesson 2
Lesson 3: Remix Storage Factory
- Introduction
- Basic Solidity: Importing Contracts into other Contracts
- Basic Solidity: Interacting with other Contracts
- Basic Solidity: Inheritance & Overrides
- Lesson 3 Recap
Lesson 4: Remix Fund Me
- Introduction
- Sending ETH Through a Function & Reverts
- Chainlink & Oracles
- Review of Sending ETH and working with Chainlink
- Interfaces & Price Feeds
- Importing from GitHub & NPM
- Floating Point Math in Solidity
- Basic Solidity: Arrays & Structs II
- Review of Interfacs, Importing from GitHub, & Math in Solidity
- Libraries
- SafeMath, Overflow Checking, and the "unchecked" keywork
- Basic Solidity: For Loop
- Basic Solidity: Resetting an Array
- Sending ETH from a Contract
- Basic Solidity: Constructor
- Basic Solidity: Modifiers
- Testnet Demo
- Advanced Solidity
Lesson 5: Ethers.js Simple Storage
- Effective Debugging Strategies & Getting Help
- Installation & Setup
- Local Development Introduction
- Tiny Javascript Refresher
- Asynchronous Programming in Javascript
- Compiling our Solidity
- Ganache & Networks
- Introduction to Ethers.js
- Adding Transaction Overrides
- Transaction Receipts
- Sending a "raw" Transaction in Ethersjs
- Interacting with Contracts in Ethersjs
- Environment Variables
- Better Private Key Management
- Optional Prettier Formatting
- Deploying to a Testnet or a Mainnet
- Verifying on Block Explorers from the UI
- Alchemy Dashboard & The Mempool
- Lesson 5 Recap
Lesson 6: Hardhat Simple Storage
- Introduction
- Hardhat Setup
- Hardhat Setup Continued
- Deploying SimpleStorage from Hardhat
- Networks in Hardhat
- Programatic Verification
- Interacting with Contracts in Hardhat
- Artifacts Troubleshooting
- Custom Hardhat Tasks
- Hardhat Localhost Node
- The Hardhat Console
- Hardhat Tests
- Hardhat Gas Reporter
- Solidity Coverage
- Hardhat Waffle
- Lesson 6 Recap
Lesson 7: Hardhat Fund Me
- Introduction
- Hardhat Setup - Fund Me
- Linting
- Hardhat Setup - Fund Me - Continued
- Importing from NPM
- Hardhat Deploy
- Mocking
- Utils Folder
- Testnet Demo - Hardhat Fund Me
- Solidity Style Guide
- Testing Fund Me
- Breakpoints & Debugging
- Gas III:
- console.log & Debugging
- Testing Fund Me II
- Storage in Solidity
- Gas Optimizations using Storage Knowledge
- Solidity Chainlink Style Guide
- Storage Review
- Staging Tests
- Running Scripts on a Local Node
- Adding Scripts to your package.json
- Pushing to GitHub
- ๐ธ๐ฆ Tweet Me (add your repo in)!
Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)
- Introduction
- How Websites work with Web3 Wallets
- HTML Setup
- Connecting HTML to Metamask
- Javascript in it's own file
- ES6 vs Nodejs
- Sending a transaction from a Website
- Resetting an Account in Metamask
- Listening for Events and Completed Transactions
- Input Forms
- Reading from the Blockchain
- Withdraw Function
- Lesson 8 Recap
Lesson 9: Hardhat Smart Contract Lottery
- Introduction
- Hardhat Setup - Smart Contract Lottery
- Raffle.sol Setup
- Introduction to Events
- Events in Raffle.sol
- Introduction to Chainlink VRF
- Implementing Chainlink VRF - Introduction
- Implementing Chainlink VRF - The Request
- Implementing Chainlink VRF - The FulFill
- Introduction to Chainlink Keepers
- Implementing Chainlink Keepers - checkUpkeep
- Implementing Chainlink Keepers - checkUpkeep continued
- Implementing Chainlink Keepers - performUpkeep
- Code Cleanup
- Deploying Raffle.sol
- Raffle.sol Unit Tests
- Hardhat Methods & Time Travel
- Callstatic
- Raffle.sol Staging Tests
- Testing on a Testnet
- Conclusion
- Typescript - Smart Contract Lottery
Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End)
- Introduction
- NextJS Setup
- Manual Header I
- Manual Header II
- useEffect Hook
- Local Storage
- isWeb3EnabledLoading
- web3uikit
- Introduction to Calling Functions in Nextjs
- useState
- Calling Functions in NextJS
- useNotification
- Reading & Displaying Contract Data
- A Note about
onSuccess
- A Challenge to You
- Tailwind & Styling
- Introduction to Hosting your Site
- IPFS
- Hosting on IPFS
- Hosting on IPFS & Filecoin using Fleek
- Filecoin Overview
- Lesson 10 Recap
Lesson 11: Hardhat Starter Kit
Lesson 12: Hardhat ERC20s
- What is an ERC? What is an EIP?
- What is an ERC20?
- Manually Creating an ERC20 Token
- Creating an ERC20 Token with Openzeppelin
- Lesson 12 Recap
Lesson 13: Hardhat DeFi & Aave
- What is DeFi?
- What is Aave?
- Programatic Borrowing & Lending
- WETH - Wrapped ETH
- Forking Mainnet
- Depositing into Aave
- Borrowing from Aave
- Repaying with Aave
- Visualizing the Transactions
- Lesson 13 Recap
- Happy Bow-Tie Friday with Austin Griffith
Lesson 14: Hardhat NFTs (EVERYTHING you need to know about NFTs)
- What is an NFT?
- Code Overview
- Hardhat Setup
- Basic NFT
- Random IPFS NFT
- Dynamic SVG On-Chain NFT
- Advanced: EVM Opcodes, Encoding, and Calling
- Deploying the NFTs to a Testnet
- Lesson 14 Recap
Lesson 15: NextJS NFT Marketplace (If you finish this lesson, you are a full-stack MONSTER!)
- Introduction
- Part I: NFT Marketplace Contracts
- Reentrancy
- Part II: Moralis Front End
- Part III: TheGraph Front End
Lesson 16: Hardhat Upgrades
- Upgradeable Smart Contracts Overview
- Types of Upgrades
- Delegatecall
- Small Proxy Example
- Transparent Upgradeable Smart Contract
Lesson 17: Hardhat DAOs
- Introduction
- What is a DAO?
- How to build a DAO
Lesson 18: Security & Auditing
- Introduction
- Slither
- Fuzzing and Eth Security Toolbox
- Closing Thoughts
More Resources
Lesson 0: The Edge of the Rabbit Hole
Welcome to the course!
โจ๏ธ (00:00:00) Lesson 0: Welcome To Blockchain
Best Practices
-
Follow the repository: While going through the course be 100% certain to follow along with the github repository. If you run into in an issue check the chronological-updates in the repo.
-
Be Active in the community: Ask questions and engage with other developers going through the course in the discussions tab, be sure to go and say hello or gm! This space is different from the other industries, you don't have to be secretive; communicate, network and learn with others :)
-
Learn at your own pace: It doesn't matter if it takes you a day, a week, a month or even a year. Progress >>> Perfection
-
Take Breaks: You will exhaust your mind and recall less if you go all out and watch the entire course in one sitting.
Suggested Strategy every 25 minutes take a 5 min break, and every 2 hours take a longer 30 min break
-
Refer to Documentation: Things are constantly being updated, so whenever Patrick opens up some documentation, open it your end and maybe even have the code sample next to you.
Lesson 1: Blockchain Basics
โจ๏ธ (00:09:05) Lesson 1: Blockchain Basics
What is a Blockchain? What does a blockchain do?
The Purpose Of Smart Contracts
โจ๏ธ (00:18:27) The Purpose of Smart Contracts
Other Blockchain Benefits
โจ๏ธ (00:30:41) Other Blockchain Benefits
- Decentralized
- Transparency & Flexibility
- Speed & Efficiency
- Security & Immutability
- Counterparty Risk Removal
- Trust Minimized Agreements
What have Smart Contracts done so far?
โจ๏ธ (00:36:36) What have Smart Contracts done so far?
Making Your First Transaction
โจ๏ธ (00:39:17) Making Your First Transaction
Gas I: Introduction to Gas
โจ๏ธ (00:58:59) Gas I: Introduction to Gas
How Do Blockchains Work?
โจ๏ธ (01:05:32) How Do Blockchains Work
Signing Transactions
โจ๏ธ (01:22:55) Signing Transactions
Gas II
โจ๏ธ (01:30:22) Gas II: Block Rewards & EIP 1559
Gas II Summary
โจ๏ธ (01:36:44) Gas II Summary
High-Level Blockchain Fundamentals
[โจ๏ธ (01:39:32) High-Level Blockchain Fundamentals]https://www.youtube.com/watch?v=gyMwXuJrbJQ&t=5972s()
๐๐๐๐๐๐๐๐๐๐๐๐ Completed Blockchain Basics! ๐๐๐๐๐๐๐๐๐๐๐๐
โจ๏ธ (02:01:16) Lesson 2: Welcome to Remix! Simple Storage
๐ป Code: https://github.com/PatrickAlphaC/simple-storage-fcc
Introduction
โจ๏ธ (02:03:05) Introduction
Setting Up Your First Contract
โจ๏ธ (02:05:18) Setting Up Your First Contract
Basic Solidity: Types
โจ๏ธ (02:12:28) Basic Solidity Types
Basic Solidity: Functions
โจ๏ธ (02:18:40) Basic Solidity Functions
- Functions
- Deploying a Contract
- Smart Contracts have addresses just like our wallets
- Calling a public state-changing Function
-
Visibility
- Gas III | An example
- Scope
- View & Pure Functions
Basic Solidity: Arrays & Structs
โจ๏ธ (02:35:30) Basic Solidity Arrays & Structs
- Structs
- Intro to Storage
- Arrays
- Dynamic & Fixed Sized
-
push
array function
Basic Solidity: Compiler Errors and Warnings
โจ๏ธ (02:45:35) Basic Solidity Errors & Warnings
- Yellow: Warnings are Ok
- Red: Errors are not Ok
Memory, Storage, Calldata (Intro)
โจ๏ธ (02:46:34) Basic Solidity Memory, Storage, & Calldata (Intro)
- 6 Places you can store and access data
- calldata
- memory
- storage
- code
- logs
- stack
Mappings
โจ๏ธ (02:50:17) Basic Solidity Mappings
Deploying your First Contract
โจ๏ธ (02:53:38) Deploying your First Contract
- A testnet or mainnet
- Connecting Metamask
-
Find a faucet here
- See the faucets at the top of this readme!
- Interacting with Deployed Contracts
The EVM & A Recap of Lesson 2
โจ๏ธ (03:03:07) The EVM & A Recap of Lesson 2
Lesson 3: Remix Storage Factory
โจ๏ธ (03:05:34) Lesson 3: Remix Storage Factory
๐ป Code: https://github.com/PatrickAlphaC/storage-factory-fcc
Introduction
โจ๏ธ (03:06:06) Introduction
Basic Solidity: Importing Contracts into other Contracts
โจ๏ธ (03:07:29) Importing Contracts into other Contracts
Basic Solidity: Interacting with other Contracts
โจ๏ธ (03:16:36) Interacting with other contracts
- To interact, you always need: ABI + Address
-
ABI
Basic Solidity: Inheritance & Overrides
โจ๏ธ (03:25:23) Inheritance & Overrides
Lesson 3 Recap
โจ๏ธ (03:30:29) Lesson 3 Recap
Lesson 4: Remix Fund Me
โจ๏ธ (03:31:55) Lesson 4: Remix Fund Me
๐ป Code: https://github.com/PatrickAlphaC/fund-me-fcc
Introduction
Sending ETH Through a Function & Reverts
Chainlink & Oracles
Review of Sending ETH and working with Chainlink
Interfaces & Price Feeds
Importing from GitHub & NPM
Floating Point Math in Solidity
Basic Solidity: Arrays & Structs II
Review of Interfaces, Importing from GitHub, & Math in Solidity
Libraries
SafeMath, Overflow Checking, and the "unchecked" keyword
Basic Solidity: For Loop
-
For Loop
-
/* */
is another way to make comments
Basic Solidity: Resetting an Array
Sending ETH from a Contract
Basic Solidity: Constructor
Basic Solidity: Modifiers
Testnet Demo
Advanced Solidity
Immutable & Constant
Custom Errors
Receive & Fallback Functions
Lesson 4 Recap
๐๐๐๐๐๐๐๐๐๐๐๐ Completed Solidity Basics! ๐๐๐๐๐๐๐๐๐๐๐๐
Lesson 5: Ethers.js Simple Storage
โจ๏ธ (05:30:42) Lesson 5: Ethers.js Simple Storage
๐ป Code: https://github.com/PatrickAlphaC/ethers-simple-storage-fcc
๐งช Alchemy: https://alchemy.com/?a=673c802981
Effective Debugging Strategies & Getting Help
โจ๏ธ (5:30:46) Effective Debugging Stategies & Getting Help
- Tinker and isolate problem
- For this course, take at LEAST 15 minutes to figure out a bug.
- Google / Web Search the Exact problem
- Go to this GitHub Repo / Discussions
- Ask a question on a Forum like Stack Exchange Ethereum or Stack Overflow
- Format your questions!!
- Use Markdown
How to Debug Anything Video
Installation & Setup
Mac & Linux Setup
Windows Setup
-
WSL
- When working in WSL, use Linux commands instead of Windows commands
-
TroubleShooting
-
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
โ ๏ธ Please use Gitpod as an absolute last resort
Gitpod
-
Gitpod
-
If using this, NEVER share a private key with real money on Gitpod
- Ideally you figure out the MacOS, Linux, or Windows install though
Local Development Introduction
-
CMD + K
or CTRL + K
clears the terminal
-
mkdir ethers-simple-storage-fcc
-
code .
to open VSCode in a new VSCode window
Optional Javascript Crash Courses
"[solidity]": {
"editor.defaultFormatter": "NomicFoundation.hardhat-solidity"
},
"[javascript]":{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
In your .vscode/settings.json
file.
Tiny Javascript Refresher
Asynchronous Programming in Javascript
Compiling our Solidity
Ganache & Networks
Introduction to Ethers.js
A Note on the await Keyword
Adding Transaction Overrides
Transaction Receipts
Sending a "raw" Transaction in Ethers.js
Interacting with Contracts in Ethers.js
Environment Variables
Better Private Key Management
Deploying to a Testnet or a Mainnet
Verifying on Block Explorers from the UI
Alchemy Dashboard & The Mempool
Lesson 5 Recap
Typescript Ethers Simple Storage
Lesson 6: Hardhat Simple Storage
โจ๏ธ (08:20:17) Lesson 6: Hardhat Simple Storage
๐ป Code: https://github.com/PatrickAlphaC/hardhat-simple-storage-fcc
Introduction
โจ๏ธ (08:20:19) Introduction
Hardhat Setup
โจ๏ธ (08:22:47) Hardhat Setup
Troubleshooting Hardhat Setup
โจ๏ธ (08:29:43) Troubleshooting Hardhat Setup
Hardhat Setup Continued
โจ๏ธ (08:31:48) Hardhat Setup Continued
Deploying SimpleStorage from Hardhat
โจ๏ธ (08:33:10) Deploying SimpleStorage from Hardhat
Networks in Hardhat
โจ๏ธ (08:41:44) Networks in Hardhat
Programmatic Verification
โจ๏ธ (08:51:16) Programmatic Verification
Interacting with Contracts in Hardhat
โจ๏ธ (09:06:37) Interacting with Contracts in Hardhat
Artifacts Troubleshooting
โจ๏ธ (09:09:42) Artifacts Troubleshooting
Custom Hardhat Tasks
โจ๏ธ (09:10:52) Custom Hardhat Tasks
Hardhat Localhost Node
โจ๏ธ (09:18:12) Hardhat Localhost Node
The Hardhat Console
โจ๏ธ (09:23:11) The Hardhat Console
Hardhat Tests
โจ๏ธ (09:26:13) Hardhat Tests
Hardhat Gas Reporter
โจ๏ธ (09:38:10) Hardhat Gas Reporter
Solidity Coverage
โจ๏ธ (09:44:40) Solidity Coverage
Hardhat Waffle
โจ๏ธ (09:47:02) Hardhat Waffle
Lesson 6 Recap
โจ๏ธ (09:47:37) Lesson 6 Recap
Typescript Hardhat Simple Storage
โจ๏ธ (09:52:15) Typescript Hardhat Simple Storage
yarn add --dev @typechain/ethers-v5 @typechain/hardhat @types/chai @types/node @types/mocha ts-node typechain typescript
Lesson 7: Hardhat Fund Me
โจ๏ธ (10:00:48) Lesson 7: Hardhat Fund Me
๐ป Code: https://github.com/PatrickAlphaC/hardhat-fund-me-fcc
Introduction
โจ๏ธ (10:00:50) Introduction
Hardhat Setup - Fund Me
โจ๏ธ (10:03:41) Hardhat Setup - Fund Me
Linting
โจ๏ธ (10:06:20) Linting
Hardhat Setup - Fund Me - Continued
โจ๏ธ (10:07:47) Hardhat Setup - Fund Me - Continued
Importing from NPM
โจ๏ธ (10:09:38) Importing from NPM
Hardhat Deploy
โจ๏ธ (10:10:43) Hardhat Deploy
Mocking
โจ๏ธ (10:21:05) Mocking
Utils Folder
โจ๏ธ (10:52:51) Utils Folder
Testnet Demo - Hardhat Fund Me
โจ๏ธ (10:55:45) Testnet Demo - Hardhat Fund Me
- Hardhat Deploy Block Confirmations
TypeScript
-
Code file (TypeScript edition)
- Define blockConfirmations in the
helper-hardhat-config.ts
file instead of hardhat-config.js
.
Solidity Style Guide
โจ๏ธ (11:00:10) Solidity Style Guide
Testing Fund Me
โจ๏ธ (11:08:36) Testing Fund Me
Breakpoints & Debugging
โจ๏ธ (11:30:39) Breakpoints & Debugging
Gas III
โจ๏ธ (11:33:40) Gas III
console.log & Debugging
โจ๏ธ (11:36:35) console.log & Debugging
Testing Fund Me II
โจ๏ธ (11:37:31) Testing Fund Me II
Storage in Solidity
โจ๏ธ (11:44:34) Storage in Solidity
Gas Optimizations using Storage Knowledge
โจ๏ธ (11:52:38) Gas Optimizations using Storage Knowledge
Solidity Chainlink Style Guide
โจ๏ธ (12:05:29) Solidity Chainlink Style Guide
Storage Review
โจ๏ธ (12:09:59) Storage Review
Staging Tests
โจ๏ธ (12:11:43) Staging Tests
Running Scripts on a Local Node
โจ๏ธ (12:17:58) Running Scripts on a Local Node
Adding Scripts to your package.json
โจ๏ธ (12:22:00) Adding Scripts to your package.json
Pushing to GitHub
โจ๏ธ (12:25:17) Pushing to GitHub
Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)
โจ๏ธ (12:32:57) Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)
๐ป Code: https://github.com/PatrickAlphaC/html-fund-me-fcc
Introduction
How Websites work with Web3 Wallets
HTML Setup
- Live Server: ExtensionID: ritwickdey.LiveServer
Javascript in it's own file
ES6 vs Nodejs
Sending a transaction from a Website
MetaMask - RPC Error:
[ethjs-query] while formatting ouputs from RPC '{"value":{"code":-32603,"data":{"code":-32000,"message":"Nonce too high. Expected nonce to be 2 but got 4. Note that transactions can't be queued when automining."}}}'
Listening for Events and Completed Transactions
Reading from the Blockchain
Withdraw Function
Lesson 8 Recap
Optional Links:
Lesson 9: Hardhat Smart Contract Lottery
โจ๏ธ (13:41:02) Lesson 9: Hardhat Smart Contract Lottery
๐ป Code: https://github.com/PatrickAlphaC/hardhat-smartcontract-lottery-fcc
Introduction
Hardhat Setup - Smart Contract Lottery
โจ๏ธ (13:43:43) Hardhat Setup
yarn add --dev @nomiclabs/hardhat-ethers@npm:hardhat-deploy-ethers ethers @nomiclabs/hardhat-etherscan @nomiclabs/hardhat-waffle chai ethereum-waffle hardhat hardhat-contract-sizer hardhat-deploy hardhat-gas-reporter prettier prettier-plugin-solidity solhint solidity-coverage dotenv
- Install dependencies (Typescript version):
yarn add --dev @nomiclabs/hardhat-ethers@npm:hardhat-deploy-ethers ethers @nomiclabs/hardhat-etherscan @nomiclabs/hardhat-waffle chai ethereum-waffle hardhat hardhat-contract-sizer hardhat-deploy hardhat-gas-reporter prettier prettier-plugin-solidity solhint solidity-coverage dotenv @typechain/ethers-v5 @typechain/hardhat @types/chai @types/node ts-node typechain typescript
Raffle.sol Setup
โจ๏ธ (13:46:55) Raffle.sol Setup
Introduction to Events
โจ๏ธ (13:54:02) Introduction to Events
Events in Raffle.sol
โจ๏ธ (14:00:47) Events in Raffle.sol
Introduction to Chainlink VRF
โจ๏ธ (14:02:30) Introduction to Chainlink VRF
Sub-Lesson: Chainlink VRF
Implementing Chainlink VRF - Introduction
โจ๏ธ (14:09:53) Implementing Chainlink VRF
Hardhat Shorthand
Implementing Chainlink VRF - The Request
Implementing Chainlink VRF - The FulFill
Modulo
Introduction to Chainlink Keepers
Implementing Chainlink Keepers - checkUpkeep
Enums
Implementing Chainlink Keepers - checkUpkeep continued
Code Cleanup
Deploying Raffle.sol
Mock Chainlink VRF Coordinator
Continued
Raffle.sol Unit Tests
- We use
async function
in the describe blocks at the start, but we correctly take them out later.
Testing Events & Chai Matchers
Continued I
Hardhat Methods & Time Travel
Continued II
Callstatic
Continued III
Massive Promise Test
Continued IV
Raffle.sol Staging Tests
Testing on a Testnet
Recommended LINK amounts for Sepolia Staging Test:
- Chainlink VRF: 2 LINK
- Chainlink Keepers: 8 LINK
Conclusion
Typescript - Smart Contract Lottery
๐๐๐๐๐๐๐๐๐๐๐๐ Completed Hardhat Basics! ๐๐๐๐๐๐๐๐๐๐๐๐
Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End)
โจ๏ธ (16:34:07) Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End)
๐ป Code: https://github.com/PatrickAlphaC/nextjs-smartcontract-lottery-fcc
โก๏ธโก๏ธ Live Demo IPFS: ipfs://QmXwACyjcS8tL7UkYwimpqMqW9sKzSHUjE4uSZBSyQVuEH
โก๏ธโก๏ธ Live Demo Fleek: https://fancy-dream-3458.on.fleek.co/
Introduction
We move into using NextJS for our front end. NextJS is a React framework for building websites.
Optional Sub-Lesson: Full Stack Development & Other Libraries
NextJS Setup
yarn create next-app .
React Hooks
useEffect Hook
Local Storage
isWeb3EnabledLoading
web3uikit
Introduction to Calling Functions in Nextjs
Automatic Constant Value UI Updater
runContractFunction
useState
Calling Functions in NextJS
useNotification
- Add
onError
to all your runContractFunction
calls
Reading & Displaying Contract Data
A Note about onSuccess
-
onSuccess
just checks to see if MetaMask sends the transaction, not
A Challenge to You
Tailwind & Styling
Introduction to Hosting your Site
โจ๏ธ (18:12:50) Introdunction to Hosting your Site
IPFS
โจ๏ธ (18:15:14) IPFS
Hosting on IPFS
โจ๏ธ (18:18:51) Hosting on IPFS
Hosting on IPFS & Filecoin using Fleek
โจ๏ธ (18:25:45) Hosting on IPFS & Filecoin using Fleek
Filecoin Overview
โจ๏ธ (18:31:28) Filecoin Overview
Lesson 10 Recap
Lesson 11: Hardhat Starter Kit
โจ๏ธ (18:51:36) Lesson 11: Hardhat Starter Kit
๐ป Code: https://github.com/smartcontractkit/hardhat-starter-kit
Lesson 12: Hardhat ERC20s
โจ๏ธ (18:59:24) Lesson 12: Hardhat ERC20s
๐ป Code: https://github.com/PatrickAlphaC/hardhat-erc20-fcc
What is an ERC? What is an EIP?
What is an ERC20?
Manually Creating an ERC20 Token
Creating an ERC20 Token with Openzeppelin
Lesson 12 Recap
Lesson 13: Hardhat DeFi & Aave
โจ๏ธ (19:16:13) Lesson 13: Hardhat DeFi & Aave
๐ป Code: https://github.com/PatrickAlphaC/hardhat-defi-fcc
What is DeFi?
What is Aave?
Programmatic Borrowing & Lending
WETH - Wrapped ETH
Forking Mainnet
Depositing into Aave
Borrowing from Aave
Repaying with Aave
Visualizing the Transactions
Lesson 13 Recap
Happy Bow-Tie Friday with Austin Griffith
More DeFi Learnings:
Lesson 14: Hardhat NFTs (EVERYTHING you need to know about NFTs)
โจ๏ธ (20:28:51) Lesson 14: Hardhat NFTs
๐ป Code: https://github.com/PatrickAlphaC/hardhat-nft-fcc
What is an NFT?
Code Overview
Hardhat Setup
Basic NFT
Write Tests
Random IPFS NFT
Mapping Chainlink VRF Requests
Creating Rare NFTs
Setting the NFT Image
Setting an NFT Mint Price
Deploy Script
Uploading Token Images with Pinata
Deploying
Tests
Dynamic SVG On-Chain NFT
What is an SVG?
Initial Code
Base64 Encoding
Advanced: EVM Opcodes, Encoding, and Calling
abi.encode & abi.encodePacked
Introduction to Encoding Function Calls Directly
Introduction to Encoding Function Calls Recap
Encoding Function Calls Directly
Creating an NFT TokenURI on-Chain
Making the NFT Dynamic
Deploy Script
Deploying the NFTs to a Testnet
Lesson 14 Recap
Extra credit:
Lesson 15: NextJS NFT Marketplace (If you finish this lesson, you are a full-stack MONSTER!)
โจ๏ธ (23:37:03) Lesson 15: NextJS NFT Marketplace (Full Stack / Front End)
Large Update, please read
Moralis has recently updated to a self-hosted server over their own server. For this, you can do one of the following:
-
Learn how to run one yourself
- Follow along to learn the concepts of this more interactive app, without actually coding along
- Skip to the section where we interact with the graph
TL;DR: TheGraph code should work exactly the same as the video, however the Moralis code will not.
๐ป Code:
Special thanks to Matt Durkin for help with this section.
Introduction
Part I: NFT Marketplace Contracts
Hardhat Setup
NftMarketplace.sol
Reentrancy
NftMarketplace.sol - Continued
NftMarketplace.sol - Deploy Script
NftMarketplace.sol - Tests
NftMarketplace.sol - Scripts
Part II: Moralis Front End
What is Moralis?
NextJS Setup
Adding Tailwind
Introduction to Indexing in Web3
Connecting Moralis to our Local Hardhat Node
Moralis Event Sync
Reset Local Chain
Moralis Cloud Functions
Practice Resetting the Local Chain
Moralis Cloud Functions II
Querying the Moralis Database
Rendering the NFT Images
Update Listing Modal
Buy NFT Listing
Listing NFTs for Sale
Part III: TheGraph Front End
Introduction
What is The Graph?
Building a Subgraph
Deploying our Subgraph
Reading from The Graph
Hosting our Dapp
๐๐๐๐๐๐๐๐๐๐๐๐ Completed Front End Basics! ๐๐๐๐๐๐๐๐๐๐๐๐
Lesson 16: Hardhat Upgrades
โจ๏ธ (28:53:11) Lesson 16: Hardhat Upgrades
๐ป Code: https://github.com/PatrickAlphaC/hardhat-upgrades-fcc
Upgradable Smart Contracts Overview
Types of Upgrades
- Parameter
- Social Migrate
- Proxy
- Proxy Gotchas
-
Function Collisions
-
Storage Collisions
-
Metamorphic Upgrades
-
Transparent
-
UUPS
-
Diamond
Delegatecall
Small Proxy Example
Transparent Upgradable Smart Contract
Lesson 17: Hardhat DAOs
โจ๏ธ (29:45:24) Lesson 17: Hardhat DAOs
โฌ๏ธ Up-to-date code: https://github.com/PatrickAlphaC/dao-template
๐ป Code from video: https://github.com/PatrickAlphaC/hardhat-dao-fcc
Introduction
What is a DAO?
How to build a DAO
Lesson 18: Security & Auditing
โจ๏ธ (31:28:32) Lesson 18: Security & Auditing
๐ป Code: https://github.com/PatrickAlphaC/hardhat-security-fcc
Introduction
Slither
Closing Thoughts
Congratulations
๐๐๐๐๐๐๐๐๐๐๐๐ Completed The Course! ๐๐๐๐๐๐๐๐๐๐๐๐
Where do I go now?
Learning More
Hackathons
Be sure to check out project grant programs!
And make today an amazing day!
Thank you
Thanks to everyone who is taking, participating in, and working on this course. It's been a passion project and a data dump of everything I've learnt in the web3 space to get you up to speed quickly. Also, a big thank you to Chainlink Labs for encouraging this course to come to light-and to the many Chainlink Labs team members who helped with various assets!