Katkat
Back

Implement list, form, and API rendering with pitfalls

TikTokSoftware Engineer · Online Assessment
MediumSoftware EngineerOnline AssessmentSoftware Engineering Fundamentals

Last updated

This question evaluates front-end web development competencies including local-state list rendering, form submission and validation behavior, client API integration with loading/success/error states, accessibility practices, idempotent update handling, and predictable re-rendering.

Implement a simple web app that exercises core frontend skills:

  1. Implement a list view that renders items from an in-memory array. Use exact CSS class names with double underscores (e.g., list__item); a single underscore must not satisfy tests.
  2. Add a submission 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 message. On success, append to the list and clear the form.
  3. Fetch list data from a backend API endpoint and render it, handling loading, success, and error states; avoid duplicate entries when reconciling server data with locally added items.
  4. Ensure accessibility (labels tied to inputs, correct button types), idempotent updates, and predictable re-renders. Explain your event handling, state management, and error-handling strategies, plus how you would structure files/components and test these behaviors.