Project 02 · Personal Product Build & UX

The Midnight Library 🌙

A personal digital reading space built around a simple idea: a book collection should feel inviting to explore, not like a spreadsheet with covers.

Product ThinkingUX DesignAuthentication & Access ControlSupabaseCloud State SyncEPUB IntegrationResponsive DesignGitHub Pages
The concept

From collection to experience.

The problem I wanted to solve

Traditional digital libraries are efficient at listing books, but often lose the pleasure of wandering through a physical collection. I wanted a personal space that could still handle practical reading tasks while feeling atmospheric, discoverable and distinctly mine.

Product principle

Utility first, personality everywhere else. Search, status and navigation needed to stay obvious while visual and audio details created the sense of place.

Scope

What the product needed to do.

Organize

Structure a large personal collection into meaningful series, categories and library wings without making browsing cumbersome.

Remember

Support account-based reading status, favourites and exact EPUB reading position so the library can restore a reader’s place across browsers and devices.

Invite exploration

Use search, filters, themed shelves and small interactive details to make discovery feel closer to wandering a library.

Product & UX decisions

Designed through iteration.

01 · StructureGrouped books into collections and wings, then built search and filtering around the way the collection is actually browsed.
02 · StateAdded authenticated accounts, cloud-synced favourites and reading status, plus EPUB CFI progress so a reader can continue from the same place on another device.
03 · AtmosphereDeveloped category-specific shelf details, a midnight visual system, stars, ambient motion and library-at-night cues.
04 · SoundTurned ambient audio into a controllable playlist with explicit ON/OFF, volume and previous/next navigation.
Product infrastructure

Beyond the visual experience.

Authentication & private access

Supabase authentication supports signed-in reader accounts and controlled library access, separating the public experience from private reading content.

Cross-device reading memory

Favourites, reading status and EPUB CFI location are stored per user in Supabase. Progress percentage is synced alongside the exact EPUB position so a reader can resume across devices.

Reader accounts

A dedicated account area surfaces access level, favourites, books in progress, completed books and current EPUB progress rather than treating authentication as an invisible backend feature.

Book request workflow

Signed-in readers can submit free-text book requests. Requests are saved for the Librarian’s Desk, where they can be reviewed and marked as added or declined, with an email handoff available as well.

EPUB reader integration

The library opens EPUB content in an integrated reader and saves a location identifier rather than relying on page numbers, which keeps progress meaningful across different screen sizes.

Responsive shelf behavior

Mobile shelves were refined so decorative objects remain scenery instead of consuming book width, keeping more of each collection visible while preserving horizontal browsing.

Iteration examples

“Working” was not the finish line.

Floating books → grounded shelves

When book spines visually appeared to float, the shelf layout was revised so the physical metaphor remained believable.

Generic shelves → collection identity

Series such as Harry Potter, The Witcher, The Originals and Arsène Lupin gained restrained thematic details without requiring additional image assets.

Hidden audio → explicit control

A small sound action was not obvious enough. It became a dedicated soundtrack module with clear state, volume and track controls.

What this demonstrates

Why it is in my portfolio.

The project is less about front-end development and more about how I turn an idea into a usable product, notice friction, make decisions and keep refining until the experience feels coherent.

Product thinking

Defining the experience, deciding what belongs in scope and balancing practical functionality with emotional value.

User experience

Responding to visual hierarchy, discoverability, control clarity, consistency and the small details that change how a product feels.

Execution

Moving continuously from idea to implementation, testing the result in context and iterating rather than treating the first working version as final — from visual details to authentication, data persistence and cross-device reader state.

Personal build. The collection and product were created for personal use; soundtrack selections used by the live experience are sourced separately under their applicable licenses.