Smart Shelf

Overview

Smart Shelf is a full-stack book tracking web app inspired by Goodreads. It was built to practice real-world architecture, backend integration, API consumption, and authenticated user data.

The project allows users to discover new books, organize their personal shelves, and seamlessly track their reading journey.

Features

The product was designed with a strong focus on user experience and proper data:

• 🔍 Book Search — Real-time search with URL parameters, shareable links, and server-side sorting.
• 📚 Personal Shelf — Save books with Reading, Saved, or Read status.
• 📝 Notes — Write and persist custom notes per book.
• 📊 Reading Stats — Track your annual goal and reading progress.
• 🏆 Achievements — Unlock badges based on your real reading activity.
• 🔐 Authentication — Email/password signup with a multi-step onboarding flow.
• 🌙 Dark / Light mode — Visual preference persisted across sessions.

Tech Stack & Architecture

The project follows a clean separation of concerns structured across three core layers:

• src/lib/ — API clients and database queries (openLibrary.js, userBooks.js, supabase.js).
• src/hooks/ — All global and reactive state logic (useBookSearch, useAuth, useProfile, useUserBook).
• src/pages/ + src/components/ — Pure UI layer, kept entirely free of complex business logic.

To optimize performance, search results are cached in memory to minimize external API overhead. Additionally, book metadata is cached in Supabase once saved to a user's shelf, avoiding repeated third-party requests.

Challenges & Learning

As my first published full-stack project, handling end-to-end development introduced me to real-world infrastructure problems:

Postgres Permissions & Supabase RLS: During development, queries from authenticated users were throwing a 403 Forbidden error despite sending valid auth tokens. I discovered that the issue stemmed from missing explicit GRANT permissions on the database's authenticated role, which operates alongside Row Level Security (RLS) policies. Figuring this out provided me with a solid foundation in database-level security.

Mid-Project API Migration: I initially integrated the Google Books API. However, it returned an overwhelming amount of low-quality results (such as legal documents and academic papers) and lacked a reliable popularity signal. I migrated to the Open Library API, leveraging their readinglog_count metric and native sort parameters, which drastically improved the search relevance and overall product quality.

AI was utilized throughout the project as a pair programming companion for architectural decisions and code reviews. However, all product decisions, UI/UX design, and final implementation were executed independently.