Ethereum Kittychain Shop

Building a Decentralized Pet Adoption DApp

A Complete Guide to Blockchain Development

Project Overview

What is Kittychain Shop?

An adoption tracking system for a pet shop built on Ethereum blockchain

Key Features:

Decentralized pet adoption tracking
Smart contract-based adoption records
Web3 integration for user interaction
MetaMask wallet integration
Real-time blockchain updates

Technologies Used:

Ganache

Personal blockchain for development

Truffle

Development framework

Solidity

Smart contract language

Web3.js

Blockchain interaction library

Development Process

7-Step Development Journey

1Development Environment Setup

Install Node.js, Git, Truffle, and Ganache

2Truffle Project Creation

Initialize project using Truffle Box

3Smart Contract Development

Write Adoption.sol contract

4Compilation & Migration

Deploy contract to blockchain

5Smart Contract Testing

Write and execute test cases

6User Interface Creation

Build web interface with Web3

7Browser Integration

Connect with MetaMask wallet

Smart Contract Architecture

Adoption.sol Contract

pragma solidity ^0.4.24;

contract Adoption {
    // Array of 16 addresses (20 bytes each)
    address[16] public adopters;
    
    // Adopting a pet
    function adopt(uint petId) public returns (uint) {
        require(petId >= 0 && petId <= 15);
        adopters[petId] = msg.sender;
        return petId;
    }
    
    // Retrieving the adopters
    function getAdopters() public view returns (address[16]) {
        return adopters;
    }
}

Key Contract Features:

adopters array: Stores 16 Ethereum addresses
adopt() function: Allows users to adopt pets
getAdopters() function: Returns all adoption records
require() validation: Ensures petId is within valid range

Development Environment Setup

Required Tools Installation

Node.js: JavaScript runtime environment
Git: Version control system
Truffle: Ethereum development framework
Ganache: Personal blockchain simulator

Project Initialization

mkdir pet-shop-tutorial
cd pet-shop-tutorial
truffle unbox pet-shop
            

Project Structure

contracts/: Solidity smart contracts
migrations/: Deployment scripts
test/: Test files (JavaScript/Solidity)
truffle.js: Configuration file

Contract Compilation & Migration

Compilation Process

truffle compile

Converts Solidity code to bytecode for Ethereum Virtual Machine (EVM)

Migration Setup

Create 2_deploy_contracts.js in migrations/ directory

Ganache Configuration

Launch Ganache desktop application
Creates local blockchain on port 7545
Provides 10 test accounts with 100 ETH each

Deploy to Blockchain

truffle migrate

Success Indicators:

Contract deployed with blockchain address
Block number increases in Ganache
ETH balance decreases due to gas costs

Smart Contract Testing

Test Structure

Create TestAdoption.sol in test/ directory

Required Imports

Assert.sol: Testing assertions (equality, inequality)
DeployedAddresses.sol: Contract deployment addresses
Adoption.sol: The contract being tested

Test Execution

truffle test

Test Benefits

Validates contract functionality
Ensures adoption logic works correctly
Verifies data retrieval functions
Provides confidence before deployment

Testing Best Practices:

Test all public functions
Validate edge cases
Check require() conditions

User Interface Development

Web3 Integration

The app.js file handles blockchain interaction

Key Components

Web3 Initialization: Connect to blockchain
Contract Instantiation: Create contract instance
UI Updates: Sync with blockchain state
Transaction Handling: Process adoption requests

Web3 Provider Detection

// Check for injected web3 (MetaMask)
if (typeof web3 !== 'undefined') {
    App.web3Provider = web3.currentProvider;
} else {
    // Fallback to local provider
    App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
}

Contract Interaction

Read Operations: Use call() for free data retrieval
Write Operations: Send transactions with gas costs
Event Handling: Update UI based on blockchain events

MetaMask Integration

Wallet Setup Process

Install MetaMask: Chrome/Firefox browser extension
Import Wallet: Use Ganache mnemonic phrase
Network Configuration: Connect to local blockchain
Account Management: Access test accounts

Network Configuration

Custom RPC URL: http://127.0.0.1:7545
Network Name: Private Network

Transaction Flow

User clicks "Adopt" button
MetaMask popup appears
User confirms transaction
Smart contract executes
UI updates with adoption status

Important: Each transaction consumes ETH as gas fees

Application Architecture

DApp Architecture Flow

User Interface (Browser)

↓

MetaMask Wallet

↓

Web3.js Library

↓

Ganache Blockchain

↓

Smart Contract (Adoption.sol)

Component Interactions

Frontend: HTML/CSS/JavaScript user interface
Web3: Blockchain communication layer
MetaMask: User wallet and transaction signing
Ganache: Local development blockchain
Smart Contract: Business logic and data storage

Common Issues & Solutions

Troubleshooting Guide

Issue 1: Transaction Failed in MetaMask

Problem: After restarting Windows, transactions fail
Solution:

Delete JSON files in /build/contracts/
Recompile and migrate contract
Reset MetaMask accounts

Issue 2: Accounts Show 0 ETH

Problem: MetaMask accounts have no balance
Solution:

Start Ganache application
Copy mnemonic from Ganache
Import existing wallet in MetaMask

Issue 3: Persistent Transaction Failures

Problem: Transactions continue to fail
Solution: Reset MetaMask account completely

Project Conclusion

What We've Built

Functional DApp: Pet adoption tracking system
Smart Contract: Immutable adoption records
Web Interface: User-friendly interaction
Wallet Integration: Secure transaction handling

Key Learning Outcomes

Ethereum blockchain development
Solidity smart contract programming
Truffle framework usage
Web3.js integration
MetaMask wallet connection
DApp testing and deployment

Next Steps

Deploy to Ethereum testnet
Add more complex business logic
Implement IPFS for pet images
Add payment functionality
Enhance UI/UX design

Congratulations! You've successfully built a complete Ethereum DApp