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!

Link to video: https://www.youtube.com/watch?v=gyMwXuJrbJQ

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!

Testnet Faucets

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

• Github Discussions
  • Ask questions and chat about the course here!
• Stack Exchange Ethereum
  • Great place for asking technical questions about Ethereum
• StackOverflow
  • Great place for asking technical questions overall

Table of Contents

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?

• Bitcoin Whitepaper
  • Satoshi Nakamoto
• Ethereum Whitepaper
  • Vitalik Buterin
• What is a Smart Contract?
• Nick Szabo
• Hybrid Smart Contracts
• Blockchain Oracles
• Terminology
• Web3
• What is a blockchain

The Purpose Of Smart Contracts

⌨️ (00:18:27) The Purpose of Smart Contracts

• 🎥 Original Video
• 🦬 My ETH Denver Talk
• 🍔 McDonalds Scandal
• ⛓ More on the evolution of agreements
• ✍️ What is a Smart Contract?
• 🧱 How does a blockchain work?
• 🔮 Chainlink & Oracles

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?

• DeFi
  • Defi Llama
  • Why DeFi is Important
• DAOs
• NFTs

Making Your First Transaction

⌨️ (00:39:17) Making Your First Transaction

• Metamask Download Link
  • What is a Private Key?
  • What is a Secret Phrase?
• Etherscan
• Sepolia Etherscan
• Sepolia Faucet (Check the link token contracts page)
  • NOTE: The Chainlink documentation always has the most up to date faucets on their link token contracts page. If the faucet above is broken, check the chainlink documentation for the most up to date faucet.
• OR, use the Sepolia ETH Faucet, just be sure to swap your metamask to Sepolia!

Gas I: Introduction to Gas

⌨️ (00:58:59) Gas I: Introduction to Gas

• Gas and Gas Fees
• Wei, Gwei, and Ether Converter
• ETH Gas Station

How Do Blockchains Work?

⌨️ (01:05:32) How Do Blockchains Work

• What is a hash?
• Blockchain Demo
• Summary

Signing Transactions

⌨️ (01:22:55) Signing Transactions

• Public / Private Keys
• Layer 2 and Rollups
• Decentralized Blockchain Oracles

Gas II

⌨️ (01:30:22) Gas II: Block Rewards & EIP 1559

• Block Rewards
• Advanced Gas
  • EIP 1559
  • GWEI, WEI, and ETH
    • ETH Converter

Gas II Summary

⌨️ (01:36:44) Gas II Summary

• Run Your Own Ethereum Node

High-Level Blockchain Fundamentals

[⌨️ (01:39:32) High-Level Blockchain Fundamentals]https://www.youtube.com/watch?v=gyMwXuJrbJQ&t=5972s()

• Consensus
• Proof of Stake
• Proof of Work
• Nakamoto Consensus
• Ethereum 2 (the merge)

🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Completed Blockchain Basics! 🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊

Lesson 2: Welcome to Remix! Simple Storage

⌨️ (02:01:16) Lesson 2: Welcome to Remix! Simple Storage

💻 Code: https://github.com/PatrickAlphaC/simple-storage-fcc

Introduction

⌨️ (02:03:05) Introduction

• Remix
• Solidity Documentation

Setting Up Your First Contract

⌨️ (02:05:18) Setting Up Your First Contract

• Versioning
• Take notes in your code!
• What is a software license
• SPDX License
• Compiling
• Contract Declaration

Basic Solidity: Types

⌨️ (02:12:28) Basic Solidity Types

• Types & Declaring Variables
  • uint256, int256, bool, string, address, bytes32
  • Solidity Types
  • Bits and Bytes
• Default Initializations
• Comments

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

• 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

• The EVM

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

• Factory Pattern

Basic Solidity: Importing Contracts into other Contracts

⌨️ (03:07:29) Importing Contracts into other Contracts

• Composibility
• Solidity new keyword
• Importing Code in solidity

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

• Inheritance
• Override & Virtual Keyword

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

• Fields in a Transaction
• More on v,r,s
• payable
• msg.value & Other global keywords
• require
• revert

Chainlink & Oracles

• What is a blockchain oracle?
• What is the oracle problem?
• Chainlink
• Chainlink Price Feeds (Data Feeds)
  • data.chain.link
• Chainlink VRF
• Chainlink Keepers
• Chainlink API Calls
• Importing Tokens into your Metamask
• Request and Receive Chainlink Model

Review of Sending ETH and working with Chainlink

Interfaces & Price Feeds

• Chainlink Price Feeds (Data Feeds)
• Chainlink GitHub
• Interface

Importing from GitHub & NPM

• Chainlink NPM Package

Floating Point Math in Solidity

• tuple
• Floating Point Numbers in Solidity
• Type Casting
• Gas Estimation Failed
  • Someone should make an article explaining this error

Basic Solidity: Arrays & Structs II

• msg.sender

Review of Interfaces, Importing from GitHub, & Math in Solidity

Libraries

• Library
• Solidity-by-example Library

SafeMath, Overflow Checking, and the "unchecked" keyword

• Openzeppelin Safemath
• unchecked vs. checked

Basic Solidity: For Loop

• For Loop
• /* */ is another way to make comments

Basic Solidity: Resetting an Array

Sending ETH from a Contract

• Transfer, Send, Call
• this keyword

Basic Solidity: Constructor

• Constructor

Basic Solidity: Modifiers

• Double equals
• Modifier

Testnet Demo

• Disconnecting Metamask

Advanced Solidity

Immutable & Constant

• Immutable
• Constant
• Current ETH Gas Prices
• Don't stress about gas optimizations! (yet)
• Naming Conventions
  • Someone make this!

Custom Errors

• Custom Errors Introduction

Receive & Fallback Functions

• Solidity Docs Special Functions
• Fallback
• Receive

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

1. Tinker and isolate problem
   1. For this course, take at LEAST 15 minutes to figure out a bug.
2. Google / Web Search the Exact problem
   1. Go to this GitHub Repo / Discussions
3. Ask a question on a Forum like Stack Exchange Ethereum or Stack Overflow
   1. Format your questions!!
   2. Use Markdown

How to Debug Anything Video

• Patrick's Original Video

Installation & Setup

• Visual Studio Code
  • Crash Course
• NodeJS
• VSCode Keybindings
• Git
• What is a terminal?

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

• NodeJS Course

• Javascript Course

• Import your SimpleStorage.sol

• Solidity + Hardhat VSCode Extension

• Format your solidity code with:

    "[solidity]": {
        "editor.defaultFormatter": "NomicFoundation.hardhat-solidity"
    },
    "[javascript]":{
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

In your .vscode/settings.json file.

• Prettier Extension

Tiny Javascript Refresher

• Javascript Tips

Asynchronous Programming in Javascript

• Asynchronous Programming
• async keyword
• Promise in Javascript
• await keyword

Compiling our Solidity

• Yarn Install
• solc-js
  • yarn add [email protected]
• yarn scripts

Ganache & Networks

• Ganache
• Networks in Metamask
• RPC URL
• Geth
• JSON RPC Spec Playground

Introduction to Ethers.js

• Ethers.js
• prettier-plugin-solidity

A Note on the await Keyword

Adding Transaction Overrides

Transaction Receipts

Sending a "raw" Transaction in Ethers.js

Interacting with Contracts in Ethers.js

• EVM Decompiler
• BigNumber

Environment Variables

• dotenv
• .gitignore

Better Private Key Management

• wallet.encrypt
• THE .ENV PLEDGE

Optional Prettier Formatting

• Prettier
• Best README Template

Deploying to a Testnet or a Mainnet

• Alchemy
• Getting your private key from Metamask
• CTRL + C stops any terminal command

Verifying on Block Explorers from the UI

Alchemy Dashboard & The Mempool

• Special Guest Albert Hu
• 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

• Hardhat Documentation
• DevDependencies vs Dependencies
• @ Sign node modules

Troubleshooting Hardhat Setup

⌨️ (08:29:43) Troubleshooting Hardhat Setup

• Special Guest Cami Ramos Garzon

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

• The Hardhat Network
• Hardhat configuration
• Chain ID List

Programmatic Verification

⌨️ (08:51:16) Programmatic Verification

• Etherscan Verify Tutorial
• Etherscan Docs
• Hardhat-Etherscan
• Etherscan API Keys
• Javascript == vs ===

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 Tasks
• Javascript Arrow Functions

Hardhat Localhost Node

⌨️ (09:18:12) Hardhat Localhost Node

The Hardhat Console

⌨️ (09:23:11) The Hardhat Console

• Hardhat Console

Hardhat Tests

⌨️ (09:26:13) Hardhat Tests

• Hardhat Tests
• Mocha Style Tests
• Chai
• Waffle Tests

Hardhat Gas Reporter

⌨️ (09:38:10) Hardhat Gas Reporter

• Hardhat Gas Reporter
• Coinmarketcap API

Solidity Coverage

⌨️ (09:44:40) Solidity Coverage

• Solidity Coverage

Hardhat Waffle

⌨️ (09:47:02) Hardhat Waffle

• Hardhat-Waffle

Lesson 6 Recap

⌨️ (09:47:37) Lesson 6 Recap

Typescript Hardhat Simple Storage

⌨️ (09:52:15) Typescript Hardhat Simple Storage

• Typechain

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

• Eslint
• Solhint
• Linting Code

Hardhat Setup - Fund Me - Continued

⌨️ (10:07:47) Hardhat Setup - Fund Me - Continued

Importing from NPM

⌨️ (10:09:38) Importing from NPM

• @chainlink/contracts

Hardhat Deploy

⌨️ (10:10:43) Hardhat Deploy

• Hardhat Deploy

Mocking

⌨️ (10:21:05) Mocking

• Mocking
• Aave Github
• Chainlink Github
• Multiple Versions of Solidity
• Tags in hardhat

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

• Style Guide
• NatSpec

Testing Fund Me

⌨️ (11:08:36) Testing Fund Me

• Unit Testing
• Hardhat Deploy Fixtures
• ethers.getContract
• expect
• ethers.utils.parseUnits
• Waffle Chai Matchers

Breakpoints & Debugging

⌨️ (11:30:39) Breakpoints & Debugging

• VSCode Breakpoints

Gas III

⌨️ (11:33:40) Gas III

• Transaction Response
• Transaction Receipt

console.log & Debugging

⌨️ (11:36:35) console.log & Debugging

• Hardhat console.log

Testing Fund Me II

⌨️ (11:37:31) Testing Fund Me II

Storage in Solidity

⌨️ (11:44:34) Storage in Solidity

• Storage Layout
• Purpose of the memory keyword
• getStorageAt

Gas Optimizations using Storage Knowledge

⌨️ (11:52:38) Gas Optimizations using Storage Knowledge

• Opcodes
• Opcodes by Gas
• Opcodes by Gas
• Append s_ to storage variables
• Append i_ to immutable variables
• Caps lock and underscore constant variables

Solidity Chainlink Style Guide

⌨️ (12:05:29) Solidity Chainlink Style Guide

• Chainlink Solidity Style Guide

Storage Review

⌨️ (12:09:59) Storage Review

Staging Tests

⌨️ (12:11:43) Staging Tests

• Ternary

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

• Github Quickstart
• What is Git?
• The quickstart that we follow in the video
• Learn about git and GitHub

🐸🐦 Tweet Me (add your repo in)!

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

• How to Connect your Smart Contracts to Metamask
  • 💻 Code from Video: https://github.com/PatrickAlphaC/full-stack-web3-metamask-connectors
  • ✍️ Article from Video: https://betterprogramming.pub/everything-you-need-to-know-about-fullstack-web3-94c0f1b18019?sk=a2764bcbdae98bf05e1052931de77982

HTML Setup

• Live Server: ExtensionID: ritwickdey.LiveServer

Connecting HTML to Metamask

• Metamask Docs

Javascript in it's own file

ES6 vs Nodejs

• ES6 vs Nodesjs
• Ethers docs for web browser
• module vs text/javascript

Sending a transaction from a Website

• Web3Provider
• Adding a network to metamask

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

• provider.once
• Anonymous function
• Javascript Promise

Input Forms

Reading from the Blockchain

Withdraw Function

Lesson 8 Recap

Optional Links:

• Browserify
• Watchify

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

• Install dependencies:

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

• Custom Errors in Solidity

Introduction to Events

⌨️ (13:54:02) Introduction to Events

• Events & Logging Video
• Events & Logging in Hardhat

Events in Raffle.sol

⌨️ (14:00:47) Events in Raffle.sol

Introduction to Chainlink VRF

⌨️ (14:02:30) Introduction to Chainlink VRF

• Special Guest Stephen Fluin

Sub-Lesson: Chainlink VRF

• Chainlink VRFv2 Docs
• Chainlink VRFv2 Walkthrough
• Chainlink Contracts

Implementing Chainlink VRF - Introduction

⌨️ (14:09:53) Implementing Chainlink VRF

Hardhat Shorthand

• Hardhat Shorthand

Implementing Chainlink VRF - The Request

Implementing Chainlink VRF - The FulFill

Modulo

• Modulo

Introduction to Chainlink Keepers

• Chainlink Keepers Docs
• Chainlink Keepers Walkthrough

Implementing Chainlink Keepers - checkUpkeep

Enums

• Enum

Implementing Chainlink Keepers - checkUpkeep continued

• block.timestamp

Implementing Chainlink Keepers - performUpkeep

Code Cleanup

Deploying Raffle.sol

Mock Chainlink VRF Coordinator

Continued

• LINK Token

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

• Emit Chai Matcher

Continued I

Hardhat Methods & Time Travel

• Make Hardhat do whatever you want it to
• Special debugging hardhat methods

Continued II

Callstatic

• 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

• 6 Ways to connect your dapp to a wallet
• NextJS Crash Course
• Other React libraries:
  • Web3React
  • wagmi
  • react-moralis
  • useDapp
  • Web3Modal
  • useMetamask
• Other Full Stack Web3 Templates
  • scaffold-eth
  • ethereum-boilerplate
  • create-eth-app
• React being quite popular
• Why use react?

NextJS Setup

• NextJS Documentation
• NextJS Minimal Ethers Example For Lottery

yarn create next-app .

Manual Header I

• What is a component?
• jsx
• Moralis
• React Moralis

React Hooks

• What is a react hook?

Manual Header II

useEffect Hook

• useEffect Hook
• More on useEffect
• React Context
  • useEffect Firing Twice

Local Storage

• Local Storage

isWeb3EnabledLoading

web3uikit

• web3uikit
• web3uikit interactive docs
• web3uikit connect button

Introduction to Calling Functions in Nextjs

• useWeb3Contract

Automatic Constant Value UI Updater

• ethers.utils.FormatTypes

runContractFunction

• Moralis Provider
• useMoralis
• parseInt

useState

• useState Hook

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

• Learn CSS
• Tailwindcss
• PostCSS Extension
• Tailwind Extension
• Install Tailwind into NextJS

Introduction to Hosting your Site

⌨️ (18:12:50) Introdunction to Hosting your Site

• Vercel
• Moralis
• Netilfy
• IPFS

IPFS

⌨️ (18:15:14) IPFS

• What is IPFS
• IPFS

Hosting on IPFS

⌨️ (18:18:51) Hosting on IPFS

• IPFS Companion
• Brave Browser
• yarn build && yarn next export

Hosting on IPFS & Filecoin using Fleek

⌨️ (18:25:45) Hosting on IPFS & Filecoin using Fleek

• Fleek

Filecoin Overview

⌨️ (18:31:28) Filecoin Overview

• Special Guest Ally Haire
• IPFS URL of Ally's Video

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 EIP?
• EIPs codebase

What is an ERC20?

• Video (using brownie/python)
• EIP-20
• ERC-677
• EIP-777

Manually Creating an ERC20 Token

Creating an ERC20 Token with Openzeppelin

• Openzeppelin
• Openzeppelin Contracts
• Solmate (Openzeppelin alternative)

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 DeFi?
• DefiLlama

What is Aave?

• Aave
• My Previous Aave Video on Shorting Assets

Programmatic Borrowing & Lending

• DAI
• Uniswap

WETH - Wrapped ETH

• WETH Token Sepolia Etherscan
• WETH Token Mainnet

Forking Mainnet

• Mainnet Forking

Depositing into Aave

• Aave V2 Docs
• Aave NPM

Borrowing from Aave

• Aave Borrowing FAQs
• Health Factor
• Aave Risk Parameters

Repaying with Aave

Visualizing the Transactions

• aTokens

Lesson 13 Recap

Happy Bow-Tie Friday with Austin Griffith

• Special Guest Austin Griffith!
• Speed Run Ethereum

More DeFi Learnings:

• Defi-Minimal
• Defi Dad

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?

• Video
• Optional: All on Chain SVG NFT
• EIP-721

Code Overview

• Opensea Testnet

Hardhat Setup

Basic NFT

Write Tests

• Openzeppelin NFT

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

• Pinata
• nft.storage
• Pinata NPM
• Pinata Docs

Uploading Token URIs (metadata) with Pinata

Deploying

Tests

Dynamic SVG On-Chain NFT

• Patrick's Original Video

What is an SVG?

• SVG Tutorial
  • On-Chain SVG Example

Initial Code

Base64 Encoding

• Base64 Encoding
  • Example Encoder
• base64-sol

Advanced: EVM Opcodes, Encoding, and Calling

abi.encode & abi.encodePacked

• abi.encode
• abi.encodePacked Thanks to Alex Roan for his help on this session!
• Example Contract Creation Transaction What REALLY is the ABI?
• EVM Opcodes
• More EVM Opcodes
• Solidity Cheatsheet
• abi.encode vs abi.encodePacked

Introduction to Encoding Function Calls Directly

Introduction to Encoding Function Calls Recap

Encoding Function Calls Directly

• Function Selector
• Function Signature

Creating an NFT TokenURI on-Chain

Making the NFT Dynamic

Deploy Script

Deploying the NFTs to a Testnet

Lesson 14 Recap

Extra credit:

• Deconstructing Solidity
• Knowing and controlling your Smart Contract Address
• From Solidity to byte code

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:

• Backend (Contracts): https://github.com/PatrickAlphaC/hardhat-nft-marketplace-fcc
• Frontend (Moralis Indexer): https://github.com/PatrickAlphaC/nextjs-nft-marketplace-moralis-fcc
• Frontend (TheGraph Indexer): https://github.com/PatrickAlphaC/nextjs-nft-marketplace-thegraph-fcc
  • The Graph: https://github.com/PatrickAlphaC/graph-nft-marketplace-fcc

Special thanks to Matt Durkin for help with this section.

Introduction

• Opensea
• Artion

Part I: NFT Marketplace Contracts

Hardhat Setup

NftMarketplace.sol

• Pull Over Push

Reentrancy

• Reentrancy
• Rekt.news
• Openzeppelin NonReentrant

NftMarketplace.sol - Continued

NftMarketplace.sol - Deploy Script

NftMarketplace.sol - Tests

NftMarketplace.sol - Scripts

Part II: Moralis Front End

What is Moralis?

• Special Guest Ivan Liljeqvist

NextJS Setup

• Link NextJS

Adding Tailwind

• Tailwind with NextJS

Introduction to Indexing in Web3

• TheGraph
• Moralis

Connecting Moralis to our Local Hardhat Node

• NextJS Environment Variables
• Reverse Proxy FRP
  • Docs
  • Trouble Shooting
• Moralis Forum
• Moralis Admin CLI

Moralis Event Sync

• Moralis Add Event Sync From Code

Reset Local Chain

Moralis Cloud Functions

• Moralis Cloud Functions
• Moralis Logging
• Hardhat Network Reference
• Moralis Database only confirms a transaction with a block confirmation - so we need to move blocks on our hardhat local node.
• Moralis Triggers

Practice Resetting the Local Chain

Moralis Cloud Functions II

Querying the Moralis Database

• Moralis Queries

Rendering the NFT Images

• useNFTBalance
• fetch
• next/image

Update Listing Modal

Buy NFT Listing

Listing NFTs for Sale

• web3uikit Form

Part III: TheGraph Front End

Introduction

What is The Graph?

• Special Guest Nader Dabit

Building a Subgraph

• Example Subgraphs
• The Graph Studio
• GraphQL VSCode Extension
• GraphQL

Deploying our Subgraph

• GraphQL Queries

Reading from The Graph

• @apollo/client
• gql
• The Graph Docs

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

• Optional Video
• [Links from Video]

Types of Upgrades

1. Parameter
2. Social Migrate
3. Proxy
   1. Proxy Gotchas
      1. Function Collisions
      2. Storage Collisions
   2. Metamorphic Upgrades
   3. Transparent
   4. UUPS
   5. Diamond

Delegatecall

• delegatecall (solidity-by-example)
• Yul

Small Proxy Example

• EIP 1967

Transparent Upgradable Smart Contract

• Hardhat-deploy Proxies
• Openzeppelin Upgrades Plugin
  • Openzeppelin upgrades tutorial
• hardhat deploy upgrades examples

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?

• What is a DAO?

How to build a DAO

• How to build a DAO
• That's Patrick
• PY Code
• Python Video
• Openzeppelin Governance
• Compound Governance
• Contract Wizard
• CastVoteBySig

Lesson 18: Security & Auditing

⌨️ (31:28:32) Lesson 18: Security & Auditing

💻 Code: https://github.com/PatrickAlphaC/hardhat-security-fcc

Introduction

• Readiness Guide

Slither

• Install python
• Slither
• solc-select
• Fuzz testing

Fuzzing and Eth Security Toolbox

• Echidna
• Docker Install
• Eth-Security-ToolBox

Closing Thoughts

• Best Practices
• Attacks
  • Oracle Attacks
  • Re-entrancy Attacks
• Damn Vulnerable Defi
• Ethernaut
• Some Auditors:
  • OpenZeppelin
  • SigmaPrime
  • Trail of Bits

Congratulations

🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Completed The Course! 🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊

Where do I go now?

Learning More

• CryptoZombies
• Patrick Collins
• Dapp University
• ChainShot
• Cami Ramos Garzon
• Albert Hu
• Ivan Liljeqvist
• Ally Haire
• Stephen Fluin
• Eat the Blocks
• Austin Griffith
• Nader Dabit
• Ethereum.org

Community

• Twitter
• Hardhat Discord
• Ethereum Python Community Discord
• Chainlink Discord
• Ethereum Discord
• Reddit ethdev

Hackathons

• CL Hackathon
• ETH Global
• ETH India

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!