Bolnisi Wine-Batch Tracker: Crafting an Intuitive Provenance Interface

After the Cardano Explorer was sunset and its Bolnisi wine-batch tracker decommissioned, the Cardano Foundation wanted to make sure users could still access a good, and indeed improved tracker interface. We migrated and rebuilt the interface on the Foundation’s website using Next.js, Tailwind CSS, TypeScript, and shadcn/ui to maintain seamless access to provenance data.

The user experience had to start fast. Instead of leaving visitors staring at a blank page, we wrap our client logic in React Suspense, immediately showing “Loading transactions…” while essential scripts downloaded. That upfront feedback established trust: People knew we were working behind the scenes.

Now ready, the app retrieves a pre-aggregated list of wine batches from our private API. Under the hood, a simple useEffect triggers the fetch, and local state variables drive UI feedback, a spinner for loading and an inline retry button if the network call fails. As soon as data arrives, we present an accordion-style list: each row displays a truncated transaction hash, the corresponding date, and total bottle count.

Expanding a row slides down a panel containing raw metadata in a monospace block and a visual verification badge that confirms data integrity at a glance. For collectors who need the full story, a “View Wine Lots” button opens a modal that displays lot-level details already loaded from the initial fetch. Inside, fields like bottling date, wine color, fermentation vessel, and harvest location appear in a neatly organized, two-column grid. Missing data points gracefully render as dashes, and all dates respect the user’s locale via Intl.DateTimeFormat.

Search is instantaneous and entirely client-side. A controlled input listens for keystrokes, and a 300 ms debounce ensures we only react to meaningful queries, specifically, strings of ten or more characters, ideal for full or partial transaction hashes. Filtering happens in memory, avoiding extra network trips and delivering real-time feedback.

Pagination is handled in pages of five items. When a user navigates to a new page, we fetch that slice of data and store it in a simple in-memory cache. Subsequent visits to the same page retrieve cached entries instantly. Users can switch via page number buttons or “Previous”/“Next” controls without redundant network requests.

Robust error handling is built into every layer. Network failures in the main list or detail modal display clear messages and retry options. An overarching error boundary safeguards against any unexpected rendering errors, showing a friendly fallback interface rather than a broken page.

Accessibility was non-negotiable: shadcn/ui’s Accordion and Dialog components provide built-in WAI-ARIA compliance, keyboard navigation, and focus trapping. We customized Tailwind’s configuration to include brand-specific gray scales and implemented skeleton loaders to minimize layout reflows during data fetches.

This implementation delivers fast batch lookups, smooth inline expansions, and immediate modal detail views by combining Next.js server components, React Suspense, in-memory caching, client-side debounced filtering, and utility-first Tailwind styling, resulting in a resilient, accessible front end that abstracts blockchain complexity into a straightforward provenance tracker.

Explore the rebuilt Bolnisi wine-batch tracker.