3. Full-Stack dApp Basics

Goal

Use Scaffold-ETH 2 to quickly build a contract, frontend, wallet connection, and testnet deployment.

Module Guide

This is the biggest module, and the one where everything so far becomes an actual app. Modules 1 and 2 built understanding and contracts in isolation; here you connect a frontend to those contracts through a wallet, and ship the result to a testnet. The throughline is Austin Griffith’s Scaffold-ETH 2 and the SpeedRun Ethereum challenges — the same tooling used to onboard thousands of Ethereum developers — so the skills transfer directly to real projects.

The module starts with the concept that makes frontend↔contract communication work: providers and signers (14). A provider is a read-only connection to the chain; a signer is the wallet that can authorize writes. Every dApp interaction is one or the other. Lesson 15 is a long, comprehensive Scaffold-ETH 2 walkthrough that also reviews Solidity in context — treat it as the backbone of the module. With that foundation, you take on the SpeedRun challenges: Challenge 0 (16) is the required NFT / tokenization milestone and the one Lab 3 is built around; Challenges 1 (17, staking) and 2 (18, token vendor) are extension practice that also feed the Module 5 capstone.

Around these, three shorter lessons sharpen specific skills: an external Cyfrin Updraft Foundry chapter (19) introduces the Foundry toolchain for testing and deployment; Build an App in 8 Minutes (20) shows the whole Scaffold-ETH loop end to end at speed; and Ethers: Write Contract (21) drills into what actually happens when a frontend sends a write transaction and the wallet pops up to confirm.

By the end you should be able to bootstrap a Scaffold-ETH 2 project, modify its contract, read and write that contract’s state from a React frontend, complete SpeedRun Challenge 0, and deploy the whole thing to a testnet with your links organized for a portfolio. That full-stack loop is the core deliverable of the course; Modules 4 and 5 extend it outward to L2s, security, and DeFi.

Topics

• Scaffold-ETH 2: Next.js, RainbowKit, Wagmi, Hardhat / Foundry
• npx create-eth@latest
• Project structure: packages/hardhat / packages/nextjs
• Contract and frontend interaction
• Debug Contracts page
• SpeedRun Ethereum Start quest flow
• Challenge 0: Tokenization / NFT

Assigned Lessons

Open the Module 3 lesson sequence

• Provider / Signer Intro
• Web2 to Web3: Scaffold-ETH + Solidity Review
• Challenge 0: NFT
• Challenge 1: Staking
• Challenge 2: Token Vendor
• Cyfrin Updraft: Foundry Simple Storage
• Build an App on Ethereum in 8 Minutes
• Ethers: Write Contract

Lab Tasks

Open Lab 3: Build a Full-Stack dApp

• Create a Scaffold-ETH 2 project
• Modify the sample contract
• Read and write contract state from the frontend
• Complete SpeedRun Challenge 0
• Deploy the project to a testnet

Learning Outcomes

You will be able to

• Bootstrap a full-stack dApp with Scaffold-ETH 2
• Connect a wallet and interact with a contract
• Complete the SpeedRun Ethereum Tokenization challenge
• Organize GitHub, deployment, and block explorer links