Airtable Event Dashboard

This is a dashboard (custom website view) of the 'Event Marketing' sample Airtable base. The purpose is to illustrate how Airtable database content can be displayed on a website. Here I designed an event calendar for people to learn about upcoming events and sign up for them. Of course this is only one way of many to interpret the Airtable spreadsheet data for a such a website.

This implementation uses two web page layouts. The index page simply lists each event with a date and type. A screenshot:

Clicking on an event title leads to a detail page for the event. This layout is similar to most blog presentations.

The Airtable Event base

The Event Marketing base is from the collection 'Templates for Web Professionals'. These templates are available courtesy of Amy Keys in the Facebook group, 'Airtable for Web Professionals'. Search Facebook for the group and request to join.

The base has four tables: Events, Venues, VIPs, and Attendence. The individual event data is pulled from the Events table. The locations of each event links to the Venues table. This is where the event address and photos come from. I didn't use the other tables that list attendees. That info would not be appropriate for an announcement website.

Here is a screenshot of one of the event detail pages:

For fun, I added directions using Google Maps for the venues. These are iframes which only need a full venue address as a parameter, and that is available from the Venues table.

From the Attendence table, I used the Share Form feature to have a way to collect RSVPs. The iframe is embedded to simulate what RSVP functionality could look like to collect emails. This will insert the user's email into the database, as well as forward the email to the Airtable account owner.

Implementation Features

This was designed as a static website, so it is fast and simple to host. The pages are generated offline by a python3 program that pulls the content through the Airtable API. The index and event page data is then integrated with custom page templates and downloaded images. Lastly the complete set is uploaded to a static CDN deployment.

Building offline takes a little time, because the Airtable API takes several seconds, photos are downloaded, and the page is assembled. However the web page visitor doesn't have to wait for the delays because only static pages and resources are delivered to the browser. Static websites are fast and secure. There is no code or passwords or programs on the website to be hacked.

Live view

You can demo the hosted static dashboard here.

Notes

The dashboard is read-only from the database. Airtable can be used for data entry.
No changes were made to the schema, nor was additional data added.
Yes the dates are old, that is how they appear in the sample.
The Events are not real - this is just demo data!
The Event Marketing template is meant as a learning tool and starting point to a more functional events calendar for real world use.

Technical Features

Static website built offline then uploaded
Python 3.6
Jinja2 templates
Bulma CSS Framework
Virtual environment for Python
Python Airtable wrapper library
Pexels.com stock photo