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, then verify the array and every field before use.

Choose recovery by data value. Disposable continue-reading history can isolate an invalid value as empty so navigation remains available. If browser storage is the only copy of user-created learning data, never replace corruption with an empty value and then save over it. Preserve the raw value, fail closed on writes, and offer an explicit recovery action such as export or reset.

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. Optional history must not prevent the page from opening when JSON is corrupt or storage is denied. For the only copy of user data, also prove that a new write fails and leaves the original raw value unchanged.

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.