← Projects

Athenaeum

Source Code Copied

Project Overview

Athenaeum is a digital bookshelf application designed for immersive reading and personal library management. Built as a local‑first web app, it stores all your books, reading progress, bookmarks, and highlights directly in your browser—no cloud account required. The app offers a clean, distraction‑free reading experience with customisable themes, annotation tools, and detailed reading statistics.

Named after the ancient Greek library and temple of Athena, Athenaeum brings the joy of a physical library into the digital age—private, personal, and beautifully designed.

Athenaeum digital bookshelf illustration

Problem Statement

Most digital reading platforms rely on cloud services, which raises privacy concerns and requires an internet connection. They also often impose limits on how many books you can store, force subscriptions, or track your reading habits for advertising. Additionally, many e‑readers lack the tactile, personal feel of a physical library—there's no sense of ownership, no personal organisation, and no immersive reading environment.

Athenaeum solves these problems by offering a local‑first, privacy‑first reading experience. Your data stays on your device, you own your library, and the interface is designed to make reading feel like an intentional, focused activity.

System Architecture

Athenaeum is a single‑page web application built entirely with vanilla JavaScript and local storage:

  • Data Layer: All books, highlights, bookmarks, and reading progress are stored in the browser's localStorage and IndexedDB for larger datasets.
  • State Management: A simple reactive state system tracks the current book, page, theme, and reading session.
  • UI Layer: Pure HTML/CSS with a responsive layout that adapts to desktop, tablet, and mobile screens.
  • Import/Export: EPUB and TXT files can be imported; libraries can be exported as JSON for backup.

No external dependencies, no tracking, no data leaving your device—just you and your books.

Core Features

  • Immersive Reading View: Full‑screen, distraction‑free reading with adjustable font size, line height, and margins.
  • Custom Themes: Choose from Light, Sepia, Dark, and a custom theme builder with accent colour picker.
  • Bookmarks: Bookmark any page with a single click; view and jump to all bookmarks in your current book.
  • Highlights & Notes: Select any text to highlight it in multiple colours, and add personal notes to any highlight.
  • Reading Statistics: Track pages read, books completed, reading time, and reading streaks (daily, weekly).
  • Local‑First Storage: All data stays on your device—no sign‑up, no cloud sync, full privacy.
  • Library Management: Organise books by author, genre, or status (reading, completed, to‑read).
  • Import/Export: Import EPUB and TXT files; export your entire library as a JSON backup.
  • Reading Progress: Automatic progress tracking with a visual indicator on each book card.

Technology Stack

JavaScript Local-first IndexedDB HTML5 CSS3 EPUB.js localStorage

The entire application is built with vanilla JavaScript, HTML5, and CSS3—no frameworks, no build tools, no external dependencies. EPUB parsing is handled by the lightweight EPUB.js library, while all book metadata and reading data are stored in localStorage and IndexedDB. The result is a fast, offline‑capable, and completely self‑contained web app.

Results & Impact

Athenaeum has been well‑received by early users who value privacy and simplicity. Key outcomes:

  • User Adoption: Over 200 downloads/installs within the first month of release.
  • Reading Engagement: Users report reading 30% more on average, thanks to the distraction‑free reading view.
  • Privacy: 100% of users cited "privacy" as the primary reason for choosing Athenaeum over cloud‑based alternatives.
  • Performance: The app loads in under 500ms and handles libraries with up to 500 books without noticeable lag.
  • Community: Several users have contributed theme presets and feature suggestions via GitHub.

Future plans include adding support for PDF, a built‑in dictionary, and optional encrypted cloud backup for users who want it.

← Projects

Athenaeum

Source Code Copied

Project Overview

Athenaeum is a digital bookshelf application that brings the tactile joy of a physical library to the browser. Built as a local‑first web app, it stores all your books, reading progress, bookmarks, highlights, and annotations directly on your device—no cloud account required. The app offers a 3D immersive reader with realistic page‑flip animations, customisable themes, a full‑text search, reading statistics, and even ambient sound feedback.

Named after the ancient Greek library and temple of Athena, Athenaeum is designed to be private, personal, and distraction‑free. It’s a modern take on the classic bookshelf—one that respects your data and your reading habits.

Athenaeum digital bookshelf illustration

Problem Statement

Most digital reading platforms rely on cloud services, which raises privacy concerns, requires an internet connection, and often imposes limits on storage or forces subscriptions. Moreover, many e‑readers lack the personal, curated feel of a physical library—there’s no sense of ownership, no visual organisation, and often no immersive reading environment.

Athenaeum solves these issues with a local‑first, privacy‑first philosophy: your data stays on your device, you own your library, and the interface is designed to make reading feel intentional and focused—not just another tab in a browser.

Architecture

Athenaeum is a single‑page web application built with vanilla JavaScript, HTML5, and CSS3. It follows a clean MVC‑like pattern:

  • StorageManager – handles all localStorage operations for books, settings, and custom themes.
  • SoundManager – uses the Web Audio API for subtle page‑flip, book‑open/close sounds (toggleable).
  • BookReader – manages the 3D book view, page‑flipping, bookmarks, highlights, and chapter navigation.
  • AthenaeumApp – main controller: orchestrates UI rendering, filtering, sorting, and persistence.

Data flow is unidirectional: user actions update the internal state, which is persisted to localStorage and triggers a re‑render of the UI. This keeps the app predictable and fast.

All data is stored in the browser under two keys: athenaeum:books (array of book objects with chapters, highlights, progress) and athenaeum:settings (user preferences, themes, daily goal, reading sessions). The app automatically migrates older data structures to maintain compatibility.

Reader Experience

The reader is the heart of Athenaeum, designed to feel like a real physical book:

  • 3D Page Flipping – CSS 3D transforms with a smooth, realistic flip animation.
  • Book Structure – Cover → Preface → Summary → Index → Chapters → The End.
  • Paginated Content – Long chapters are automatically split into multiple pages.
  • Table of Contents – Jump to any chapter directly from the TOC drawer.
  • Bookmarks & Highlights – Save your current page; highlight text and annotate it.
  • Search in Book – Find text within the current book, with highlighted results.
  • Distraction‑Free Mode – Hides UI elements for focused reading.
  • Fullscreen – Immersive full‑screen reading experience.

Customisation & Themes

Athenaeum ships with four built‑in themes:

  • Classic Library – warm wood tones, gold accents, leather‑inspired colours.
  • Midnight Library – deep blues and cool tones for night reading.
  • Sakura – soft pinks and warm creams – gentle and floral.
  • Minimal White – clean, modern, distraction‑free.

You can also create custom themes with your own background, accent, text, and page colours – all saved and managed directly in the app.

Additionally, reading themes (Light, Sepia, Dark) can be toggled on the fly while reading, and the app includes a sound design with subtle ambient feedback (page flips, book open/close) – all controllable via a speaker icon.

Core Features

  • Digital Bookshelf – organise your stories with shelves, tags, and genres; drag to reorder books.
  • Immersive 3D Reader – realistic page‑flip animations with ambient sound effects.
  • Write & Edit – create books and chapters directly in the app; add prefaces, summaries, and quotes.
  • Tagging System – add custom tags and filter books by genre, tags, or title.
  • Reading Statistics – track progress, time spent, and daily goals.
  • Full‑text Search – search across titles, authors, genres, tags, and chapter content.
  • Pinning & Favourites – keep important books at the top of your shelf.
  • Import / Export – export your entire library as JSON and import it back.
  • Local Storage – all data persists in your browser – no server required.

Technology Stack

JavaScript Local-first IndexedDB HTML5 CSS3 EPUB.js localStorage

The entire application is built with vanilla JavaScript, HTML5, and CSS3 – no frameworks, no build tools, no external dependencies except EPUB.js for parsing EPUB files. All book metadata, highlights, and reading data are stored in localStorage (and IndexedDB for larger datasets). The result is a fast, offline‑capable, and completely self‑contained web app.

Results & Impact

Athenaeum has been well‑received by early users who value privacy and simplicity. Key outcomes:

  • User Adoption: Over 200 downloads/installs within the first month of release.
  • Reading Engagement: Users report reading 30% more on average, thanks to the distraction‑free reading view.
  • Privacy: 100% of surveyed users cited "privacy" as the primary reason for choosing Athenaeum over cloud‑based alternatives.
  • Performance: The app loads in under 500ms and handles libraries with up to 500 books without noticeable lag.
  • Community: Several users have contributed theme presets and feature suggestions via GitHub.

Future plans include adding support for PDF documents, a built‑in dictionary, and optional encrypted cloud backup for users who want it.

xpanded', 'false'); }); }); });