Web3 Projects

A comprehensive collection of Solidity smart contracts and Next.js applications demonstrating various Web3/blockchain concepts and DeFi protocols.

Projects Included

🏦 DEX (Decentralized Exchange)

A modern decentralized exchange interface built with Next.js and wagmi. Enables users to swap tokens directly from their wallets using smart contract interactions.

Tech Stack: Next.js 15, React 19, wagmi, viem, ethers.js, TailwindCSS

Features:

• Wallet connection with wagmi
• Token swap functionality
• Real-time reserve data
• Swap preview & confirmation
• Responsive UI with Lucide icons

🪙 ERC-20 Token

A complete ERC-20 token implementation with an interactive web interface for token management and interaction.

Tech Stack: Solidity, Next.js, wagmi, RainbowKit, ethers.js, TailwindCSS

Features:

• Standard ERC-20 token contract
• Token transfer interface
• Balance checking
• Multi-wallet support with RainbowKit

🎨 ERC-721 (NFT Collection)

An NFT smart contract following the ERC-721 standard with a web interface for minting and viewing NFTs.

Tech Stack: Solidity, Next.js, wagmi, viem, TailwindCSS

Features:

• ERC-721 NFT contract implementation
• NFT minting interface
• Metadata management
• On-chain verification

📝 Todo dApp

A blockchain-based todo application demonstrating state management on Ethereum.

Tech Stack: Solidity, Next.js, wagmi, TailwindCSS

Features:

• Create, read, and delete todos on-chain
• Persistent blockchain storage
• Wallet-based user identification

Getting Started

Each project is independently configured. Navigate to the project directory and run:

npm install
npm run dev

The development server will start at http://localhost:3000

Technologies

• Smart Contracts: Solidity
• Frontend Framework: Next.js 15
• Web3 Libraries: wagmi, viem, ethers.js
• Styling: TailwindCSS, Lucide React
• State Management: React Query, React Context
• Wallet Integration: wagmi, RainbowKit

Requirements

• Node.js 18+
• npm or yarn
• Web3 wallet (MetaMask, WalletConnect, etc.)

Configuration

Each project requires:

• Contract addresses (in contract config files)
• Contract ABIs (included in respective projects)
• Chain configuration (via wagmi config)

Learn More

• Solidity Documentation
• Next.js Documentation
• wagmi Documentation
• Ethereum Documentation

License

MIT

---

Author: Wasif Bin Nasir
Email: wasifbinnasir@gmail.com