Back to Projects
Completed Project

Web3 Guestbook DApp

Decentralized guestbook on Ethereum allowing for immutable messages.

|
RoleBlockchain Developer
TimelineJan - Feb 2026
TeamPersonal Project
Tech Stack7 Technologies

Mission Brief

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.

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.

Blockchain Logic

  • Solidity Smart Contract: Robust logic for managing guestbook entries stored on-chain.
  • 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.

Engineering Chronicles

Blockchain Nonce Desynchronization

SolutionImplemented a custom activity reset workflow and state-sync logic to handle cases where local blockchain resets caused mismatching nonces in MetaMask.

Contract ABI Management

SolutionAutomated the ABI extraction process into the frontend environment to ensure the bridge between Web2 and Web3 remains perfectly aligned during contract updates.

Ethereum Event Handling

SolutionUtilized Ethers.js event listeners to trigger UI updates directly from the blockchain state, ensuring the feed remains real-time without polling.

Installation Instructions

Clone & Install
$git clone https://github.com/your-org/project-name.git
$cd project-name
$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

Project Access

Technologies

Solidity
Hardhat
Next.js
Ethereum
Web3.js
MetaMask
Ethers.js

Table of Contents

  • • Mission Brief
  • • Key Features
  • • Engineering Chronicles
  • • Installation Instructions