Blockchain Explorer Web

A clean, professional looking, mobile responsive clone of a Bitcoin Explorer, coded in React+TS. It can also scale to blockchains other than Bitcoin later, easily.

Demo

• Before accessing, please make sure CORS is allowed using this extension - https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
• Demo : https://blockchain-explorer-web.vercel.app/

---

Part 1: Home Screen & Search

1. Block explorer listing (table) showing critical Block information of latest 15 blocks.
2. Search functionality to redirect the user to any searched block's details and transactions.
3. Block hashes are clickable to go to their respective details screens

Listing API integration

1. API integration - Fetch latest 1hr blocks using this api - https://blockchain.info/blocks
2. API integration - Using the heights received, fetched the block listing details using this api - https://chain.api.btc.com/v3/block
3. Aggregated their results, and used it to popuplate the list page.

---

Part 2: Block Details and Searching

1. On click of search or pressing enter, or clicking on any Hash Link, routed to details screen - /block/[searched string]
2. On this page mount, checked if the route hash is valid, if yes, showed the details.
3. If the route hash is not valid, or any other backend error, showed the troubleshooting instructions - with a countdown timer for API rate limiting issues.

Block Details API integration

1. API integration - Fetch block details API 1 - https://blockchain.info/rawblock/$block_hash
2. API integration - Fetch block details API 2 - https://chain.api.btc.com/v3/block/
3. Aggregated their results, did additional calculations for summing up total transaction volumes, etc.

---

Part 3: Transactions

1. The final data aggregated after the block-details API contains the detailed transactions array, used that to show transactions in the best manner.
2. Implemented simple pagination (as the txn_count exceeds 2-3k) - this made the page performant, smooth and manageable.

---

Geeking out - Dev Stats

https://wakatime.com/@fe75714b-a5a9-4037-9e5b-6ede33276e24/projects/nskaziqbgx?start=2022-07-25&end=2022-07-31

Future To-Do's

• Extend functionality to other blockchains like Ethereum, Polygon etc.
• Introduce better state management for API's and middlewares - especially when computation is involved.
• Websocket or Polling support for Real-time updates
• Make layout change in Mobile screens for better UX. Currently did the minimum to ensure the design doesn't break in mobile.
• Cache the result of rate-limited API's

---

Made with ❤️ By Dewansh Parashar.
Special Thanks to https://www.blockchain.com/ and https://explorer.btc.com/ for making their API's free for public use.