Building a Minimal Ethereum Block Explorer

Introduction

I just completed Week 3 of the Alchemy University Ethereum Developer Bootcamp, and I’m excited to share what I built: a fully functional Ethereum Block Explorer with a twist - it’s intentionally minimal, using only black and white with a modular architecture.

Check out the code: GitHub Repository

Check out project Project url

What’s a Block Explorer?

Before diving in, let me explain what a block explorer is. Think of it as Google for the blockchain. Just like you search the web with Google, you use a block explorer to search and navigate the Ethereum blockchain. You can look up:

Sites like Etherscan are the go-to block explorers for Ethereum. Now I understand exactly how they work!

The Challenge

Week 3 of Alchemy University focused on the Ethereum JSON-RPC API and blockchain interaction. The challenge was open-ended: build your own block explorer using the Alchemy SDK.

I decided to take a different approach - I wanted something minimal, fast, and maintainable. No fancy colors, no rounded corners, just pure function with clean aesthetics.

Design Philosophy: Less is More

I deliberately chose a minimal black and white design:

Why? Because I wanted the data to be the star, not the design. When exploring blockchain data, clarity is everything. The minimal aesthetic keeps you focused on what matters - the blocks, transactions, and addresses.

Architecture: Modular and Maintainable

I structured the project properly:

src/
├── App.js                    # Main routing
├── components/
│   └── Header.js            # Search bar component
├── pages/
│   ├── Home.js              # Latest blocks
│   ├── BlockDetails.js      # Individual block
│   ├── TransactionDetails.js # Transaction info
│   └── AddressDetails.js    # Address lookup
└── utils/
    └── alchemy.js           # SDK configuration

Each page is a separate component with a single responsibility. Want to modify how blocks display? Edit BlockDetails.js. Need to change the search? It’s all in Header.js. This makes the code easy to understand, test, and extend.

What I Built

Home Page - Latest Blocks

When you open the app, you see the 10 most recent blocks on Ethereum mainnet. Each block shows:

It’s a real-time snapshot of the network. Refresh and you’ll see newer blocks.

The search bar automatically detects what you’re looking for:

No dropdown menus, no radio buttons - it just works.

Block Details

Click any block and you get:

You can literally traverse the blockchain by clicking parent hashes, going back through history block by block.

Transaction Details

Every transaction shows:

Address Lookup

Enter any Ethereum address to see:

The Tech Stack

Frontend:

Blockchain:

Architecture:

The Alchemy SDK made everything smooth. Instead of wrestling with raw JSON-RPC calls, I could write clean code like:

const blockNumber = await alchemy.core.getBlockNumber();
const block = await alchemy.core.getBlockWithTransactions(blockNumber);

Simple, readable, and it just works.

What I Learned

Blockchain Structure

I now deeply understand how blocks, transactions, and addresses interconnect. Seeing real mainnet data flow through my app - billions of dollars moving on-chain - made everything click. The blockchain isn’t abstract anymore.

Gas Economics

Watching gas prices fluctuate, seeing how different transactions consume gas, understanding base fees vs priority fees - it all became tangible. Theory became practice.

React Patterns

Building this forced me to:

Code Organization

I learned that good architecture isn’t about clever tricks - it’s about making things obvious. When someone (including future me) looks at this code, they should immediately understand where everything is and why.

Design Restraint

Working within constraints (black, white, squares only) forced creative solutions. I couldn’t hide bad UX behind fancy animations or gradients. The design had to work on its own merit.

The “Aha!” Moments

Blocks are literally chained: When I clicked through parent hashes, it hit me - the blockchain is an actual chain. Each block points to the previous one. You can traverse backwards through the entire history of Ethereum.

Transactions have multiple states: A transaction isn’t just “sent” - it’s pending, then mined, then confirmed. Watching this happen in real-time was eye-opening.

The mempool is real: Seeing pending transactions waiting to be mined made the mempool concept concrete. There’s this pool of waiting transactions, and miners pick which ones to include.

Gas makes sense: By seeing thousands of transactions with different gas prices, I finally understood gas as a market mechanism. Higher gas = faster inclusion.

What’s Next

I’m not done! Here are features I want to add:

Technical Enhancements

UI Improvements

Data Features

Why This Project Matters

Building a block explorer taught me more about Ethereum than reading documentation ever could. I had to understand:

More importantly, I learned about building production-quality software:

This isn’t just a learning project - it’s software I can actually use. When I want to look up a transaction, I use my own explorer.

Try It Yourself

If you’re learning blockchain development, building a block explorer is the perfect project. It forces you to:

The Alchemy University course provides excellent guidance, and the Alchemy SDK makes it surprisingly approachable. You don’t need to be an expert - just curious and willing to learn.

Want to see the code? Check out the GitHub repository

Check out the project Project url

Happy exploring!