CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/frontend-error-handling

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

1.38x
Quality

84%

Does it follow best practices?

Impact

100%

1.38x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-1/

Order History Page

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.

Output

Produce TypeScript/TSX files in a src/ directory:

  • src/api.ts -- API client for making requests
  • src/types.ts -- TypeScript type definitions
  • src/components/OrderHistory.tsx -- the main order history page
  • src/components/OrderCard.tsx -- individual order card with expand/collapse
  • src/App.tsx -- app root

Do not include test files or build configuration.

evals

scenario-1

criteria.json

task.md

tile.json