⛓️ Ethereum Block Explorer

A comprehensive Ethereum blockchain explorer built for Week 3 of the Alchemy Ethereum Bootcamp. Explore blocks, transactions, accounts, NFTs, and send ETH programmatically - easier than MetaMask! 🚀🔍💸

🌟 Overview

This block explorer provides a complete set of tools to interact with Ethereum:

🏗️ Core Features

🔍 Block Explorer - Browse latest blocks and their transactions
👤 Account Lookup - Check balances and transaction history
🎨 NFT Metadata - Fetch NFT details by contract address and token ID
📊 Transaction Status - Track transaction confirmations and receipts
💸 Transfer History - View asset transfers by wallet address
🚀 Testnet Playground - Send ETH programmatically (testnet supported)

⚡ Why Use Code Over MetaMask?

✅ No popups - Transactions execute instantly
✅ Batch operations - Send multiple transactions with ease
✅ Automation - Integrate into scripts and workflows
✅ Testing - Perfect for testnet experimentation
✅ Reliability - No browser extension dependencies

🧩 Architecture & Technology Stack

Frontend

Next.js 16 ⚡: React framework with App Router
React 19 ⚛️: Latest React with concurrent features
Tailwind CSS 4 💄: Utility-first CSS framework
shadcn/ui 🎨: Accessible component library
TypeScript 5.7 📝: Type-safe development

Blockchain Integration

Alchemy SDK 3.x ⚗️: Enhanced Ethereum API access
ethers.js 6.x 🔗: Ethereum utilities and wallet management

Development Tools

pnpm 📦: Fast, disk space efficient package manager
ESLint 🔍: Code quality enforcement
PostCSS 🎨: CSS processing with Tailwind

📸 Quick Demo

Home page featuring all the explorer tools: Blocks, Accounts, NFT Lookup, Transaction Status, Transfers, and Testnet Playground.

🛠️ Setup

Prerequisites

🟢 Node.js 18.0 or later
📦 pnpm (recommended) or npm
🔑 Alchemy Account (free tier works!)

Installation

📥 Clone this repository:

git clone [email protected]:ernanibmurtinho/alchemy-bootcamp-week3.git
cd alchemy-bootcamp-week3

🚀 Install dependencies:
```
pnpm install
```

🔐 Set up environment variables:

Create a .env.local file:

# Alchemy API Key (required - server-side only)
ALCHEMY_API_KEY=your_alchemy_api_key_here

# Network (optional, defaults to mainnet)
# Options: mainnet, sepolia, goerli
ALCHEMY_NETWORK=mainnet

⚠️ Important: The API key is only used server-side in API routes for security.

▶️ Start the development server:
```
pnpm dev
```
🌐 Open your browser at http://localhost:3000

🚀 Usage

Pages Overview

Page	Route	Description
🏠 Home	`/`	Feature cards linking to all sections
🔍 Blocks	`/blocks`	Browse latest blocks with transaction counts
👤 Accounts	`/accounts`	Look up balances and transaction history
🎨 NFT Lookup	`/nft-lookup`	Fetch NFT metadata by contract and token ID
📊 Tx Status	`/transaction-status`	Check transaction status by hash
💸 Transfers	`/transfers`	View asset transfers for any wallet
🚀 Playground	`/playground`	Send testnet ETH programmatically

Page Details

Block Explorer 🔍

View latest block numbers and details
Browse transactions within blocks
Navigate between blocks
See gas usage and timestamps

Accounts Page 👤

Enter any Ethereum address
View ETH balance in real-time
See transaction history
Detect if address is a contract

NFT Lookup 🎨

Enter contract address and token ID
Fetch complete NFT metadata
View token name, description, and attributes
Display token image when available

Transaction Status 📊

Enter transaction hash
View confirmation status
See gas used and transaction details
Track pending transactions

Transfer History 💸

Enter wallet address
View all transfers received
Filter by token type (ERC-20, ERC-721, ERC-1155)
See timestamps and values

🌐 Using Testnet

Why Testnet?

Testnets let you experiment without spending real ETH. Perfect for learning!

Testnet Setup

🔑 Create a testnet API key in Alchemy Dashboard

🔄 Update .env.local:

ALCHEMY_API_KEY=your_testnet_api_key
ALCHEMY_NETWORK=sepolia

🔄 Restart the dev server

Getting Testnet ETH

Network	Faucets
Sepolia	Alchemy Faucet • PoW Faucet
Holesky	Holesky Faucet

💸 Sending ETH Transactions

Example: Send ETH Programmatically

The playground page (/playground) lets you send testnet ETH. Here's how it works under the hood:

import { Alchemy, Network } from 'alchemy-sdk';
import { Wallet, parseEther } from 'ethers';

const settings = {
  apiKey: process.env.ALCHEMY_API_KEY,
  network: Network.ETH_SEPOLIA, // Use testnet!
  connectionInfoOverrides: {
    skipFetchSetup: true, // Required for server-side
  },
};

const alchemy = new Alchemy(settings);

export async function sendETH(toAddress: string, amountInETH: number, privateKey: string) {
  try {
    const provider = await alchemy.config.getProvider();
    const wallet = new Wallet(privateKey, provider);
    
    const tx = await wallet.sendTransaction({
      to: toAddress,
      value: parseEther(amountInETH.toString()),
    });
    
    console.log('Transaction sent:', tx.hash);
    const receipt = await tx.wait();
    
    return { success: true, hash: tx.hash, block: receipt?.blockNumber };
  } catch (error) {
    return { success: false, error: (error as Error).message };
  }
}

Usage

const result = await sendETH(
  '0xRECIPIENT_ADDRESS_HERE',  // Recipient address
  0.1,                          // Amount in ETH
  'your_private_key'            // ⚠️ Never commit this!
);

📁 Project Structure

alchemy-bootcamp-week3/
├── app/                        # Next.js App Router pages
│   ├── page.tsx               # Home page with feature cards
│   ├── layout.tsx             # Root layout with navbar
│   ├── globals.css            # Global styles and theme
│   ├── blocks/
│   │   └── page.tsx           # Block explorer page
│   ├── accounts/
│   │   └── page.tsx           # Account lookup page
│   ├── nft-lookup/
│   │   └── page.tsx           # NFT metadata page
│   ├── transaction-status/
│   │   └── page.tsx           # Transaction status page
│   ├── transfers/
│   │   └── page.tsx           # Transfer history page
│   ├── playground/
│   │   └── page.tsx           # Testnet playground page
│   └── api/                   # API routes (server-side)
│       ├── blocks/
│       │   └── with-transactions/route.ts
│       ├── transaction/route.ts
│       ├── transfers/route.ts
│       ├── account/
│       │   ├── info/route.ts
│       │   └── transactions/route.ts
│       └── nft/
│           └── metadata/route.ts
├── components/                 # React components
│   ├── navbar.tsx             # Navigation component
│   ├── send-eth-form.tsx      # Send ETH form
│   └── ui/                    # shadcn/ui components
├── lib/                       # Utilities
│   ├── alchemy.ts             # Alchemy SDK setup (server-only)
│   ├── format-utils.ts        # Formatting helpers
│   └── utils.ts               # General utilities
├── .env.local                 # Environment variables (create this)
├── package.json               # Dependencies
└── README.md                  # This file

🔌 API Routes

All Alchemy SDK calls are made server-side through API routes to keep the API key secure:

Endpoint	Method	Description
`/api/blocks/with-transactions`	GET	Fetch latest blocks with transaction data
`/api/transaction`	GET	Get transaction details by hash
`/api/transfers`	GET	Fetch asset transfers for an address
`/api/account/info`	GET	Get account balance and transaction count
`/api/account/transactions`	GET	Get recent transactions for an account
`/api/nft/metadata`	GET	Fetch NFT metadata

📖 Alchemy SDK vs ethers.js

The Alchemy SDK wraps ethers.js with enhanced functionality:

Operation	ethers.js	Alchemy SDK
Get block number	`provider.getBlockNumber()`	`alchemy.core.getBlockNumber()`
Get block	`provider.getBlock(n)`	`alchemy.core.getBlock(n)`
Get balance	`provider.getBalance(addr)`	`alchemy.core.getBalance(addr)`
NFT metadata	❌ Not available	`alchemy.nft.getNftMetadata()`
Asset transfers	❌ Not available	`alchemy.core.getAssetTransfers()`

Need full ethers.js access?

const ethersProvider = await alchemy.config.getProvider();

🔗 Resources

Documentation

Block Explorers

🔍 Etherscan (Mainnet)
🧪 Sepolia Etherscan

🚨 Security Best Practices

Rule	Description
🔐 Never commit private keys	Use `.env.local` and add to `.gitignore`
🧪 Use testnet first	Always test transactions on testnet
🔒 Server-side API keys	API keys are only used in API routes
✅ Validate addresses	Check address format before transactions
💰 Check balances	Verify sufficient funds before sending
⚠️ Handle errors	Implement proper error handling

🧪 Development

Available Scripts

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run linting
pnpm lint

Testing Your Setup

# Verify Alchemy connection
curl -X POST https://eth-mainnet.g.alchemy.com/v2/YOUR_API_KEY \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"eth_blockNumber","params":[],"id":1}'

Server-Side Configuration Note

When using Alchemy SDK in Next.js API routes, add this configuration to avoid fetch issues:

const settings = {
  apiKey: process.env.ALCHEMY_API_KEY,
  network: Network.ETH_MAINNET,
  connectionInfoOverrides: {
    skipFetchSetup: true, // Required for server-side environments
  },
};

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/new-feature
Make your changes
Commit: git commit -m 'Add new feature'
Push: git push origin feature/new-feature
Submit a pull request

👤 Author

Ernani Britto

GitHub: @ernanibmurtinho

📄 License

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

Built with ❤️ by Ernani Britto for the Alchemy Ethereum Bootcamp Week 3

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
app		app
components		components
lib		lib
public		public
styles		styles
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

License

ernanibmurtinho/alchemy-bootcamp-week3

Folders and files

Latest commit

History

Repository files navigation