📄 Implement Project Detail Page #6

We need to implement the Project Detail Page, which displays full information about a project when selected from the feed.
This page will provide users with a deeper view of the project, including interactions such as liking, commenting, and reporting.

✅ Tasks

• Database & Data Access

  • Define Prisma query to fetch project details by ID (title, description, author, created date).
  • Include related data: likes count, comments, and whether the current user has liked or reported.

• UI Components

  • Create project detail layout (title, description, author info, created date).
  • Add interactive buttons: Like/Vote, Report, Comment input.
  • Show comments section (list with author and timestamp).
  • Display project metadata (e.g., total likes, total comments).
  • Handle empty comments state.

• Integration

  • Connect detail page to project ID route (/project/[id]).
  • Integrate interactive actions (like, comment, report) using server actions or mutations with Prisma.
  • Ensure updates reflect immediately (optimistic update or revalidation).

• Testing & Validation

  • Verify project data is correctly retrieved by ID.
  • Test interactions: like, comment, and report.
  • Ensure comment posting works and updates the list instantly.
  • Check responsiveness on desktop and mobile.

🔒 Acceptance Criteria

• Users can open a project detail page from the feed.
• The page shows full project information (title, description, author, created date).
• Users can like/vote, comment, and report from this page.
• The comments section displays all existing comments in chronological order.
• UI handles loading, empty, and error states gracefully.