Back to Portfolio
Web • Local-First Architecture IndexedDB Powered

ReadLib — Local-First Book Management System

A private, local-first library and personal reading companion with an embedded PDF document reader, persistent offline IndexedDB storage, and reading progress tracking.

ReadLib Application Interface Preview

Role

Frontend & Offline Systems Architect

Architecture

100% Local-First • Zero Server Dependency

Tech Stack

React.js IndexedDB (idb) pdf.js Vite CSS Modules

Privacy

All Books & Notes Stored Directly on Device

The Problem & Core Idea

Most contemporary book and document management tools force users into cloud accounts, subscriptions, and proprietary file locking. If your internet connection drops or the service shuts down, your library is inaccessible.

ReadLib was built on the Local-First software principle: your books, PDFs, and reading progress stay permanently on your machine inside IndexedDB. The app loads instantly even with zero internet connectivity.

Key Features

Embedded PDF Reader

Read uploaded PDF books directly inside the browser using Mozilla's pdf.js engine with zoom controls, page jumps, and dark reading mode.

Reading State Tracking

Organize books into To Read, Currently Reading, and Completed shelves with automated page bookmark persistence.

IndexedDB Binary Storage

Stores raw PDF binary blobs and generated cover thumbnail caches client-side without hitting 5MB LocalStorage limits.

Import & Export Backup

One-click JSON export and import allows users to migrate their complete reading catalog to other devices seamlessly.

Engineering Challenges & Solutions

Challenge 1: Large PDF File Memory Pressure in Browser

Loading multi-hundred-megabyte textbooks into standard JavaScript memory can crash mobile browser tabs. Solved by streaming PDF byte arrays in chunks using pdf.js Range requests rather than loading entire blobs into RAM at once.

Challenge 2: Client-Side Cover Thumbnail Extraction

To avoid manual cover uploads, an automatic pipeline renders page 1 of every ingested PDF onto a hidden HTML5 canvas, converting the rasterized frame to a lightweight WebP thumbnail stored alongside metadata.

Previous Project CineVault Next Case Study UniLib