Design a comment system (nested comments) | Frontend System Design

Problem

Design a comment system supporting nested replies, pagination, voting, and live updates (think Reddit/Disqus).

Discussion areas

• Data model: Comment { id, parentId, author, text, votes, createdAt, childCount }; store normalized by id; build the tree from parentId.
• Loading: top-level comments are paginated; replies load on demand ("view N more replies") to avoid huge payloads; limit visual nesting depth (collapse deeper threads).
• Rendering: recursive Comment component; virtualize long top-level lists.
• Mutations: optimistic add/edit/delete and vote; reconcile with server response; handle failures/rollback.
• Real-time: subscribe to new replies via WebSocket/SSE; merge into the normalized store.
• Sorting: by top/new/controversial — derived from the store.
• Edge cases: deleted comments with existing children ("[deleted]"), deep nesting, spam/rate limiting.