Introduction
Web3 represents the next evolution of the internet—decentralized, trustless, and user-owned. Building on blockchain technology, Web3 applications offer new paradigms for finance, governance, and ownership. This guide helps developers start their Web3 journey.
Understanding Web3
What Is Web3?
The third generation of the internet:
- Web1: Read-only (1990s)
- Web2: Read-write (2000s+)
- Web3: Read-write-own (now)
Core Concepts
- Decentralization: No central authority
- Trustlessness: No need to trust intermediaries
- Ownership: Users own their data/assets
- Immutability: Records can’t be changed
- Transparency: Everything is verifiable
Web3 Stack
User Interface → Smart Contracts → Blockchain
↓ ↓
Frontend Backend/Storage
Blockchain Fundamentals
How Blockchains Work
- Users create transactions
- Transactions broadcast to network
- Validators verify transactions
- Transactions added to block
- Block added to chain
Consensus Mechanisms
| Mechanism | Description | Examples |
|---|---|---|
| Proof of Work | Mining, computational work | Bitcoin |
| Proof of Stake | Validator stake | Ethereum |
| Delegated PoS | Voting for validators | Solana, EOS |
Key Terms
- Block: Group of transactions
- Chain: Linked blocks
- Gas: Computation cost
- Wallet: Key management
- Token: Digital asset
Smart Contracts
What Are Smart Contracts?
Self-executing code deployed on blockchain:
// Simple storage contract
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleStorage {
uint256 private value;
// Store a value
function store(uint256 _value) public {
value = _value;
}
// Retrieve the value
function retrieve() public view returns (uint256) {
return value;
}
}
Development Environment
Hardhat
// hardhat.config.js
module.exports = {
solidity: "0.8.19",
networks: {
hardhat: {},
mainnet: {
url: process.env.MAINNET_RPC
}
}
};
Foundry
forge init my-project
forge build
forge test
Smart Contract Best Practices
- Security: Audit code, use SafeMath
- Gas optimization: Minimize storage writes
- Testing: Test extensively
- Upgradeability: Consider proxy patterns
Development Tools
Wallets
- MetaMask: Browser extension
- Rainbow: Mobile wallet
- Coinbase Wallet: Exchange-backed
Frontend Libraries
Ethers.js
import { ethers } from 'ethers';
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contract = new ethers.Contract(
address,
abi,
signer
);
Wagmi
React hooks for Ethereum:
import { useContractWrite } from 'wagmi';
function App() {
const { write } = useContractWrite({
address: contractAddress,
abi: contractABI,
functionName: 'store',
args: [42]
});
return <button onClick={write}>Store Value</button>;
}
Storage
- IPFS: Decentralized file storage
- Arweave: Permanent storage
- Filecoin: Incentivized storage
Building a dApp
Architecture
Frontend (React/Next.js)
↓
Wallet (MetaMask)
↓
Smart Contracts (Ethereum)
↓
External Data (optional)
Example: Todo List
// TodoList.sol
pragma solidity ^0.8.0;
contract TodoList {
struct Task {
string content;
bool completed;
}
Task[] public tasks;
address public owner;
constructor() {
owner = msg.sender;
}
function createTask(string memory _content) public {
tasks.push(Task(_content, false));
}
function toggleTask(uint256 _index) public {
tasks[_index].completed = !tasks[_index].completed;
}
}
Frontend Integration
// React component
function TodoList({ contract }) {
const [tasks, setTasks] = useState([]);
useEffect(() => {
loadTasks();
}, []);
const loadTasks = async () => {
const count = await contract.taskId();
const loaded = [];
for (let i = 0; i < count; i++) {
loaded.push(await contract.tasks(i));
}
setTasks(loaded);
};
return (
<div>
{tasks.map((task, i) => (
<div key={i}>
{task.content} - {task.completed ? '✓' : '○'}
</div>
))}
</div>
);
}
Testing
Types of Tests
- Unit tests: Individual functions
- Integration tests: Interactions
- Deployment tests: Live networks
Testing Frameworks
// Hardhat test
describe("SimpleStorage", function() {
it("should store and retrieve value", async function() {
const SimpleStorage = await ethers.getContractFactory("SimpleStorage");
const storage = await SimpleStorage.deploy();
await storage.store(42);
expect(await storage.retrieve()).to.equal(42);
});
});
Deployment
Test Networks
- Sepolia: Ethereum testnet
- Goerli: (deprecated)
- Local: Hardhat node
Mainnet Considerations
- Gas costs real money
- Audit before deploying
- Consider upgradeability
- Plan for maintenance
Standards
ERC Standards
- ERC-20: Fungible tokens
- ERC-721: NFTs
- ERC-1155: Multi-token
- ERC-4626: Tokenized vaults
Example: ERC-20 Token
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
contract MyToken is ERC20 {
constructor(uint256 supply) ERC20("MyToken", "MTK") {
_mint(msg.sender, supply);
}
}
Resources
Learning
Documentation
Conclusion
Web3 development offers new paradigms for building applications. Start with understanding fundamentals, build simple contracts, and progressively tackle more complex projects. The space is evolving quickly—stay curious and keep learning.
Comments