[Full Tutorial] Build a simple Bitcoin Runes Dashboard using Next.js, shadcn, and the Hiro Runes API

Come and follow along step-by-step as Eric Choy, Developer Advocate at Hiro, guides you through the building process of the Runes Dashboard app. You'll also get a chance to hear from Rafael Cárdenas, Senior Software Engineer at Hiro, on how the Runes API works.

Bitcoin Runes is a new fungible token protocol on Bitcoin that launched in April 2024, alongside the Bitcoin Halving. Created by Casey Rodarmor, the same creator of Bitcoin Ordinals, Runes are a more efficient design compared to BRC-20 tokens, an experimental protocol for fungible tokens that was built on top of Ordinals.

For the code snippets used during the building process:

For more on the Runes API documentation:

For the completed application, check out the Github repo for this project where you'll find the app's public link and also be given enhancement suggestions:

00:00 Intro and app demo
01:57 Rafael explaining Runes and how the Runes API works
11:59 Building landing page and Hero section
14:57 Installing shadcn/ui components
19:31 Implementing dark/light mode toggle
22:40 Scaffolding our dashboard and route segments
31:44 Implementing our function calls to fetch Runes API endpoint data
54:19 Passing our API data to display on dashboard's card components
01:09:19 Using Stacks Connect to add Connect Wallet functionality
01:21:50 Adding shadcn/ui DataTable components to our leaf segments
01:36:24 Polishing up the landing page
01:46:18 Viewing the completed app

==========

Learn more about Hiro's Developer Tooling:

Follow us on Twitter:

Developers, dive right on into the Docs:

To start learning the Clarity smart contract language:

Learn more about the Stacks Blockchain: