A minimal, modular blockchain exploration tool built with React and the Alchemy SDK. Features pure black & white design with clean, comment-free code.

A production-ready web application for exploring the Ethereum blockchain in real-time. Built as part of Week 3 of the Alchemy University Ethereum Developer Bootcamp.

Key Features:

• Minimal black & white design (no colors, no rounded corners)
• Modular architecture (7 clean components)
• Real-time mainnet data
• Fully responsive
• Zero comments (self-documenting code)

• View the 10 most recent blocks on Ethereum mainnet
• See transaction count, gas used, timestamp, and miner
• Click any block to view full details

Automatically detects what you're searching for:

• Block number (e.g., 18000000)
• Transaction hash (e.g., 0x123... - 64 hex chars)
• Address (e.g., 0x123... - 40 hex chars)

No dropdown menus needed - just paste and search!

• Complete block information (hash, parent hash, gas metrics)
• List all transactions in the block
• Navigate to previous blocks via parent hash
• View miner address

• Transaction status (success/failed/pending)
• From and To addresses
• Value transferred in ETH
• Gas limit, used, price, and total fee
• Input data for contract interactions

• Current ETH balance
• Recent transaction history (last 20)
• Support for all transfer types (external, internal, ERC20, ERC721, ERC1155)

• Colors: Pure black (#000000) and white (#ffffff) only
• Borders: 2px solid black throughout
• Corners: Square edges (no border-radius)
• Effects: No gradients, shadows, or animations
• Typography: Clean sans-serif with proper hierarchy
• Spacing: Consistent padding and margins (16px, 20px, 40px)

Why? To prioritize data over decoration. The blockchain information is the focus, not the design.

src/
├── App.js                      # Main router (45 lines)
├── App.css                     # Minimal styles (320 lines)
├── components/
│   └── Header.js              # Search & navigation (55 lines)
├── pages/
│   ├── Home.js                # Latest blocks (59 lines)
│   ├── BlockDetails.js        # Block info (130 lines)
│   ├── TransactionDetails.js  # TX details (145 lines)
│   └── AddressDetails.js      # Address info (85 lines)
└── utils/
    └── alchemy.js             # SDK config (8 lines)

Benefits:

• Easy to understand and maintain
• Each component has a single responsibility
• Simple to test and extend
• No comments needed - code is self-documenting

• Node.js (v14 or higher)
• npm or yarn
• Alchemy API key (Get one free)

1. Clone the repository

   git clone https://github.com/0-x-joseph/block-explorer.git
   cd block-explorer

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   REACT_APP_ALCHEMY_API_KEY=your_alchemy_api_key_here

   You can use .env.example as a template:

   cp .env.example .env

4. Start the development server

   npm start

5. Open your browser

   Navigate to http://localhost:3000

blockexplorer/
├── public/                    # Static files
├── src/
│   ├── App.js                # Main application with routing
│   ├── App.css               # Minimal black & white styles
│   ├── index.js              # React entry point
│   ├── components/           # Reusable components
│   │   └── Header.js         # Search bar and navigation
│   ├── pages/                # Page components
│   │   ├── Home.js           # Latest blocks display
│   │   ├── BlockDetails.js   # Individual block view
│   │   ├── TransactionDetails.js  # Transaction view
│   │   └── AddressDetails.js # Address information
│   └── utils/                # Utility functions
│       └── alchemy.js        # Alchemy SDK configuration
├── .env.example              # Environment variable template
├── .gitignore               # Git ignore rules
├── package.json             # Dependencies
└── README.md                # This file

Frontend:

• React 17.0.2
• React Router DOM 5.3.4
• Pure CSS3 (no frameworks)

Blockchain:

• Alchemy SDK 2.2.3
• Ethereum Mainnet

Development:

• Create React App
• ES6+ JavaScript

Enter: 18000000
Result: Shows Block #18000000 with all transactions

Enter: 0x123abc... (full transaction hash)
Result: Shows transaction details, gas fees, status

Enter: 0x123abc... (Ethereum address)
Result: Shows balance and recent transactions

• Click any block number → View block details
• Click parent hash → Go to previous block
• Click any address → View address info
• Click any transaction → View transaction details

• Total Lines: ~850 (vs 990+ before refactor)
• Components: 7 modular files
• Comments: 0 (self-documenting code)
• CSS: 320 lines (minimal, no frameworks)
• API Methods: 7+ Alchemy SDK methods
• Load Time: Fast (no heavy assets)

npm start      # Start development server (localhost:3000)
npm test       # Run test suite
npm run build  # Build for production
npm run eject  # Eject from Create React App (one-way)

• How blocks chain together via parent hashes
• Transaction lifecycle from pending to confirmed
• Gas mechanics: base fee, priority fee, limits
• Difference between EOA and contract addresses
• How block explorers like Etherscan work

• React component architecture and hooks
• Modular code organization
• Asynchronous data handling
• Client-side routing
• Responsive CSS without frameworks
• Writing self-documenting code

• Constraint-driven design (black/white only)
• Data-first approach to UI/UX
• Minimalism in practice
• Consistency across pages
• Typography and spacing hierarchy

Edit src/utils/alchemy.js:

import { Alchemy, Network } from "alchemy-sdk";

const settings = {
  apiKey: process.env.REACT_APP_ALCHEMY_API_KEY,
  network: Network.ETH_GOERLI, // Change this
};

export const alchemy = new Alchemy(settings);

Available networks:

• Network.ETH_MAINNET
• Network.ETH_GOERLI
• Network.ETH_SEPOLIA
• Network.MATIC_MAINNET (Polygon)
• Network.ARB_MAINNET (Arbitrum)

npm run build
npx vercel

npm run build
npx netlify deploy --prod --dir=build

npm install gh-pages --save-dev
npm run build
npx gh-pages -d build

This is a learning project, but suggestions are welcome! Feel free to:

• Open issues for bugs or feature requests
• Submit pull requests
• Share your own implementations

This project is open source and available for educational purposes.

Built as part of the Alchemy University Ethereum Developer Bootcamp.

• Alchemy - For the excellent SDK and free API access
• Alchemy University - For the structured curriculum and challenges
• Etherscan - For design inspiration
• Ethereum community - For building an amazing ecosystem

• Alchemy SDK Documentation
• Alchemy University
• Ethereum Developer Docs
• React Documentation
• React Router v5