Web3GuestbookDapp is a decentralized application that bridges modern Web2 interfaces with the Ethereum blockchain. It allows users to connect their MetaMask wallets and sign a persistent guestbook, creating immutable records of their visit. The project demonstrates the full lifecycle of a DApp, from smart contract development with Solidity to a responsive frontend built with Next.js.
Tech Stack
Solidity
Hardhat
Next.js
Ethereum
Web3.js
MetaMask
Ethers.js
Tools Used
VS Code
MetaMask
Remix IDE
Vercel
Key Features
Wallet Integration
▸MetaMask Connection: Seamless user authentication through industry-standard Web3 providers.
▸Account Status: Real-time monitoring of wallet connection and network synchronization.
▸Auto-Recovery: Graceful handling of network switches and account changes.
▸Hardhat Environment: Comprehensive suite for testing, compiling, and deploying contracts.
▸Immutable Logs: Every signature is a permanent transaction on the Ethereum network.
Real-time Interaction
▸Auto-Fetch Feed: Instant update of guestbook entries upon successful blockchain confirmation.
▸Transaction Feedback: Visual indicators for transaction pending, success, and error states.
▸Wave Reactions: Interactive "Wave" feature that sends a blockchain-verified greeting.
Optimized Frontend
▸Next.js 14: High-performance interface with optimized rendering and asset delivery.
▸Tailwind Styling: Modern, clean UI designed for a professional Web3 experience.
▸ABI Bridge: Secure integration between Javascript logic and the smart contract interface.
Highlights
Immutable Blockchain Records
MetaMask Integration
Smart Contract Automation
Installation
Clone & Install
git clone https://github.com/Arfazrll/Web3GuestbookDapp.git
cd web3guestbookdapp
npm install
Blockchain Setup
cd backend
npx hardhat node
# In a new terminal:
npx hardhat run scripts/deploy.js --network localhost
Frontend Configuration
cd ../frontend
# Update contract-address.json with the deployed address
npm run dev
Challenges & Solutions
Challenge
Blockchain Nonce Desynchronization
Solution
Implemented a custom activity reset workflow and state-sync logic to handle cases where local blockchain resets caused mismatching nonces in MetaMask.
Challenge
Contract ABI Management
Solution
Automated the ABI extraction process into the frontend environment to ensure the bridge between Web2 and Web3 remains perfectly aligned during contract updates.
Challenge
Ethereum Event Handling
Solution
Utilized Ethers.js event listeners to trigger UI updates directly from the blockchain state, ensuring the feed remains real-time without polling.