Take-home: Build a Small Frontend App (List + Form + API + A11y)

Goal

Implement a simple web app that demonstrates core frontend skills: rendering from local state, submitting a form, fetching from an API with robust states, accessibility, and predictable, idempotent behavior.

Requirements

1. List View (from in-memory data)

• Render a list of items from an in-memory array.
• Use CSS class names with double underscores (BEM-like), e.g., list__item . A single underscore must not pass tests.

2. Submission Form

• Provide a form to create a new list item.
• On submission failure (e.g., simulated 400):
  • Do not clear form fields or lose user input.
  • Show a validation/error message.
• On success:
  • Append the item to the list.
  • Clear the form.

3. Fetch From Backend API

• Fetch list data from an API endpoint and render loading, success, and error states.
• Avoid duplicate entries when reconciling server data with items that were added locally.

4. Quality Bar

• Accessibility: associate labels with inputs, use correct button types, and announce async status/errors.
• Idempotent updates: no duplicate items from repeats (e.g., double-submit, re-fetch, retries).
• Predictable re-renders: stable keys, minimal/normalized state.
• Include an explanation of event handling, state management, error handling, how you would structure files/components, and how you would test these behaviors.

Assumptions (clarified for you)

• You may use any modern frontend approach (vanilla JS or a framework like React/Vue). Provide enough code or pseudocode for reviewers to run or understand.
• Assume a JSON API like:
  • GET /api/items → [ { id, text } ]
  • POST /api/items with { text, clientId?, idempotencyKey? } → { id, text, clientId? }
• You may simulate API responses.