Project Detail View Page (Full Lifecycle — View + Submit + Judge + Moderate)

Start with the proposed /projects/[id]/page.tsx entry point and the listed components: Header.tsx, Overview.tsx, Team.tsx, Submission.tsx, ScorePanel.tsx, ModerationPanel.tsx, and Timeline.tsx. Trace the existing project APIs and permission handling before planning the lifecycle, scoring, moderation, loading, error, and timeline behavior; done means the stated role-based workflows and test cases are implemented.

🧠 What are we building?

A complete Project Detail Page that is not just for viewing, but for:

• 📦 Submission (Participant)
• ⭐ Scoring (Judge)
• 🛡️ Moderation (Organizer/Admin)
• 📊 Evaluation tracking

👉 This is the core execution layer of hackathons/events

---

🎯 Goal

Build a fully functional, role-aware Project Page that:

• shows complete project data
• supports submission flow
• supports judging & scoring
• supports moderation
• handles real-world workflows

---

🧠 Core Concept

Project Page = View + Actions + Evaluation + Moderation

---

🏗️ Route

/projects/:projectId

---

📦 Page Layout

Header (Title + Status + Actions)
---------------------------------
Project Overview
---------------------------------
Team Info
---------------------------------
Submission Details
---------------------------------
Attachments / Links
---------------------------------
Scoring & Feedback (Judge)
---------------------------------
Moderation Panel (Organizer/Admin)
---------------------------------
Activity / Timeline

---

🔹 1. Header

Show:

• Project Title

• Status Badge:

  • Draft
  • Submitted
  • Under Review
  • Approved
  • Rejected

• Event Name + Type

• Action Buttons (role-based)

---

🔹 2. Project Overview

• Description
• Tech Stack (skills)
• GitHub Repo
• Live Demo URL

---

🔹 3. Team Section

• Team Name / Solo
• Members list

---

🔹 4. Submission Details

• Submission Status
• Submitted At
• Last Updated
• Version (draft vs final)

---

🔹 5. Attachments

• Screenshots
• Docs
• Links

---

⭐ 6. Scoring System (CRITICAL)

---

Only for Judges

---

Scoring UI

Fields:

Innovation (0–10)
Technical Complexity (0–10)
Design / UX (0–10)
Impact (0–10)

---

Total Score

Auto calculated

---

Feedback

• text area for judge comments

---

Submit Score

• button → submit score

---

API

POST /api/v1/projects/:id/score

---

Data Model (Example)

Score {
  projectId
  judgeId

  innovation
  technical
  design
  impact

  totalScore

  feedback

  submittedAt
}

---

Rules

• judge can score only assigned projects
• score editable until deadline
• multiple judges → average score

---

🧑‍💻 7. Participant Actions

---

• Edit Project (only draft)
• Delete Project (only draft)
• Submit Project

---

Submit Flow

Click Submit
 ↓
Validation check
 ↓
Status → submitted
 ↓
Lock editing

---

API

POST /api/v1/projects/:id/submit

---

🏢 8. Organizer Moderation Panel

---

Actions

• View all submissions
• Approve / Reject project
• Delete inappropriate project

---

API

POST /api/v1/projects/:id/approve
POST /api/v1/projects/:id/reject
DELETE /api/v1/projects/:id

---

🛡️ 9. Admin Controls

---

• Delete project
• Suspend project
• Ban user

---

📊 10. Score Aggregation

---

Show:

• average score
• number of judges
• ranking (optional)

---

avgScore = totalScore / numberOfJudges

---

📜 11. Activity Timeline

---

Show events:

• project created
• edited
• submitted
• scored
• approved/rejected

---

---

⚙️ API (FULL)

---

Get Project

GET /api/v1/projects/:id

---

Submit Project

POST /api/v1/projects/:id/submit

---

Score Project

POST /api/v1/projects/:id/score

---

Moderate

POST /api/v1/projects/:id/approve
POST /api/v1/projects/:id/reject
DELETE /api/v1/projects/:id

---

🔐 Permissions (VERY IMPORTANT)

---

Participant → own project only
Organizer → community projects
Judge → assigned projects
Admin → full access

---

🧩 States

---

Loading

• skeleton

Error

• retry

Not Found

• project not found

Unauthorized

• access denied

---

🛡️ Edge Cases

---

• scoring after deadline
• duplicate scoring
• editing after submission
• unauthorized judge access
• project deleted mid-view

---

🎨 UI Requirements

---

• clean sections
• clear scoring inputs
• responsive layout
• action buttons visible by role
• status badges

---

🧪 Test Cases

---

• participant submit works
• judge scoring works
• multiple judges handled
• organizer moderation works
• admin actions work
• permissions enforced
• timeline updates

---

📂 File Structure

/projects/[id]
  ├── page.tsx
  ├── components/
  │    ├── Header.tsx
  │    ├── Overview.tsx
  │    ├── Team.tsx
  │    ├── Submission.tsx
  │    ├── ScorePanel.tsx
  │    ├── ModerationPanel.tsx
  │    └── Timeline.tsx

---

🚀 Future Enhancements

---

• live scoring updates
• judge discussion panel
• AI scoring assistance
• leaderboard

---

✅ Done When

---

• full project lifecycle handled
• scoring system works
• moderation works
• permissions enforced
• UI responsive

---

🎯 Priority

🔥 CRITICAL — Core evaluation system

---

🏁 Final Note

This page is the heart of your platform.

This is where projects are built, judged, and validated.

👉 Build it like a real hackathon system, not just a detail page.