Mikkeller Beer Celebration

By Espen Hovlandsdal & Kristoffer Brabrand

Mobile app and website for the Mikkeller Beer Celebration (MBCC) craft beer festival, with user-contributed beer ratings, news and Untappd integration.

Rate, comment and favorite beers. Ability to search for breweries, beers and styles.
See map of venues participating in Mikkeller Beer Week
Website lists all available beers, with real-time, typo-forgiving search/filtering
Website offers a beer rating sheet to be downloaded for those who prefer pen and paper - a PDF is generated by live data from Sanity. Each beer has a rating and optionally (if checked) a comment field
The famous Mikkeller art style by Keith Shore is represented throughout the app
News feed with push notification support
List of events happening during Mikkeller Beer Week, powered by Portable Text
Fairly simple data model: Beers, breweries, sessions, venues, news items etc
Beers have the fields you would expect. The Untappd Beer ID field automatically takes a URL and extracts the ID from it, allowing it to be embedded in the app.
Custom tool for managing "sessions" during the festival - each brewery brings one or more beer to each session. The custom tool allows for referencing unannounced beers and batch publishing.

About the project

Mikkeller Beer Celebration Copenhagen (MBCC) is one of the world's largest craft beer festivals. Since 2012 it has been held once a year in Copenhagen, Denmark, and invites over 100 craft beer breweries to showcase their beers. The festival is split into four different sessions (yellow, blue, red and green) spanning two days.

In 2017, an official app and website was launched, built with React Native and powered by Sanity. The app was subsequently used for MBCC 2018 and 2019.

The app lets users keep track of which beers they've tasted as well as rate, comment and favorite them. With a typo-forgiving search, it's easy to find beers based on the beer or brewery name, as well as beer style.

When the application is started for the first time, a unique, anonymous ID is generated and paired with a third-party Sanity session. When the user rates a beer, it is recorded anonymously to the backend in order to provide the staff with a real-time view on what people are tasting, what the top rated beers are, and even find "hotspots" in the physical venue.

A popular app amongst craft beer enthusiasts is Untappd, which lets users "check in" beers they taste and give them ratings, comments and photos. For the MBCC app, we added a feature that lets users connect their Untappd account to the app and keep it up to date with every rating and comment.

At publication of the app, a snapshot of the available data is bundled with the application, which allows it to work fully offline. Once the device is online it will check Sanity for updates and persist it to the local device. This was an important feature, as there are many international participants which do not necessarily have access to the internet because of roaming costs.

News updates are synchronized with the Sanity backend, and Firebase is used to provide push notifications - allowing for instant updates to all participants with internet access.

The website is powered by Next.js and provides general information on the festival, along with the venues that participate in the Mikkeller Beer Week, a week-long celebration of beer that culminates with the two-day long MBCC festival.

Every beer available at the festival is also available to view on the website, with the same typo-forgiving, instant search used in the app. Many people prefer a more traditional pen and paper approach to beer tasting, so the website also offers a real-time, generated PDF of all the available beers, ready to be printed on paper and annotated with a pen.

Contributors

Other projects by authors

PåTapp.no

Shows beers currently on tap at craft beer bars in the Norwegian cities of Oslo, Bergen, Sandnes and Stavanger.

Go to PåTapp.no

Foodsteps

App with recipes and food courses from the chefs at Kulinarisk Akademi (the culinary academy) in Oslo. Sanity+Mux powered app built in React/React Native.

Kristoffer Brabrand
Go to Foodsteps