BSC NFT Explorer

Explore NFTs and key NFT metrics on Binance Smart chain

Live Demo: https://bsc-nft-explorer.vercel.app/

BSC.NFT.Explorer.mp4

Implementation

The app relies on:

Covalent for the latest blockchain data
Next.js and Chakra UI for the frontend

Lightning-fast performance

Usually web apps face a trade-off between slowly fetching the latest data (requests take time) or quickly displaying static data (which is out of date).

BSC NFT Explorer loads lightning fast statically-generated pages whilst continiously displaying the latest data. This is made possible by the one of the latest features on Next.js, Incremental Static Regeneration (ISR). For each NFT collection's page, the server will attempt to regenerate the page once every 10 seconds.

Interactive charts

BSC NFT Explorer features interactive, zoomable charts, made possible by the Apexcharts package.

Add a new NFT collection in seconds

Simply go to collections.json, append the collection address, and then deploy. That's it!

All of the collection's data, from its name and size, to daily volume and prices, are fetched using the contract address you added.

BSC NFT Explorer also allows site visitors to request a collection to be added. Site administrators can easily see the latest requests and approve them in the Github issues tab.

How a site visitor can request a collection to be added:

Click the request button on the homepage
Enter the contract address of the collection, and press submit
This will automatically create a new Issue on Github
Once the site administrator has approved the addition by adding the label 'approved-collection' to the Issue, a Github workflow appends the address to collections.json and generates a pull request (wip)
The site administrator approve the PR, automatically triggering a rebuild - the collection is added

Setup

Clone the repository
Add your COVALENT_KEY in the .env file
Run yarn install
Run yarn dev

Local development notes

The web app makes requests to the Covalent API
Requests to Covalent are data-heavy and require the Covalent servers to perform complex queries
Fetch requests to the covalent server may take longer than expected
In times of high server load, the Covalent server may return a 501 error and timeout - redeploy or refresh the page to retry
In production, pages are statically generated at build-time so that the experience is instant
Use fewer contracts in collections.json just for when developing locally if fetch requests are too slow

Deploy

The easiest way to deploy is using Vercel.

Add your COVALENT_KEY to your Vercel project's environment variables

defchen/bsc-nft-explorer