Browser Reading Tracker

Project roadmap

1. 01

   Plan the data and screens

   ~1h

   Create the project with npm create vite@latest using the React template. Write README.md describing the data: a book (id, title, author, total pages, status reading or finished) and a session (id, book id, date, page reached). List the screens: the book list, a book's page with its sessions, and a weekly summary. Done when: the project runs with npm run dev, and README.md describes the data and screens.

2. 02

   Add books

   ~1.5h

   Build an Add book form and a list of books showing the title, author and progress. Validate the form: the title is required, and total pages must be a whole number between 1 and 10,000. Show errors next to the fields. Keep books in React state for now. Done when: valid books appear in the list, and invalid input shows an error.

3. 03

   Log reading sessions

   ~2h

   On a book's page, add a form to log a session: the date (default today, not in the future) and the page reached, which must be higher than the previous session's page and not more than the total. Calculate the pages read in each session from the difference. Show the sessions newest first and a progress bar. Mark the book finished when the last page is reached. Done when: logging sessions updates the progress bar, and invalid pages are refused.

4. 04

   Show weekly totals

   ~1.5h

   Build a summary showing the pages read in each of the last 8 weeks (weeks starting on Monday) across all books, as a simple bar chart made with divs, plus this week's total and the average per week. Write the calculation as a separate function that takes the sessions and returns the weekly totals. Done when: the weekly totals match the sessions you logged.

5. 05

   Save to localStorage

   ~1h

   Save books and sessions to localStorage whenever they change, and load them when the app starts. If the saved data is missing or broken, start empty instead of crashing. Add a button that deletes a book together with its sessions, after asking for confirmation. Done when: everything is still there after reloading the page.

6. 06

   Test the calculations

   ~1.5h

   Add Vitest and write tests for the pure functions: pages read per session, progress percentage, weekly totals (including sessions on a Sunday and Monday around a week boundary, and weeks with no reading), and session validation. Done when: npm test passes.

Resources

• DocsReact: quick start
• DocsReact: managing state
• DocsVite: getting started
• DocsMDN: Window.localStorage
• DocsVitest: getting started