What actually works here?
The prototype accepts your title, optional author and note, validates the title, rejects duplicate title-and-author pairs, changes reading status, filters the list, removes books, and exports and restores a backup. It starts empty on purpose: an empty state is part of the product.
There is no account, shared database, external book lookup, AI-generated recommendation, or payment. Notes are plain text. Saving is browser-local and may fail if storage is blocked or full; the interface tells you when changes are only in memory. Keep a backup. Use one tab for editing; this learning version does not merge simultaneous changes across tabs.
1. Frame the task before you build
Use this brief: “A busy reader wants to save a recommendation quickly and find it later.” Your first acceptance check is observable: enter a title, save it, reload, and find it again. Keep discovery feeds, social features, and cover-image search outside version one. Decide whether matching title-and-author pairs count as duplicates; that is a product rule, not just a code detail.
2. Design the states
Sketch an empty shelf, a populated shelf, a blank-title error, a filtered list with no matches, and a storage failure. Give the save action a clear label. Make author and note visibly optional. Choose a readable type scale and use text as well as color for reading status. Record one visual choice and why it supports the task.
3. Build a vertical slice
Ask for the smallest complete flow: input → validation → save → visible result. Test that before requesting more features. A framework is optional for this exercise; the downloadable reference is one HTML file containing its own CSS and JavaScript. Open it in an editor to inspect or change it.
TRY THIS BUILD BRIEF
Build a browser-local reading-list prototype for a busy reader. Required title, optional author and note. Start empty. Save a book, reject blank titles and duplicate title-and-author pairs, mark finished, filter, and remove. Use visible labels and keyboard-operable controls. Persist locally, show a clear warning when storage fails, and provide JSON export and validated restore with confirmation. Render user entries as text, never HTML. No accounts, external APIs, tracking, or paid services. Implement the add-and-reload flow first, explain how to run it, then wait for review before adding other features.
4. Run it and learn from the source
Download the reference into a new folder. If Python 3 is available, run python3 -m http.server 8000 there and open http://localhost:8000/reading-list-reference.html. Serve it over HTTP for predictable browser-storage behavior; opening an HTML file directly has browser-dependent storage behavior. Use the same address when returning to your work.
The HTML defines labels and controls. CSS sets layout and visual rules. JavaScript holds an array of book objects, updates it after an action, redraws the visible list, and attempts to save it. Find those responsibilities in the source before asking AI to change them. You may adapt this original reference for your own learning or projects; it is provided as a teaching example without a production-readiness guarantee.
5. Make something fail, then repair it
Submit spaces as a title. Add the same title and author twice with different capitalization. Choose “Finished” before any book is finished. Try restoring a file that is not a book backup. Each case should explain what happened without losing existing work. In your own copy, deliberately remove title validation, reproduce the bug, then ask the AI to explain the missing check and restore it.
Repeat the exact failing steps after a fix. Then try the adjacent case: a valid title, the same title by a different author, or a long note. Save a source checkpoint before broad changes so that recovery is possible.
6. Test, publish, and tell the story
Follow the task test script. Publish your copy with a static host, check the actual deployed address on a phone, and state that records remain in each visitor’s browser. A public link shares the application, not your personal list. Export before moving between addresses because local storage belongs to the site’s origin.
Finish the portfolio outline with your decisions and observed results. For a shared, multi-user product, read the release guide before adding accounts or collecting customer data.
A successful first version
You can demonstrate the task, explain where the data lives, recover from a mistake, and show one improvement based on observation. A polished screenshot alone does not establish those outcomes.
Technical reference: MDN: localStorage. Tool and API references checked October 6, 2026.