Shelf
Design & build | 2026 · v1 → v2Reading companion
Shelf is a reading companion — Track books. Share reviews. Read smarter. — for readers who finish a book every few days, juggle holds, and always want the next one. Browse a catalog, rate and review, tag what you want to read, and see what the community is reading next.
The arc
A first version on seeded mock data to prove the UX, then a rebuild on real data (Open Library API + Supabase) and a sharper visual identity — from editorial serif to a monospace "card catalog" system.
Stack
Cursor, Figma, Vanilla JS, Open Library API, Supabase, Netlify
View ->
v2 (latest)
v1 (original)
User Tasks & Flows
Discover (browse catalog, search) → Decide (reviews & ratings) → Track (Want to read / Favorite) → Share (post to feed). In v2, tracking and sharing sit behind Sign in / Join.
Version 1 · Mock-data prototype
Editorial and literary: warm cream canvas, near-black ink, crimson accent. Cormorant Garamond over DM Sans. Entirely on seeded mock data — fast way to pressure-test the full experience.
Version 2 · Live data + backend
Open Library API for real titles, authors, and covers. Supabase for accounts and saved shelves. The catalog became a card catalog — library-card metaphor with real covers and genre tags. Type shifted to IBM Plex Mono over Inter.
What changed, v1 → v2
Data — mock-data.js → Open Library API
Backend — none → Supabase auth + database
Personalization — static profile → Want to read / Favorite shelves
Design — Cormorant serif editorial → IBM Plex Mono card catalog
Search — basic browse → full keyword search
Mood Board & Styles
Both versions share warm cream canvas; v2 shifted ink warmer and traded elegant serif for a monospace catalog voice.
Prompting Process
How the approach changed moving from mock data to a real API + backend.