{"id":20270499,"url":"https://github.com/jitendragangwar123/ethereum-block-explorer","last_synced_at":"2026-04-12T03:31:40.572Z","repository":{"id":210239990,"uuid":"725654881","full_name":"jitendragangwar123/Ethereum-Block-Explorer","owner":"jitendragangwar123","description":"Ethereum Block Explorer that fetches transaction details using a block number.","archived":false,"fork":false,"pushed_at":"2023-12-20T14:28:21.000Z","size":331,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-14T05:42:43.894Z","etag":null,"topics":["alchemyapi","alchemysdk","blockchain","ethersjs","reactjs"],"latest_commit_sha":null,"homepage":"https://ethereum-block-explorer-ten.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jitendragangwar123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-30T15:43:40.000Z","updated_at":"2023-12-19T16:13:03.000Z","dependencies_parsed_at":"2024-11-14T12:44:13.535Z","dependency_job_id":null,"html_url":"https://github.com/jitendragangwar123/Ethereum-Block-Explorer","commit_stats":null,"previous_names":["jitendragangwar123/ethereum-block-explorer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitendragangwar123%2FEthereum-Block-Explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitendragangwar123%2FEthereum-Block-Explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitendragangwar123%2FEthereum-Block-Explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitendragangwar123%2FEthereum-Block-Explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jitendragangwar123","download_url":"https://codeload.github.com/jitendragangwar123/Ethereum-Block-Explorer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241753145,"owners_count":20014252,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alchemyapi","alchemysdk","blockchain","ethersjs","reactjs"],"created_at":"2024-11-14T12:30:57.279Z","updated_at":"2025-12-03T06:15:10.259Z","avatar_url":"https://github.com/jitendragangwar123.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ethereum Block Explorer\n\nThe lessons this week covered the Ethereum JSON-RPC API and the `ethers.js` library giving us the ability to query the Ethereum blockchain and make transactions!\n\nLet's put that knowledge to the test by building our very own **Ethereum Block Explorer**!\n\nBlockexplorers give us the ability to view lots of different information about the blockchain including data about:\n  * the blockchain network itself\n  * blocks in the blockchain\n  * transactions in a block\n  * accounts\n  * and many other things\n  \n[Etherscan](https://etherscan.io/) is a good example of an Ethereum blockexplorer. Check it out to get familiar with how blockexplorers generally work.\n\nThis particular project is very much open-ended. We'll add some challenges here to get your imagination going, but use Etherscan as a guide for features you might consider building in your project.\n\n## Getting Started\n\nClone this project to pull down some basic starter code.\n\nAfter that cd into the base directory of the project and run `npm install` to download all the project dependencies.\n\nIn this project we chose to use React for a front-end and added minimal front-end code to get you going, but feel free to use any front-end stack you like.\n\nUnlike the lessons this week that used the Ethereum JSON-RPC API and the `ethers.js` library to communicate with the Ethereum network, the starter code in this project uses the [AlchemySDK](https://docs.alchemy.com/reference/alchemy-sdk-quickstart?a=eth-bootcamp). The AlchemySDK's core package wraps almost all of the `ethers.js` provider functionality that we learned about and should feel very familiar to you. \n\nFor example, the following `ethers.js` code\n```js\nconst blockNumber = await provider.getBlockNumber();\n```\ncan be written using the AlchemySDK like so:\n```js\nconst blockNumber = await alchemy.core.getBlockNumber()\n```\nAnother `ethers.js ` example\n```js\nconst transcations = await provider.getBlockWithTransactions(SOME_BLOCK_NUMBER)\n```\ntranslates to\n```js\nconst transactions = await alchemy.core.getBlockWithTransactions(SOME_BLOCK_NUMBER)\n```\nand so on.\n\nThere are some `ethers.js` provider functions that are not often-used and therefore not included in `alchemy.core`. But if you ever need the full ethers provider functionality you can access the provider directly with the following code:\n```js\nconst ethersProvider = await alchemy.config.getProvider();\n```\n\nYou can find lots of good docs on the AlchemySDK here:\n  * [API Quickstart](https://docs.alchemy.com/reference/alchemy-sdk-quickstart?a=eth-bootcamp)\n  * [API Overview](https://docs.alchemy.com/reference/api-overview?a=eth-bootcamp)\n\nAlright, without further ado, let's get started!\n\n## 1. Create a unique Alchemy API key\n\nIf you have not already done so, create a unique Alchemy API Mainnet key\nfor your project as [described here](https://docs.alchemy.com/reference/api-overview?a=eth-bootcamp).\n\n## 2. Add your API key to as an environment variable for the project\n\nCreate an empty `.env` file in the base directory of this project.\n\nAdd the following line to the `.env` file replacing `YOUR_ALCHEMY_API_KEY` with your api key.\n\n```sh\nREACT_APP_ALCHEMY_API_KEY=YOUR_ALCHEMY_API_KEY\n```\n\nDo not remove the `REACT_APP_` prefix. React uses that to import env variables.\n\n**⚠️ Note**\n\n\u003e Your Alchemy API Mainnet Key is a sensitive piece of data. If we were\\\n\u003e building an enterprise app to conquer the world we would never place\\\n\u003e this sensitive data in the client code of our blockexplorer project that\\\n\u003e could potentially be read by anyone.\n\u003e\n\u003e But hey, we're just learning this stuff right now, not conquering anything\\\n\u003e yet! :-) It won't be the end of the world to put the Alchemy API key in our\\\n\u003e front-end code for this project.\n\n## 3. Start the webserver\n\n`npm start`\n\nRunning the command above will run the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe webpage will automatically reload when you make code changes.\n\nWhat you'll see in the browser is Ethereum Mainnet's current block number. Not very exciting, but that's where you come in to save the day!\n\n## 4. Make the blockexplorer cool!\n\nThe starter code pulls down the current block number for you.\n\nCan you get more information about the current block and display it in the page?\nTake a look at [alchemy.core.getBlock()](https://docs.alchemy.com/reference/sdk-getblock?a=eth-bootcamp) for how you might go about that.\n\nBlocks contains transactions. Can you get the list of transactions for a given block? Can you use [alchemy.core.getBlockWithTransactions()](https://docs.alchemy.com/reference/sdk-getblockwithtransactions?a=eth-bootcamp) for this?\n\nHow about getting details for individual transactions? The [alchemy.core.getTransactionReceipt()](https://docs.alchemy.com/reference/sdk-gettransactionreceipt?a=eth-bootcamp) looks handy.\n\n## 5. More ideas to think about\n\n- Connecting the dots.\n  - Allow users to click on a block listed in the webpage to get the block's details including its list of transactions\n  - From the list of transactions allow users to click on specific transactions to get the details of the transaction\n- Make an accounts page where a user can look up their balance or someone else's balance\n\n## 6. Supercharge your blockexplorer using AlchemySDK's specialized APIs\n\nBy using the AlchemySDK you can really supercharge your projects with additional API functionality that isn't included in the `ethers.js` package including:\n  * NFT methods\n  * WebSocket methods\n  * Alchemy's Transact API functionality\n  * endpoints for using Alchemy's Notify Webhooks\n\nRead more about the above in the [Alchemy SDK Surface docs](https://docs.alchemy.com/reference/alchemy-sdk-api-surface-overview?a=eth-bootcamp). Using the SDK can implement the following features?\n\n- Given a contract address and token id, can you get the NFT's metadata?\n- What is the floor price of an NFT right now?\n- Did a pending transaction get mined?\n- What transfers did an address receive this year?\n\nGood luck and have fun!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjitendragangwar123%2Fethereum-block-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjitendragangwar123%2Fethereum-block-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjitendragangwar123%2Fethereum-block-explorer/lists"}