Design a client-side comment system
Company: Bobyard
Role: Software Engineer
Category: System Design
Difficulty: medium
Interview Round: Technical Screen
## 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.
2. **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.
3. **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).
4. **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
Quick Answer: 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.