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-3/

Settings Form

Build a user settings page in React with TypeScript. The page loads the user's current settings from GET /api/settings and displays them in an editable form. The form includes fields for display name, email, notification preferences (checkboxes for email notifications and push notifications), and timezone (dropdown).

When the user clicks "Save Changes", the form submits the updated settings via PATCH /api/settings.

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/SettingsForm.tsx -- the main settings form component
  • src/App.tsx -- app root that renders the settings page

Do not include test files or build configuration.

evals

tile.json