Every book I've ever read

Here’s how I created a digital bookshelf for my personal website.

I’ve been experimenting with some new features on my website that might add a more personalised feel. One of these ideas was to display digital catalogue of all the books I’ve read since 2014.

It took a bit of effort to catalogue everything, but now it’s set up I can easily add whatever book I’m currently reading to the back end, and the website will update automatically without me having to touch it.

Here’s how I did it using Airtable, Make and Webflow.

1. Create a database

I used Airtable to set up a database for my book catalogue. I’ve kept it as simple as possible. It contains fields for Name, Image, Author, Date Read and an Amazon Affiliate link for each book.

‍

2. Create an empty Webflow CMS

Next I set up an empty CMS Collection in Webflow. This CMS Collection will eventually receive the data from Airtable via an automation (step 4). The key thing here is to make sure all the Webflow CMS fields match the Airtable fields from step 1.

3. Populate the database

Next I found every book I’ve ever read and input the details to the Airtable database created in step 1. This took a few days to complete and a bit of detective work going through our loft as well as my online purchase history to make sure I didn’t miss anything. (I gave away all my physical books between 2018–2020.)

I grabbed the images for each title from Amazon, as well as individual affiliate links. This way if anyone buys one of these books from Amazon, via my website, I make a few pence. 💰️

4. Connect Airtable to Webflow

To get this working I needed to send all of the data from the Airtable database, over to Webflow so that I could display the books on my website.

To do this I set up a simple workflow in Make that essentially just ports the data from Airtable to Webflow. As all the fields should match up, this is a fairly simple task.

I’ve also set it so that going forward, an automation will run every week to check for new books added to my Airtable base, and send any new ones over to Webflow. This makes it super easy for me to keep my site updated without having to go into Webflow and touch anything.

5. UX / UI

The final step was of course to display the catalogue on my website. The design is super simple and I’ve added some filters to display the catalogue by Date Read or Name.

---

This ended up being a simple but satisfying mini-project.

Next up I’ll be doing something similar with my albums, using the Spotify API.