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
-
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.
-
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.
-
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.
-
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.