Design a Full‑Stack Web Application (Frontend Emphasis)

Context

You are given a 2–3 page requirements document and a short demo (screenshots + an animation) of a multi‑page web app where authenticated users can:

• Sign in/out.
• Browse a paginated, filterable list of items (e.g., projects/tasks) and view details.
• Create/edit items via a form with validation.
• See basic activity updates (e.g., status changes) reflected promptly.

Assume web is the primary platform. SEO is nice‑to‑have for public pages; auth‑gated pages prioritize perceived performance and accessibility.

Task

Outline the design with emphasis on the frontend:

1. Frontend architecture: framework choice, routing, component decomposition, state management, data fetching strategy (client/server/rendering model), error/loading states, accessibility, performance (code‑splitting, memoization, virtualization), and testing.
2. API contract: define REST or GraphQL endpoints, request/response schemas, pagination, auth/session, and rate limiting; specify how the UI maps to these contracts.
3. Backend design: service boundaries, data model and storage, caching, background jobs, idempotency, observability, and scalability.
4. Deployment: CI/CD, environment config, canary/rollback.
5. Process: how you validate behavior against the demo, prioritize scope under time pressure, and collaborate on ambiguous requirements. Provide one critical user flow and describe the end‑to‑end sequence of UI actions and API calls.