CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/realtime-web-patterns

WebSocket vs SSE vs polling, reconnection with backoff and jitter, heartbeats, backpressure, message ordering, connection state UI, auth on upgrade, graceful degradation

94

1.87x
Quality

98%

Does it follow best practices?

Impact

90%

1.87x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-5/

Live Order Tracking

Problem Description

A food delivery app needs a live order tracking page. After a customer places an order, they see a page that shows the current status of their order in real time (placed, confirmed, preparing, out for delivery, delivered). The page also shows an estimated delivery time that updates as the order progresses.

Build a Node.js/Express backend and React/TypeScript frontend:

  • Backend has an endpoint to simulate advancing an order's status
  • When an order's status changes, the update is pushed to the customer viewing that order
  • Customer sees the current status, a progress indicator, and estimated delivery time
  • Only the customer watching a specific order should receive updates for that order
  • Orders have: id, customerName, status, estimatedDeliveryTime, items, createdAt

Output Specification

Produce the following in a src/ directory:

Server:

  • src/server.ts -- Express server with real-time order updates
  • src/orders.ts -- Order management and status transitions

Client:

  • src/components/OrderTracker.tsx -- The live order tracking view
  • src/hooks/useOrderTracking.ts -- Hook that manages the real-time connection for a specific order

Use in-memory storage. Do not include test files or build configuration.

evals

tile.json