Case Study

Turn the Page: A Digital Bookshelf Built in React

Summary: Born from a lifelong habit of making lists and a strong belief that my data should always be mine. Frustrated with existing availability of book-tracking tools and their lack of privacy and data portability, I set out to build an online bookshelf that's beautiful, functional, and puts you in control of your data.

Website screenshot

Turn the Page is a free platform that allows users to keep track of their reading list. Make your free account at www.turnthepage.app.

Features include:

  • Search and add any book. All the details are filled in for you
  • Track when you read it and the format you read it in (eBook, audiobook, physical)
  • Keep Books, or your entire shelf private
  • Browse and track the books you've read on the top book lists
  • Get AI generated recommendations for what to read next
  • Easily export all your data

Background: My Story, My Books, My Data

I'm a list-maker. Always have been. My life is a series of cataloged entries: tasks, project concepts, restaurants visited and yet to visit (see I-eat-ithaca), every run, every workout, every book consumed. Over the years with this habit, I've learned one thing: The shiny new app that promises to make the list maker's life easier will loose its sheen, and when that happens, you'll be stuck copy and pasting out your data.

This pragmatic realization led me down the path to find a better way to manage my reading list. Until now, a simple Markdown file served its purpose. I use Obsidian for all my list making. The data is portable, but "aesthetic" isn't exactly in its vocabulary. And while the internet offers no shortage of book-tracking platforms, they often come with more features and noise (social) than I need, and crucially, a less-than-ideal stance on data liberation. My requirements in a book list are simple: a straightforward method to display and maintain my book list, coupled with ease of data portability.

That's why I made Turn the Page.

Features: More Than Just a Book List

πŸ“š Elegant Bookshelf

At its core, Turn the Page is a digital bookshelf. Books are neatly organized chronologically, separated by year, and display the cover, title, author, and read date for each. Leaving it at just a basic list felt a bit uninspired so I added a few practical flourishes.

πŸ† Curated Lists of Award-winning Books

One notable addition is the inclusion of several prominent book listsβ€”Pulitzer, Hugo, NYT Readers' Choice, Booker, Giller. You can browse these and quickly see which titles you've already checked off, which, surprisingly, has proven to be a great way to discover my next read.

πŸ€– AI Generated Reading Insights and Recommendations

If the prize winning lists don't fit your taste or your mood, then there's also an AI-generated reading analysis and recommendation tool. Powered by Gemini, this feature offers a summary of your reading preferences, suggests potential new genres or authors to explore, and even recommends five new books based on your history.

⬇️ One-click Data Exports

And, as previously alluded to, data portability is non-negotiable. A single click allows you to export all your reading data as text, Markdown, or JSON. Your books, your data, always.

πŸ”’ Data Privacy

Change how your username is displayed, set your bookshelf as public or private, set individual books as public or private.

Website screenshot

The Stack: Some Old, Some New

Building Turn the Page was an opportunity to use some tools I was familiar with in some new ways and to try out some wholly new things as well. The frontend is built with Next.js and hosted on Vercel. For data storage, I opted for Postgres on Supabase, and authentication is handled securely with Auth.js using either Google or GitHub OAuth. Prisma ORM kept my database interactions smooth and efficient. And some test driven development was implemented using Jest.

This project also provided me with my first opportunity to try out Tailwind CSS. I'll admit, I went into it with some preconceived notions, and while I gave it a fair shot, my initial opinions largely held true – I'm still not its biggest fan! But just like literary tastes, to each their own.

Integrating the Google Books API was crucial for finding book data, which, when you add a book, is imported into the database and served from there from that point on.

Another first for me with this project was integrating an LLM api for the AI generated recommendations. The API interface is straight forward enough, the interesting challenge was the trial and error process in prompt engineering and the wide variability in responses based on small input changes. Particularly, in due to the non-deterministic results, some prompts which appeared to provide good responses, upon further testing would reveal to be inconsistent, return too similar results for different inputs, or be prone to hallucinations.

One of the most significant technical hurdles involved leveraging caching effectively. Being on the generous free tiers of these services meant I had to be smart about minimizing queries and API calls. The challenge was finding that sweet spot: caching as much as possible for performance and cost-efficiency, while still ensuring that dynamic content refreshed instantly and displayed the correct data for each individual user. It was a fascinating puzzle to solve.

Embracing My Reading Taste (Even the Space Operas!)

One wholly unexpected discovery from working on this project has been my bashfulness at sharing my reading taste (and also how many people share my tastes). Demoing Turn the Page often comes with a slight blush. My literary tastes aren't always the most "highbrow". My preferences lean heavily towards hard sci-fi and epic space operas. My last few years have involved a significant number of long drives between Boston, Ithaca, and Toronto (each a solid five-hour leg). Nothing makes those miles disappear like a gripping sci-fi action audiobook.

And now, thanks to Turn the Page, my literary diet is on full, public display. If you like a blend of sci-fi and programming on your reading list, check out my bookshelf.