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

Team Directory

Build a team directory page in React with TypeScript. The page fetches team members from /api/team and displays them in a searchable list. Each member card shows their name, role, department, and profile photo.

Users can search by name using a text input that filters the displayed results client-side. There is also an "Invite Member" button that opens a modal form with fields for name, email, and role, which submits via POST to /api/team/invite.

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/TeamDirectory.tsx -- the main directory page with search
  • src/components/MemberCard.tsx -- individual team member card
  • src/components/InviteModal.tsx -- modal form for inviting a new member
  • src/App.tsx -- app root

Do not include test files or build configuration.

evals

tile.json