The Scenario
The database is live, and the API is solid. Now you need to build the librarian dashboard. The librarians are fast typists, and they expect the UI to update instantly when they add or delete a book, even if the database is on a slow connection.
The Brief
Build the React frontend to consume the API. You must implement a data-fetching library (like React Query or SWR) or use Next.js Server Actions. Build the UI to List, Add, and Delete books. Crucially, you must implement Optimistic UI Updates so the interface feels instantaneous, and gracefully roll back the UI if the API request fails.
Deliverables
- The React component(s) rendering the list and the add/delete buttons
- The data-fetching and mutation logic (e.g., the `useMutation` hook)
- The specific code handling the Optimistic Update and the error rollback
Submission Guidance
This task brings the whole stack together. The focus is on the "seam" between the frontend and the backend. How do you handle loading states, success toasts, and network failures?
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.