Learning Planner

A polished, local-first React application for turning learning goals into focused, trackable tasks. The project was created as a practical engineering competency artifact: it combines product planning, typed implementation, persistence, responsive design, cross-browser automation, and a traceable evidence pack.

What it demonstrates

• Goal and task CRUD with confirmation, search, filtering and sorting.
• Derived progress and dashboard statistics without duplicated state.
• Versioned localStorage behind a validated storage adapter.
• Validated JSON backup/import, corruption recovery and sample-data reset.
• Semantic navigation, form labels, visible focus and reduced-motion support.
• Deliberate layouts for 1920×1080, 1680×1050, 1920×1200 and a narrow robustness viewport.
• Vitest/Testing Library and Playwright checks in Chromium and Firefox.

Run locally

Requirements: Node.js 22+ and npm 10+.

npm install
npm run dev

The application has no server-side services and sends no planner data over the network.

Quality commands

npm run check             # lint, 9 unit/component tests, type-check and build
npm run test:e2e          # Chromium, Firefox, required viewports and narrow viewport
npm run evidence:capture  # regenerate non-sensitive evidence screenshots
npm run preview           # serve the production build

Playwright browser binaries can be installed with npx playwright install chromium firefox.

Project and evidence records

• Project overview
• Backlog and dependency register
• Roadmap and critical path
• Test strategy
• Manual test checklist
• Executed test log
• Decision log
• Current status checkpoint
• Evidence index

Data format

Backups contain AppStateV1 with version: 1, goals, and tasks. Import rejects unsupported versions, malformed records, invalid priorities/statuses, negative estimates, and tasks whose goal does not exist. The storage adapter is isolated in src/storage.ts so future migrations can be added without coupling them to the UI.

Browser support

The automated baseline is current Chromium and Firefox. Microsoft Edge uses the Chromium engine, but the formal Edge evidence must still be run manually on the intended Windows device using the checklist in this repository. Standards-based Grid/Flexbox, feature detection for crypto.randomUUID, system fonts and progressive enhancement reduce compatibility risk.

Repository remote

The intended origin is:

ssh://git@git.zainezq.com:222/zaine/learning-planner.git