TL;DR

OS : Mac M1 Pro

Learning Resources

• Learn Solidity & GitHub
• Solidity (Official)
• Foundry
• Foundry Full Course
• Console logging in Foundry
• WTF Solidity
• Solidity cheetsheet
• Web3.js documents
• CryptoZombies
• React: useState
• React: userEffect

Supplements

• Ethereum basics
• How do smart contracts communicate?
• What are multi-signature contracts?
• What is an ERC-20 token?
• Foundry
• JavaScript: async function & await

Software Used in This Class

• Solidity: Foundry
• Git: Git for Windows (Mac already has Git and thus does not need to install this.)
• JavaScript: Node.js
• JavaScript development framework: React
• Code editor: Visual Studio Code

Installation

• Git for Windows
  • (Suggested) Check "Additional icons (On the Desktop)".
  • (Optional) Set your name for Git.

    git config --global user.name "John Doe"
    

  • Set your email for Git.

    git config --global user.email johndoe@example.com
    

• Foundry
  • Open a Git Bash (in Windows) or a terminal (in Mac).

    curl -L https://foundry.paradigm.xyz | bash
    

  • Exit the Git Bash or the terminal. Then, open it again.
  • Install Foundry

    foundryup
    

  • Note: If you use Mac (especially Intel CPU models), you may encounter the error message when installing Foundry: Library not loaded: /usr/local/opt/libusb/lib/libusb-1.0.0.dylib. You can type brew install libusb to solve this issue.
• JavaScript
  • Install Node.js.
  • Check the installed version.

    node -v
    npm -v
    

• Code editor
  • Install Visual Studio Code.
  • Install the "solidity" extension by Juan Blanco, which provides syntax highlighting, IntelliSense, and debugging support for Solidity.
  • (Optional) Install the "Mark for VS Code" extension to create and view slides directly within VS Code using Marp Markdown.

View Blockchain Information

• Open a Git Bash (in Windows) or a terminal (in Mac).
• Start the test blockchain.

  anvil
  

• Open another Git Bash (in Windows) or another terminal (in Mac).
• Create a root folder "Web" and enter it.

  mkdir Web
  cd Web
  

• Create a folder "vieweth" and enter it.

  mkdir vieweth
  cd vieweth
  

• Initialize an npm project.

  npm init
  

• Install Web3.js.

  npm install web3
  

• Edit "vieweth.js". (You can copy this file from /smart_contracts/code/web/vieweth/vieweth.js.)
• View the result.

  node vieweth