bug: Multiple UI issues in Library & Reading Mode — wrong book content, broken cover image, and typo

[milind-garg]

Bug Report - Multiple UI Issues Found on Live Site

Live URL: https://bookcatq.netlify.app
Date: May 21, 2026
Browser: Chrome (Latest) / Windows 11

---

Issue 1 - Reading Mode Shows Same Content for All Books

Description

The Reading Mode page does not update its content based on which book is opened.
Every book loads the same hardcoded placeholder title and paragraph text,
making the feature non-functional for multi-book use.

Steps to Reproduce

1. Go to Library
2. Click "Read Now" on "The Midnight Library"
3. Observe the title and content shown
4. Press back → return to Library
5. Click "Read Now" on "Project Hail Mary"
6. Observe - title and content are identical to step 3

Actual Behavior

• Reading Mode always displays "The Midnight Library" title regardless of which book is opened
• Paragraph content is identical placeholder text for every book

Expected Behavior

• Reading Mode should display the correct book title for the selected book
• Content or placeholder should be unique and tied to the selected book's data

Possible Cause

The Reading Mode component likely has a hardcoded book title/content instead of
reading from the route params or navigation state. The fix should pass the selected
book's data (title, author, cover) via React Router state or URL params and render
dynamically.

---

Issue 2 - "Dark Matter" Cover Image Fails to Load

Description

The cover image for the book "Dark Matter" in the Library is broken -
a missing image placeholder is shown instead of the actual book cover.

Steps to Reproduce

1. Go to Library
2. Locate the "Dark Matter" book card
3. Observe the cover image area

Actual Behavior

• Broken/missing image icon is displayed instead of the book cover

Expected Behavior

• A valid cover image for "Dark Matter" should render correctly

Possible Cause

• The stored image URL for this specific book may be expired, invalid, or returning a 404
• Google Books API cover URL may be using HTTP instead of HTTPS (blocked by browser)
• Missing onError fallback handler on the <img> tag

---

Issue 3 - Typo in Library Page Subtitle

Description

The Library page subtitle contains a spelling error - "presonal" instead of "personal".

Steps to Reproduce

1. Go to Library
2. Read the subtitle below the page heading

Actual Behavior

"Manage your collection and track presonal progress."

Expected Behavior

"Manage your collection and track personal progress."

---

Impact Summary

#	Issue	Severity	Affected Page
1	Reading Mode shows wrong book content	🔴 High	Reading Mode
2	Dark Matter cover image broken	🟡 Medium	Library
3	Typo in subtitle	🟢 Low	Library

---

I'd like to work on all three of these fixes if they can be assigned to me.
I'm a GSSoC 2026 contributor comfortable with React and React Router.

[milind-garg]

I've raised this issue and would love to work on it.
Can you please assign it to me? I'm a GSSoC 2026 contributor and ready to start right away!

[milind-garg]

Hey @AnirbansarkarS, could you share the .env values or a dev Supabase project for local testing? Trying to reproduce bugs locally. Or do i have to use my credentials?

[milind-garg]

i just noticed that the netify url and the project are different . Is that so?

[kundurukarthik15-gif]

Hey @AnirbansarkarS, could you share the .env values or a dev Supabase project for local testing? Trying to reproduce bugs locally. Or do i have to use my credentials?