The brief#
A reader has five minutes before an interview. They need to find an experience article, save it, and return to it later. Build the mobile reader that makes those steps predictable even when a request fails.
Account boundary#
Implement registration, login, a simulated token, protected account routes and logout. Keep account identity in Vuex. Logging out must clear user-specific state. Use fixture accounts; no real credentials.
Article experience#
Provide recommended and latest feeds, article detail routes, likes and collections. Infinite scrolling must stop at the end, avoid duplicate IDs and offer retry on failure. The personal area lists liked and collected articles and shows the user profile.
Mobile interface#
Use Vant 2 controls and Less. Start from a 375px mobile design baseline, then adapt with relative units and fluid widths; 375px is not a fixed canvas. Verify 390×844 and 1920×1080. A keyboard user must reach, activate and understand every control.
What you submit#
Submit the deployed URL and repository URL through the course submission record described in Policies. Tag the submitted source submission-a1 and include a lockfile. Your README must give installation, development, build and verification commands, the fixture accounts, and a short acceptance walkthrough. Include screenshots at both review sizes and an attribution / assistance record.
Explain why one state value stayed local and another moved into Vuex. Include a trace from one user event through action, request, mutation and rendered result.
How quality is judged#
A passing implementation makes the named journeys possible. A strong implementation also recovers from cancellation, delay and failure without contradictory state. The highest band makes the ownership and tradeoffs easy for another developer to inspect and change; more screens do not compensate for a broken core journey. Each criterion below is assessed against that distinction.
Before you hand over#
Open an article URL directly; save it; switch routes; log out; sign in as a different fixture account. Then fail the next feed request and retry. No stale collection, duplicate row or false success should remain.
Use the fixture contract and tool versions and read the course policies for individual work, assistance, extensions and feedback. No backend implementation is assessed.