John Housser, Digital Architect

The Solera Project

Screenshot

Background

A few years ago, a friend introduced me to the idea of a Solera Bottle of whisky. The idea is that you create a new bottle of whisky with fractions of other bottles. Some people put the end of each bottle into their Solera and see where the serendipity takes them, some carefully select to create an intentional blend.

You can read more about the concept on VinePair.

I am a very analytical and measured person, so while I wanted to discover and be open to surprises, I wanted to keep track of what went in and the composition over time.

I started with a simple notebook that lived near my bottle, and recorded the date and volumes of each whisky added. That would give me a log of the additions, but not the relative composition considering drinks removed in between. I also wanted some way to visualize the relative proportions.

Question

Could I build a system that made it easy to keep track of the whisky going in and out of my Solera bottle, and then visualize it in an interesting way that showed the relative proportions of each component whisky?

Solutions

The Treemap came to mind as an appropriate technique, whereby each component makes up a rectangle of a size representing its proportion of the entire volume, and could be rendered with D3.

Example Treemap.

Technology Design

The system didn’t need to be very complicated, just a database and a web interface for CRUD.

I have played around with Svelte a bit over several projects, so grabbed that for the web framework. It can be set up for server rendering, so can handle all of the database interface as well as auth-n. Interfacing with a Neon Postgres database is made straightforward with Drizzle. I didn’t want to manage user authentication, just authorization, so picked up AuthJS to set up a Google OIDC flow, storing identity references in my database. The rest of the database is made up of entity collections for Bottles and Transactions.

Deploying the project from GitLab to Cloudflare Workers keeps the infrastructure easy to maintain and free to operate.

Final Architecture

Solera Project Architecture.

Technology of Note

  • Neon managed serverless Postgres database
  • Drizzle TypeScript ORM
  • AuthJS for easy authentication with OAuth providers
  • Svelte web application framework
  • D3 JavaScript visualization library for rendering the Treemaps
  • Cloudflare Workers distributed global JavaScript compute