Phase 3 / 90 days

Make comments feel like a real conversation system.

Replace flat comments with threaded replies, comment voting, collapsed branches, and deleted states.

Teach tree-shaped data through comments.

Comments are where a simple CRUD app becomes a real data-modeling lesson. The learner should see why nesting, sorting, and deleted states create tradeoffs.

  • Threaded replies with parent comment IDs.
  • Comment voting and score display.
  • Collapse and expand branches in the UI.
  • Deleted comments that preserve thread shape.
  • Trees and recursion.
  • Recursive rendering in React.
  • Recursive SQL queries or materialized paths.
  • Pagination tradeoffs for large comment threads.

Expansion prompt

Add threaded comments to the existing post detail page.
Teach me the tradeoffs between parent_id recursion and materialized paths.
Start with the simplest version that works for low traffic.
Do not add caching or real-time updates yet.
  • Users can reply to comments.
  • Nested comments render clearly on mobile and desktop.
  • Deleted comments do not break the thread.
  • The learner can explain how a tree differs from a flat list.