Proactive error handling for React and vanilla JS frontends — every data-fetching component gets loading, error, and empty states, error boundaries, fetch error handling, form validation, optimistic rollback
90
84%
Does it follow best practices?
Impact
100%
1.38xAverage score across 5 eval scenarios
Passed
No known issues
Build an order history page in React with TypeScript. The page fetches the authenticated user's orders from /api/orders and displays them in a list. Each order shows the order number, date, total amount, status, and a list of items.
Users can click on an order to expand it and see the full item details. There is a "Reorder" button on each past order that sends a POST to /api/orders to create a new order with the same items.
Produce TypeScript/TSX files in a src/ directory:
src/api.ts -- API client for making requestssrc/types.ts -- TypeScript type definitionssrc/components/OrderHistory.tsx -- the main order history pagesrc/components/OrderCard.tsx -- individual order card with expand/collapsesrc/App.tsx -- app rootDo not include test files or build configuration.
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
skills
frontend-error-handling
verifiers