Automatic bibliographic information acquisition architecture integrating OpenBD and Google Books API
The core of the digital bookshelf is an advanced bibliographic information automatic completion system that uses the international standard book number ISBN-13 as the key.
Based on a 13-digit identifier entered by the user or a sequence of numbers obtained from the camera scanning mechanism described below, it first issues an asynchronous fetch request to the OpenBD endpoint as the primary source.
OpenBD is strong in the metadata of domestic publications, and can quickly return book titles, author names, publisher names, even high-resolution cover image URLs and detailed release date information in JSON format.
However, there are cases where out-of-print books, doujinshi, and some specialized books do not hit the OpenBD database.
The moment this cache miss is detected, the system transparently triggers retry logic that falls back to the Google Books API. The Google Books API maintains a huge global index and normalizes the data model by extracting the necessary properties from the volumeInfo object in the response.
This two-stage fetch mechanism dramatically reduces typing strokes during registration and maximizes the speed of building a library database.
At the same time, captured image assets are saved in a state optimized for browser cache storage, designed to eliminate network latency during subsequent renderings.
JAN code real-time parsing engine using camera devices
To eliminate bottlenecks when registering large numbers of books as physical media, this application incorporates camera access using WebRTC and a barcode parsing model accelerated by WebAssembly.
Get the front or rear camera video stream through the media device API and draw on the canvas element in real time.
Edge detection processing is applied to the image data of each extracted frame to accurately segment the ISBN identifier starting from 978, which is the upper row of the two-row JAN code printed on the back cover of the book.
By analyzing the module width of one-dimensional barcodes pixel by pixel and applying a binary pattern matching algorithm, it boasts high recognition accuracy even in noisy environments such as camera shake or reflections from indoor lighting.
As soon as the scan is successful, haptic feedback is performed using the vibration API, and the extracted numeric string is immediately pushed into the bibliographic information retrieval queue.
All of this series of pipelines is processed asynchronously on a single thread on the client side, so there is no unnecessary overhead such as uploading images to the server side, resulting in an extremely secure architecture from a privacy perspective.
Multidimensional reading status management and metadata classification logic
This system's reading status and metadata classification engine create value in book collection management that goes beyond mere listing.
It is possible to assign four exclusive state transition flags to each registered book entity: want to read, currently reading, finished reading, and reading.
This flag is bound to a reactive state management store and triggers a re-rendering of the corresponding virtual DOM the moment the state is updated.
In particular, a background task automatically calculates the number of days that have passed since registration for books that are in the reading state, and we have implemented logic that highlights items that exceed a threshold as a visual alert on the dashboard.
Furthermore, for books that have been read, a five-point star rating system, free text impressions, and a classification scheme using multiple tags are available.
Although tags do not go as far as morphological analysis using natural language processing, the data structure is optimized so that any character string entered by the user is hashed to create an index, and can be extracted on the order of O in later full-text searches and cross-references.
This makes it easy to re-extract past reading experiences based on emotional vectors or specific themes.
3D back cover rendering using WebGL and monthly reading pace calculation
In order to break away from the monotonous two-dimensional grid display, we have introduced a Three.js-based 3D rendering component as the main feature of this application.
By pasting the acquired cover image onto the geometry as a texture map and calculating the light reflection coefficient and shadow casting at the shader level, we construct a real physical bookshelf in virtual space.
Spine thickness is calculated dynamically from the page count property of the bibliographic information, and falls back by applying a standard thickness factor if page count data is missing.
Users can freely pan and zoom in this three-dimensional space using mouse or touch controls, providing an immersive experience to the act of viewing the collection.
Additionally, in contrast to these static collection displays, monthly pace summary graphs have been implemented to visualize dynamic reading activity.
This graph, which is drawn on SVG using D3.js, aggregates the reading completion date timestamps of each book by month and expresses it as a stacked bar graph or cumulative line graph.
It has built-in logic that compares your past reading pace and calculates your progress towards your annual goal number of pages, and maintains your motivation with powerful quantitative data analytics.
. Full in-browser persistence architecture with **IndexedDB** and localStorage
This system uses a local-first architecture that makes full use of the browser's local storage API to safely manage users' valuable library data without relying on third-party cloud servers.
Lightweight configuration values, UI toggle states, theme color preferences, etc. are serialized and stored in a synchronous read/write localStorage keystore.
Meanwhile, large, structured datasets such as thousands of book entities, high-resolution cover image binaries, long reading notes, and history logs are all stored in an asynchronous object store powered by IndexedDB.
IndexedDB internally uses ISBN as the primary key and builds secondary indexes such as reading status, rating score, date and time of addition, etc.
to guarantee responses in milliseconds even to complex queries.
This fully offline operating model allows you to browse your data, add new books, and update your status without a hitch, even when you're on the subway or in an environment with no signal.
There is no need to even run a synchronization process when network connectivity is restored, and the local database always remains the true data source.
Data portability using calendar linkage function and CSV file
It includes deep integration logic with the calendar component to manage the daily activity of reading over time. Timestamps such as reading completion date and reading start date are treated internally as date strings in ISO format, and are mapped as event markers to the corresponding cells on the calendar grid.
This mapping process is dynamically generated by issuing a range query to IndexedDB every time the month changes, and by tapping on a specific date, you are directly routed to the details modal for the books you finished reading on that day.
Additionally, we have implemented a powerful CSV import and export parser for migrating from external book meter replacement apps or as a backup method in case you lose your device.
The export function converts the internal JSON array into an RFC-compliant comma-separated string buffer and triggers the file download directly via the browser's Blob object.
Conversely, the import function asynchronously parses the CSV stream read through FileAPI chunk by chunk, and performs bulk insert while resolving differential conflicts with existing datasets based on ISBN.
This ensures complete data portability.