Step 11 — Continue-reading UX

The previous steps produced a type-safe screen. Now design across time: a reader closes the page and returns later. The feature records an article detail visit and shows a small “Continue reading” layer on the list.

1. Define done as a user sentence

“Open yesterday's article with one activation, without typing its title again.” That sentence fixes the scope. Account sync, recommendation algorithms, and unlimited history are unnecessary.

2. Validate storage as external data

localStorage remains external data even when earlier code wrote it. Treat JSON.parse() as unknown, verify the array and every field, and recover invalid values as empty history.

3. Connect React to browser storage

Do not write during render. Recording a detail-page visit synchronizes with an external system, so perform it in an effect. Subscribe to storage from the list with useSyncExternalStore, covering same-tab and cross-tab changes under one contract. Return the same empty-array reference for the server snapshot to keep hydration stable.

4. Prioritize card information

A mobile card needs four things:

• what it is: title
• where it belongs: category
• when it was read: date
• what happens next: keep reading

Emphasize the first card and expose a sliver of the next to suggest horizontal movement. Switch the same data to a grid above 640px.

5. Verify the journey

Automate detail → list → recent card → detail with Playwright. Checking the stored key alone is weaker than asserting the visible title and final URL. Also confirm that corrupted JSON or denied storage never prevents the page from opening.

Wrap-up

Frontend work does not end at drawing one screen. Connecting the moment a reader leaves with the moment they return is interface design too. Revisit the pattern in the content continuity UX note.