This explorer gives us the ability to view different information about the blockchain including data about:
- blocks in the blockchain
- transactions in a block
- accounts
Etherscan is a good example of an Ethereum blockexplorer.
This particular project is a simpler version built using React and AlchemySDK (v2).
You can find lots of good docs on the AlchemySDK here:
Alright, without further ado, let's get started!
Clone this project to pull down some basic starter code.
After that cd into the base directory of the project and run npm install
to download all the project dependencies.
If you have not already done so, create a unique Alchemy API Mainnet key for your project as described here.
Create an empty .env
file in the base directory of this project.
Add the following line to the .env
file replacing YOUR_ALCHEMY_API_KEY
with your api key.
REACT_APP_ALCHEMY_API_KEY=YOUR_ALCHEMY_API_KEY
Do not remove the REACT_APP_
prefix. React uses that to import env variables.
Your Alchemy API Mainnet Key is a sensitive piece of data. If we were
building an enterprise app to conquer the world we would never place
this sensitive data in the client code of our blockexplorer project that
could potentially be read by anyone.But hey, we're just learning this stuff right now, not conquering anything
yet! :-) It won't be the end of the world to put the Alchemy API key in our
front-end code for this project.
npm start
Running the command above will run the app in the development mode. Open http://localhost:3000 to view it in your browser.
The webpage will automatically reload when you make code changes.
Feel free to play around, and make some improvements.
- Make an accounts page where a user can look up their balance or someone else's balance
- Given a contract address and token id, can you get the NFT's metadata?
- What is the floor price of an NFT right now?
- Did a pending transaction get mined?
- What transfers did an address receive this year?