Explore NFTs and key NFT metrics on Binance Smart chain

The app relies on:

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

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.

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

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

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

• 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

The easiest way to deploy is using Vercel.

• Add your COVALENT_KEY to your Vercel project's environment variables