Ethereum Block Explorer

My project for Blockchain Programming course

This is a simple web app that lets you interact with Ethereum blockchain. I built it using JavaScript and it works with Ganache for testing.

Features

• Check ETH balance for any address
• See current block number
• Send ETH transactions
• View recent blocks with transactions

How to Run

1. First install these tools:

npm install -g ganache
npm install -g serve

2. Start Ganache (keep this running):

ganache --deterministic --accounts 10 --defaultBalanceEther 1000 --host 0.0.0.0 --port 8545

3. In another terminal, start the web server:

serve

4. Open your browser and go to: http://localhost:3000

Test Data

When you run Ganache, you get these test accounts (each has 1000 ETH):

Addresses:

• 0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1
• 0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0
• 0x22d491Bde2303f2f43325b2108D26f1eAbA1e32b

Private Keys (for sending transactions):

• 0x4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d
• 0x6cbed15c793ce57650b9877cf6fa156fbef513c4e6134f022a85b1ffdd59b2a1
• 0x6370fd033278c143179d81c5526140625662b8daa446c22ee2d73db3707e620c

How to Test

Check Balance:

• Copy this address: 0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1
• Should show: 1000.0 ETH

Send Transaction:

• Private Key: 0x4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d
• To: 0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0
• Amount: 1.5

View Recent Blocks:

• Click "Load Recent Blocks" button
• Should show blocks with transactions

What I Used

• JavaScript (ES6 modules)
• Ethers.js for blockchain
• CSS for styling
• Jest for testing

Testing

Run the tests with:

npm test

This will test all the main functions like checking balances, sending transactions, and validating addresses.

Course Requirements

Basic Requirements (G) Frontend app - Built a web interface
Check balances - Shows ETH balance for any address
Send transactions - Can send ETH between accounts
Block number - Displays current blockchain block
Test network - Uses Ganache for safe testing

Advanced Requirements (VG) ES6 Modules - Used import/export for clean code organization
Separation of Concerns - Split code into different files for different jobs
Higher Order Functions - Used Array.from(), map(), and filter() in getRecentBlocks()
Object Oriented Programming - Created classes for better code structure
Advanced Testing - Made comprehensive tests with Jest and mocking