Behind the scenes of my digital bookshelf 📚
Sent on June 8th, 2021
Hi, I’m Aravind Balla and you are reading letter 12 from the Hackletter where I talk about my learnings and give you behind the scenes of things I keep doing for fun.
I recently built a corner on my website with the details of the books I read on Kindle and the highlights I take while reading them. I call it – Bookshelf. What else would I?. Thanks to modern technology, the website updated automatically while I keep reading and I don't have to push a button.
I want to talk about how I did that in this letter.
Secret sauce 🍅
Readwise plays a huge role here. Readwise is a service that syncs your highlights and notes from a lot of sources. Kindle happens to be a popular and the most used source (for me). In this case, Readwise is responsible for getting all the highlights and the book details into my digital bookshelf.
I make API calls to Readwise with my API token and fetch all the details I need to show on my bookshelf.
Readwise referral if you'd like to try it - https://readwise.io/i/aravind1
How does it automatically update, though?
My website is basically a bunch of static pages. And I use NextJS, a framework based on ReactJS to generate those static pages. It's powerful. Let me tell you how.
It has a cool feature called Incremental Static Regeneration (ISR), which allows a particular page on the website to rebuilt on the fly to be always upto-date. When someone visits the page, it tries to rebuild the page on its servers to check for new content.
The interesting advantage I get here is – if this new build fails for some reason, like API spec changes or API doesn't work anymore, I still have the old page live. Nothing is lost and there is no downtime.
All the pages in the bookshelf are ISR enabled, so they stay updated, always.
Hiccups ⏹
It wasn't a complete cake walk, at least while deploying. Readwise's API has a rate limit. We can only fetch the data, highlights or the book details, certain times in a minute. As my website was statically generated, it tried to fetch highlights for all the books while building the site and deploying. It would always fail.
How did I solve it? By not building the book pages (the one's with highlights).
This is another area where NextJS shines. I can ask it to build the pages when the user visits and not build it at the time of deployment. If the page is not yet built, it builds it. If it is already built, it serves it from the cache. As it is deployed on an Edge network, there are copies of the cache across the world and pages are served very fast to the users. This is some sort of delayed static site generation.
The code is completely opensource - https://github.com/aravindballa/website/tree/master/pages/bookshelf
What's in for the future
I would like to add my takes on the highlights and write full length summaries from the notes I take while reading the books.
And what about physical books? I don't know yet. I'm sure I can add the books manually to
Readwise and add highlights using the OCR feature of their mobile app. I will have opinions when I try this.
Audio books? No idea, as well.
Thanks reading and I’d appreciate if you reply and let me know what you think about this. I'd love some feedback and suggestions. Share this with your friends if you think they’ll enjoy too. If you are planning to build one, or already have a bookshelf, send me your links and thoughts by replying here or DM on twitter.
I'm enjoying hand lettering these day. A recent one - Fail Upwards 🔺
See you next Tuesday 👋