CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/react-patterns

React patterns — always apply error boundaries, loading states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization

87

1.83x
Quality

80%

Does it follow best practices?

Impact

99%

1.83x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-3/

Notification Feed

Build a notification feed component in React with TypeScript. The component polls a simulated API every 5 seconds to check for new notifications. Each notification has an id, message, timestamp, and read boolean.

The feed displays all notifications sorted by timestamp (newest first) and shows a count of unread notifications at the top. Users can mark individual notifications as read by clicking them.

Simulate the API by generating a random notification with Math.random() on each poll (50% chance of a new notification appearing).

Output

Produce TypeScript/TSX files in a src/ directory:

  • src/types.ts -- TypeScript type definitions
  • src/components/NotificationFeed.tsx -- the main feed component with polling and unread count
  • src/components/NotificationItem.tsx -- component for a single notification

Do not include test files or build configuration.

evals

tile.json