Case study · Shelf Inn

A home library you photograph instead of typing.

Shelf Inn is a home library app for the web, iOS and Android. Photograph a shelf, AI reads every spine, the library checks itself in, and your books become a 3D room you can style, visit and share.

Visit shelfinn.com
Challenge
Home libraries rarely get catalogued, because typing in hundreds of books is a job nobody finishes.
What we built
One product that reads spines from a photo and turns the library into a 3D room.
Result
Live on the web with 58,000+ books in its catalogue, and iOS and Android apps built from the same code.
shelfinn.com
Real-time 3D shelf on the Shelf Inn website, with books standing face-out on a wooden shelf
Shelf Inn phone screen showing a library as book spines
Shelf Inn phone screen showing a library as a grid of covers
Type
Vision AI app
Status
Web app live, iOS and Android built
In development since
August 2026
Platform
Web, iOS and Android
Stack
Next.js, three.js, Capacitor, Supabase

1 photo

can catalogue a full bookcase

126 → 4.2 MB

first Android bundle, after moving 3D models to streaming

1,027

books in the library we used to stress-test phones

58,000+

books in the public catalogue

Catalogue count from shelfinn.com. Other figures from the project's build records.

01

The problem

Most home libraries are never catalogued, because typing in hundreds of books is a job nobody finishes. The ones that are catalogued end up as a spreadsheet: useful, but nothing you would want to look at.

Reading apps treat a book as a row in a list, usually in a default edition with a stock cover. The copy on your shelf, with its own spine, its own wear and its own place in the room, disappears.

The goal was to make cataloguing take one photo, and the result feel like a place you can open on any screen.

02

Who it's for

Shelf Inn is for people who own physical books and care about them.

Home library owners

Readers with hundreds of books who want to know what they own, what is unread and which shelf it lives on.

Lenders

People who share books with friends and family and would like them back.

Readers in many languages

Collections that mix scripts. The reader handles English, Gujarati, Hindi and most others.

03

What we built

From one photo to a checked-in shelfInterface illustration
  • MiddlemarchChecked in
  • DraculaChecked in
  • EmmaChecked in
  • FrankensteinChecked in
  • PersuasionChecked in

Web

The full app in any browser, at shelfinn.com/app. The room is at its largest here, and a guest can look around before signing in.

iOS

The phone is the scanner. Photograph a shelf, check books in and carry the library with you, with sharing built in.

Android

The same app and the same library, built from the same code and signed by an automated pipeline.

Shelf scanning

Photograph a shelf or a whole bookcase. Vision AI reads each spine and the books check themselves in, ready for a quick review.

Every other way in

Barcodes, typed ISBNs, photos and receipts all pass through one check-in, so a book arrives once.

The real shelf

Your original photo stays zoomable, with every book outlined in place and tappable.

The 3D room

A real-time room in the browser and on the phone, with books in their real spine colours, named shelves and time-of-day light.

Shareable rooms

A public room at its own link, so friends can visit a library without an account.

Reading and lending

Statuses, progress, ratings and reviews, with a ledger of which books are out and with whom.

The Innkeeper

A concierge that recommends only from books you already own.

Your library, your data

Goodreads import, sync across devices, and full account deletion from inside the app.

Shelf Inn phone screen showing a sample library as real book spines on a named shelf
Shelf Inn phone screen showing the front desk and a button to scan your first shelf
Shelf Inn phone screen showing a sample library as a grid of covers with read marks and progress bars
Shelf Inn web app with navigation for shelves, registry, ledger and lists, and a prompt to scan a first shelf
The web app's front desk, as a first-time guest sees it.
Rendered wall of shelves holding hundreds of books with named brass plaques
A still of the real-time 3D room. Shelves, spines and plaques come from the library's data.

04

Architecture

One codebase runs everywhere. The web app is a Next.js application, and the iOS and Android apps are Capacitor shells around the same code. They bundle the room and the scanner so the app opens instantly and can start offline. Public pages load from shelfinn.com inside the app's web view, so site updates reach the app without a store review.

Clients

  • Web appNext.js, in any modern browser
  • iOS and AndroidCapacitor shells, one codebase
  • Release pipelinesXcode Cloud and GitHub Actions

In the client

  • 3D roomthree.js with React Three Fiber and drei
  • Scan pipelineBand splitting, retries, dedupe, stitching
  • Phone tierIts own render and memory budget

Server

  • Vision proxyKeeps provider keys off the device
  • InnkeeperRecommendations from your own library
  • Web contentCatalogue and notes, loaded in the app

Data and models

  • SupabaseDatabase and sign-in
  • OpenAI or AnthropicVision, switchable by configuration
  • Streamed 3D assetsCached, loaded on demand

05

Key engineering decisions

1

Split photos at the shelf boards

Why

A tall bookcase is too much detail for one image. The app finds the boards, cuts there with an overlap, reads each band with retries, then removes duplicates and stitches coordinates back to the full photo.

Trade-off

More calls per scan, and a stitching layer to maintain, in exchange for reading spines that would otherwise be lost.

2

A line format instead of JSON

Why

The model replies with one pipe-delimited line per book, so a cut-off response still yields every complete line. A truncated JSON document yields nothing.

Trade-off

A custom parser and fallback rules, which we kept small.

3

Adopt the camera library, keep one custom rule

Why

After a hand-built camera stack proved fragile, we moved to a proven library and spent the effort on the room itself. A single output clamp keeps the camera inside the walls.

Trade-off

We live with the library's behaviour, and containment needed careful design to avoid fighting it.

4

Stream 3D models instead of bundling them

Why

One loader hook rewrites model URLs inside the app, so all models stream from the web and no call site had to change. Textures stay local, so first paint doesn't wait on the network.

Trade-off

The room needs a connection to load its models on first use.

5

One codebase for web, iOS and Android

Why

Capacitor wraps the web app's code for iOS and Android, and pipelines produce signed builds for each. All three get every fix, and the web build doubles as the test bed.

Trade-off

Some device behaviour, such as iOS killing a heavy page, has to be handled in web code.

6

Keep public pages out of the binary

Why

Bundling the catalogue, tools and notes would bloat the download, freeze them at build time and send every update through store review. Loading them from shelfinn.com keeps the app small and current.

Trade-off

Those screens need a connection, and the app has to manage navigation between bundled and web views.

06

The hardest problems

A 2.7-second freeze on a single tap

Problem

Pulling a book from the shelf froze the page for 2,729 ms. Tracing found two causes: one action reconciled about 5,000 scene components and then built a new renderer, and a background cover search re-rendered the whole room every 450 ms.

What we did

The pull became imperative, outside React. The scene sits behind a memo boundary, the inspector shares one renderer, spine painting moved to an idle queue, and cover updates are batched.

Result

After the first open, repeat pulls measured zero long tasks.

07

What shipped

In the product

  • Shelf scanning and automatic check-in
  • Barcode, ISBN, photo and receipt check-in
  • Real shelf view and the 3D room
  • Shareable public rooms
  • Reading progress, lending ledger, ratings and reviews
  • Innkeeper recommendations and Goodreads import
  • Accounts, sync and self-service deletion

Still to come

  • Public release on iOS and Android
  • An AR view of your shelves, built and held back until it's ready
Next case studyThe Bookish Elf

Let's build.

Tell us about your project. We respond within 24 hours with a detailed plan of attack.

Start a Project