🚀 DApp Frontend - Decentralized Application Interface

A modern, user-friendly frontend interface for interacting with blockchain smart contracts. This decentralized application (DApp) enables users to seamlessly connect their MetaMask wallet and interact with smart contracts deployed on Ethereum testnets.

📖 Project Description

This is a frontend-only repository for a blockchain-based decentralized application. The DApp provides an intuitive web interface that allows users to:

Connect their crypto wallet (MetaMask)
Interact with deployed smart contracts
View real-time blockchain data
Execute transactions on Ethereum testnets

Note: This project is built for educational purposes and operates exclusively on testnets (no real money involved).

🛠️ Tech Stack

Core Technologies

React.js - UI component library
Vite - Fast build tool and dev server
Tailwind CSS - Utility-first CSS framework

Blockchain Integration

ethers.js - Ethereum wallet implementation and contract interaction
MetaMask - Browser wallet for authentication and transaction signing

Additional Tools

React Hooks - State management
React Router - Client-side routing
Axios - HTTP requests (if applicable)

✨ Features

✅ MetaMask Wallet Integration - Seamless wallet connection and disconnection
✅ Network Detection - Automatic testnet detection and switching
✅ Smart Contract Interaction - Read and write operations to deployed contracts
✅ Real-time Updates - Live blockchain data synchronization
✅ Transaction History - View past transactions
✅ Responsive Design - Mobile-friendly interface
✅ Error Handling - User-friendly error messages and notifications
✅ Loading States - Transaction pending indicators

🏗️ Application Architecture

Frontend Overview

┌─────────────────────────────────────────┐
│          React Application              │
│  ┌───────────────────────────────────┐  │
│  │      UI Components (React)        │  │
│  └───────────────────────────────────┘  │
│                  ↕                       │
│  ┌───────────────────────────────────┐  │
│  │    Blockchain Service Layer       │  │
│  │         (ethers.js)               │  │
│  └───────────────────────────────────┘  │
│                  ↕                       │
│  ┌───────────────────────────────────┐  │
│  │      MetaMask Provider            │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘
                  ↕
┌─────────────────────────────────────────┐
│       Ethereum Testnet Network          │
│         (Smart Contracts)               │
└─────────────────────────────────────────┘

Key Components:

UI Layer: React components for user interaction
Service Layer: Blockchain interaction logic using ethers.js
Wallet Layer: MetaMask integration for transaction signing
Smart Contract Layer: ABI-based contract communication

📋 Prerequisites

Before running this application, ensure you have the following installed:

Required Software

Node.js (v16.x or higher) - Download here
npm or yarn - Package manager (comes with Node.js)
MetaMask - Browser extension Install here

Blockchain Requirements

MetaMask Wallet configured with a testnet
Testnet ETH for gas fees (free from faucets)
- Sepolia: Sepolia Faucet
- Goerli: Goerli Faucet

Knowledge Prerequisites

Basic understanding of blockchain and wallets
Familiarity with React.js (helpful but not required)

🔐 Environment Variables

Create a .env file in the root directory of the project:

# Contract Configuration
VITE_CONTRACT_ADDRESS=0xYourContractAddressHere

# Network Configuration
VITE_NETWORK_NAME=sepolia
VITE_CHAIN_ID=11155111

# RPC URL (optional - MetaMask provides this)
VITE_RPC_URL=https://sepolia.infura.io/v3/YOUR_INFURA_KEY

# Application Settings
VITE_APP_NAME=My DApp
VITE_APP_ENV=development

Important Notes:

Replace placeholder values with your actual contract address
Never commit .env files to version control
Use .env.example for documentation purposes

📦 Installation & Setup

Follow these steps to set up the project locally:

Step 1: Clone the Repository

git clone https://github.com/yourusername/dapp-frontend.git
cd dapp-frontend

Step 2: Install Dependencies

npm install
# or
yarn install

Step 3: Configure Environment Variables

# Copy the example environment file
cp .env.example .env

# Edit .env file with your contract details
nano .env  # or use your preferred editor

Step 4: Verify Installation

npm run dev
# or
yarn dev

If successful, you should see a message indicating the dev server is running (typically at http://localhost:5173).

🚀 Running the Application Locally

Development Mode

npm run dev
# or
yarn dev

Opens at: http://localhost:5173
Hot reload enabled
Development tools accessible

Production Build

npm run build
# or
yarn build

Preview Production Build

npm run preview
# or
yarn preview

🦊 Connecting Wallet & Using Testnet

Step 1: Install MetaMask

Install the MetaMask browser extension
Create a new wallet or import an existing one
Save your seed phrase securely (never share it!)

Step 2: Switch to Testnet

Open MetaMask
Click the network dropdown (top center)
Enable "Show test networks" in Settings → Advanced
Select Sepolia Test Network (or your preferred testnet)

Step 3: Get Testnet ETH

Copy your wallet address from MetaMask
Visit a faucet:
- Sepolia: https://sepoliafaucet.com/
- Goerli: https://goerlifaucet.com/
Paste your address and request testnet ETH
Wait for confirmation (usually 1-2 minutes)

Step 4: Connect to DApp

Open the DApp in your browser
Click "Connect Wallet" button
Approve the connection in MetaMask popup
Your wallet address should appear in the UI

Step 5: Interact with Smart Contracts

Ensure you're on the correct network
Perform actions through the UI
Confirm transactions in MetaMask
Wait for transaction confirmation

📸 Screenshots

Home Page

Main landing page with wallet connection

Wallet Connected

Dashboard after successful wallet connection

Transaction Flow

Transaction confirmation interface

Mobile View

Mobile-responsive design

Note: Add your actual screenshots to the /screenshots directory

📁 Folder Structure

dapp-frontend/
├── public/                  # Static assets
│   ├── favicon.ico
│   └── assets/
├── src/
│   ├── components/          # React components
│   │   ├── Navbar.jsx
│   │   ├── WalletConnect.jsx
│   │   ├── ContractInteraction.jsx
│   │   └── TransactionList.jsx
│   ├── services/            # Blockchain service layer
│   │   ├── contract.js      # Contract interaction logic
│   │   └── wallet.js        # Wallet connection logic
│   ├── utils/               # Utility functions
│   │   ├── helpers.js
│   │   └── constants.js
│   ├── hooks/               # Custom React hooks
│   │   ├── useWallet.js
│   │   └── useContract.js
│   ├── pages/               # Page components
│   │   ├── Home.jsx
│   │   └── Dashboard.jsx
│   ├── abi/                 # Contract ABIs
│   │   └── contractABI.json
│   ├── App.jsx              # Root component
│   ├── main.jsx             # Entry point
│   └── index.css            # Global styles
├── .env.example             # Environment variables template
├── .gitignore
├── package.json
├── vite.config.js           # Vite configuration
├── tailwind.config.js       # Tailwind CSS configuration
└── README.md

⚠️ Common Issues & Troubleshooting

MetaMask Issues

Problem: MetaMask not detected

Solution:
1. Ensure MetaMask extension is installed
2. Refresh the page
3. Check if MetaMask is unlocked
4. Try a different browser

Problem: Wrong network connected

Solution:
1. Open MetaMask
2. Click network dropdown
3. Select the correct testnet (e.g., Sepolia)
4. Refresh the DApp

Problem: Transaction failed

Solution:
1. Check if you have enough testnet ETH
2. Verify gas price settings
3. Ensure you're on the correct network
4. Check contract address in .env file

RPC Errors

Problem: "Error: could not detect network"

Solution:
1. Check your internet connection
2. Verify RPC URL in .env file
3. Try switching to a different RPC provider
4. Check if the testnet is operational

Problem: RPC rate limiting

Solution:
1. Use your own Infura/Alchemy API key
2. Add delays between requests
3. Implement request caching

Build Errors

Problem: "Module not found" errors

Solution:
1. Delete node_modules folder
2. Delete package-lock.json
3. Run: npm install
4. Restart dev server

Problem: Environment variables not loading

Solution:
1. Ensure .env file is in root directory
2. Variables must start with VITE_
3. Restart the dev server after changes
4. Check for typos in variable names

Contract Interaction Issues

Problem: Contract functions not working

Solution:
1. Verify contract address in .env
2. Check if ABI file is up to date
3. Ensure contract is deployed on the connected network
4. Verify function signatures match the ABI

🔮 Future Improvements

⚖️ Disclaimer

IMPORTANT: This project is for educational and testing purposes only.

This DApp operates exclusively on Ethereum testnets
No real money or mainnet assets are involved
Testnet ETH has no monetary value
Do not use this application with mainnet or real funds
The developers are not responsible for any loss of funds
Always verify smart contract addresses before interaction
This is not financial advice

Security Notice:

Never share your private keys or seed phrase
Always verify transaction details before signing
Use testnets for learning and development
Conduct thorough security audits before mainnet deployment

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📧 Contact

For questions or feedback, please reach out:

GitHub Issues: Report a bug
Email: your.email@example.com
Twitter: @yourhandle

🙏 Acknowledgments

Built with ❤️ for the blockchain community

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
client		client
.gitignore		.gitignore
README.md		README.md
components.json		components.json
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

AbishekRaj2007/CertiChain

Folders and files

Latest commit

History

Repository files navigation

🚀 DApp Frontend - Decentralized Application Interface

📖 Project Description

🛠️ Tech Stack

Core Technologies

Blockchain Integration

Additional Tools

✨ Features

🏗️ Application Architecture

Frontend Overview

📋 Prerequisites

Required Software

Blockchain Requirements

Knowledge Prerequisites

🔐 Environment Variables

📦 Installation & Setup

Step 1: Clone the Repository

Step 2: Install Dependencies

Step 3: Configure Environment Variables

Step 4: Verify Installation

🚀 Running the Application Locally

Development Mode

Production Build

Preview Production Build

🦊 Connecting Wallet & Using Testnet

Step 1: Install MetaMask

Step 2: Switch to Testnet

Step 3: Get Testnet ETH

Step 4: Connect to DApp

Step 5: Interact with Smart Contracts

📸 Screenshots

Home Page

Wallet Connected

Transaction Flow

Mobile View

📁 Folder Structure

⚠️ Common Issues & Troubleshooting

MetaMask Issues

RPC Errors

Build Errors

Contract Interaction Issues

🔮 Future Improvements

⚖️ Disclaimer

📄 License

🤝 Contributing

📧 Contact

🙏 Acknowledgments

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages