PracHub
QuestionsLearningGuidesInterview Prep
|Home/Software Engineering Fundamentals/TikTok

Implement list, form, and API rendering with pitfalls

Last updated: Jul 4, 2026

Quick Overview

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.

  • medium
  • TikTok
  • Software Engineering Fundamentals
  • Software Engineer

Implement list, form, and API rendering with pitfalls

Company: TikTok

Role: Software Engineer

Category: Software Engineering Fundamentals

Difficulty: medium

Interview Round: Take-home Project

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.

Quick Answer: 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.

Related Interview Questions

  • Design automated regression tests for an API - TikTok (easy)
  • Plan QA testing for a new feature - TikTok (easy)
  • Explain how Kafka works - TikTok (medium)
  • Answer core Python, CS, DB, and testing questions - TikTok (medium)
  • Explain Transformer, GPT vs BERT, and PR metrics - TikTok (medium)
|Home/Software Engineering Fundamentals/TikTok

Implement list, form, and API rendering with pitfalls

TikTok logo
TikTok
Aug 12, 2025, 12:00 AM
mediumSoftware EngineerTake-home ProjectSoftware Engineering Fundamentals
6
0

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.
  1. 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.
  1. 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.
  1. 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.
Loading comments...

Browse More Questions

More Software Engineering Fundamentals•More TikTok•More Software Engineer•TikTok Software Engineer•TikTok Software Engineering Fundamentals•Software Engineer Software Engineering Fundamentals

Write your answer

Your first approved answer each day earns 20 XP.

Sign in to write your answer.
PracHub

Master your tech interviews with 9,000+ real questions from top companies.

Product

  • Questions
  • Learning Tracks
  • Interview Guides
  • Resources
  • Premium
  • For Universities

Browse

  • By Company
  • By Role
  • By Category
  • Topic Hubs
  • SQL Questions
  • AI Coding Questions
  • Compare Platforms
  • Discord Community

Support

  • support@prachub.com
  • (916) 541-4762

Legal

  • Privacy Policy
  • Terms of Service
  • About Us

© 2026 PracHub. All rights reserved.