Drink Card PowerUp

List your beers on a tasting night
Beer information from Untappd appears on the back of each card
Use the Trello mobile app to drag cards into lists and record your favourites while you're out
If you own a venue you can plan events and play with different ideas until you build up a complete beer list

Inspiration

We live in an age of data. It feels like everything is catalogued in some app somewhere: every coffee stand, every campsite, every yoga studio, every EV charging station, every craft beer. But so much of that data is stuck in proprietary apps. Wouldn't it be so much better if we could use all that information and remix it to suit us, instead of being boxed in by the limitations of single app?

I'm a craft beer fan, and the #1 app for beer nerds is Untappd. It lists perhaps a million craft beers with descriptions and reviews and many other details. It's great for recording what I've tried and what I think, but sometimes I'd like to do more with that data.

Trello is great for organising things. This Drink Card PowerUp connects Trello with the Untappd API so I can organise my craft beer life however I like! By combining them I get the flexibility of Trello to organise and sort lists, with the rich data of Untappd. Combining two apps to get the best of both is something I think we should be doing a lot more of!

What it does

Drink Card PowerUp adds two things to Trello cards:

Beers
Breweries

It works by handling URL links to Untappd beers and breweries. When you attach a beer, for example, Drink Card sets the cover photo of the card to the beer label. Say you decide to rate the beers at your local pub... your board might now look something like this:

Tasting night

Or perhaps you own a venue and you'd like to plan upcoming events or pick out some interesting beers to order in. You might set up a board with lists for each upcoming event:

Event planning

As Drink Card is a PowerUp it is only available on the desktop, but the data it adds to a card is available when using the mobile app. So if you've loaded up a board with your local pub's tap list before you go then you can easily categorise the cards and take notes on the Trello mobile app while you're enjoying your beer.

Mobile app

How to use it

One of the easiest ways to use Drink Card is to have the Untappd website and your Trello board open in two windows, then just click and drag beers onto your board. Drink Card will set up a card for each beer you drag:

Dragging a beer link to Trello

You can also create cards in Trello then click the 'Add Beer' button on the back of the card to bring up a beer search. Type in a few words and click the beer you're thinking of. Drink Card will then attach that beer to the card:

Adding a beer

Either way your card now has detailed information about that beer from Untappd and links to more information about the brewery and this beer.

Detailed beer information

How I built it

There are two parts to Drink Card:

A static website to configure the Trello PowerUp and provide the UI, built using Typescript, Handlebars and Webpack.
A set of AWS Lambda functions to communicate with the Untappd API and complete an OAuth login to Untappd, building using Typescript and Serverless.

The stack was chosen so that it fits within the free tier of AWS 😀 This is a little app so I didn't want to over-engineer it. Using the combination of a static website plus a small number of independent, stateless functions means it is relatively simple, and so should be reliable and easy to maintain.

Challenges I ran into

Though I'm quite familiar with the technologies I used, I was quite new to Trello PowerUp development so it took me quite some time to get my head around how a PowerUp works.

It's quite a different way of thinking... so often we think of apps as either controlling the whole stack or communicating via a REST API. The PowerUp concept is quite different, more like an augmentation to Trello than a separate app. To make the best use of it had to think differently about how to build an app; instead of storing all my own data I found ways to use attachments effectively to keep all the data in Trello. It can initially feel limiting, but once I embraced it I realised the benefits. No database! No personally identifying information! No GDPR hassles!

Accomplishments that I'm proud of

That little beer bottle icon on the "Add Beer" button. I drew it myself!

What's next for Drink Card PowerUp

This is a hobby project built for me and a few friends, it's a niche app that I don't expect to be widely used. But there are plenty more possibilities I'm considering if people find it useful:

Displaying beer rating information to Trello cards
Synchronising lists between Trello and Untappd
Using suggestion information from Untappd to create cards for beers you might like
Displaying venue information on Trello cards

More generally I would truely, passionately like to see more Trello PowerUps like this: apps that bring in the wealth of data from the internet right into Trello. There is so much data out there stuck in silos! I hope I inspire a few people to do this for their favourite data source. Where are those hiking trails in Trello? Those recipe cards? Those book covers?