Katkat
Back

Design a client-side comment system

BobyardSoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenSystem Design

Last updated

This question evaluates front-end engineering competencies including client-side data modeling, state management, UI behavior for nested comment trees, sorting/filtering semantics, and persistence using localStorage.

Scenario

You are asked to build a client-side comment system (no backend required). The focus is on data modeling, UI behavior, and persistence.

Requirements

  1. Create and display comments
  • A user can add a new top-level comment with: id, author (optional), text, createdAt.
  • Render a list of comments.
  1. Filter and sort comments
  • Provide a way to sort comments (e.g., Newest first / Oldest first).
  • Provide a way to filter comments (e.g., by keyword in text, or show only comments from a given author).
  • Sorting/filtering should apply to the rendered list.
  1. Nested comments (replies)
  • Each comment can have replies (nested comments), forming a tree.
  • Users can reply to any comment.
  • Nested comments should also respect the current sort/filter behavior (define your rules).
  1. Persistence with localStorage
  • Persist the comment data so a page refresh restores the comments.
  • Also persist the user’s current sort choice (and filter choice if applicable).

Constraints / clarifications

  • Assume a single browser tab (no multi-user concurrency).
  • You may choose any UI approach (vanilla JS, React, etc.), but your design should be framework-agnostic.
  • Explain how you would structure the state, how you would store it in localStorage, and how you would handle updates efficiently.

Deliverables (in interview)

  • Data model (types / JSON structure)
  • Key functions/APIs (add comment, reply, set sort/filter, load/save)
  • Explanation of rendering strategy for nested comments
  • Edge cases and tradeoffs