A Reddit-style hierarchical (threaded) comment system. This project is built with Next.js and features a complex reply system and interactive UI elements.
- Hierarchical Threads: Display comments in a nested hierarchy similar to Reddit.
- Hover Effect: Highlighting of left thread lines when hovering over a comment.
- Collapse/Expand: Ability to toggle visibility of comment threads.
- Reply System: Integration for writing replies to any comment.
- Dummy Data: Pre-configured with fake data for testing and demonstration.
- Responsive Design: Optimized for both mobile and desktop devices.
- Framework: Next.js 15+ (App Router)
- UI: Tailwind CSS
- Icons: Lucide React
- Language: TypeScript
From the project root:
npm install
npm run devOpen http://localhost:3000 in your browser.
- src/app/page.tsx - Main page entry point.
- src/shared/components/CommentsSection.tsx - Container for threaded comments.
- src/shared/components/CommentItem.tsx - Individual recursive comment component.
- src/shared/fake/comments.ts - Sample dummy comment data.
- src/shared/types/comment.ts - TypeScript definitions for comments.
- Import the repository to Vercel.
- Set Root Directory to
threadedcomments(if applicable). - Build Command:
npm run build - Output: default (Next.js)
- Click the vertical line next to a comment author to collapse or expand a thread.
- Clicking the "Reply" button opens a form to add a new response.
- The hover effect is scoped: parent thread lines highlight when hovering the parent comment or its direct reply blocks, but hovering inside a nested reply-of-reply does not highlight the topmost parent lines (Reddit-like behavior).