https://github.com/smartcontractkit/full-blockchain-solidity-course-js Learn Blockchain, Solidity, and Full Stack Web3 Development with Javascript
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: Rinkeby
Main Faucet: https://faucets.chain.link
Backup Faucet: https://rinkebyfaucet.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 Solidtiy
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
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
Other Blockchain Benefits
Decentralized
Transparency & Flexibility
Speed & Efficiency
Security & Immutability
Counterparty Risk Removal
Trust Minimized Agreements
What have Smart Contracts done so far?
Making Your First Transaction
Gas I: Introduction to Gas
How Do Blockchains Work?
Signing Transactions
Gas II
Gas II Summary
High-Level Blockchain Fundamentals
🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 Completed Blockchain Basics! 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊
⌨️ (02:01:16) Lesson 2: Welcome to Remix! Simple Storage
💻 Code: https://github.com/PatrickAlphaC/simple-storage-fcc
Introduction
Setting Up Your First Contract
Basic Solidity: Types
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
Structs
Intro to Storage
Arrays
Dynamic & Fixed Sized
push
array function
Basic Solidity: Compiler Errors and Warnings
Yellow: Warnings are Ok
Red: Errors are not Ok
Memory, Storage, Calldata (Intro)
6 Places you can store and access data
calldata
memory
storage
code
logs
stack
Mappings
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
Lesson 3: Remix Storage Factory
⌨️ (03:05:34) Lesson 3: Remix Storage Factory
💻 Code: https://github.com/PatrickAlphaC/storage-factory-fcc
Introduction
Basic Solidity: Importing Contracts into other Contracts
Basic Solidity: Interacting with other Contracts
To interact, you always need: ABI + Address
ABI
Basic Solidity: Inheritance & Overrides
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 Solidtiy
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
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
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 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
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
Hardhat Setup
Troubleshooting Hardaht 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
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
Hardhat Setup - Fund Me
Linting
Hardhat Setup - Fund Me - Continued
Importing from NPM
Hardhat Deploy
Mocking
Utils Folder
Testnet Demo - Hardhat Fund Me
Hardhat Deploy Block Confirmations
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
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
Connecting HTML to Metamask
Javascript in it's own file
ES6 vs Nodejs
Sending a transaction from a Website
Resetting an Account in Metamask
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
Input Forms
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
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
Raffle.sol Setup
Introduction to Events
Events in Raffle.sol
Introduction to Chainlink VRF
Sub-Lesson: Chainlink VRF
Implementing Chainlink VRF - Introduction
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
Implementing Chainlink Keepers - performUpkeep
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 Rinkeby 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
Manual Header I
React Hooks
Manual Header II
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
IPFS
Hosting on IPFS
Hosting on IPFS & Filecoin using Fleek
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?
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
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
Uploading Token URIs (metadata) 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)
💻 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
Upgradeable 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 Upgradeable 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
Fuzzing and Eth Security Toolbox
Closing Thoughts
Congratulations
🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 Completed The Course! 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊 🎊
Where do I go now?
Learning More
Community
Hackathons
Be sure to check out project grant programs!
And make today an amazing day!
Thank you
Thanks to everyone who is taking, participaint in, and working with this course. It's been a passion project and 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 many Chainlink Labs teammembers who helped with various assets!