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

# 🧠 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

```txt
Project Page = View + Actions + Evaluation + Moderation
```

---

# 🏗️ Route

```txt
/projects/:projectId
```

---

# 📦 Page Layout

```txt
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:

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

---

## Total Score

```txt
Auto calculated
```

---

## Feedback

* text area for judge comments

---

## Submit Score

* button → submit score

---

## API

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

---

## Data Model (Example)

```ts
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

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

---

## API

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

---

# 🏢 8. Organizer Moderation Panel

---

## Actions

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

---

## API

```http
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)

---

```txt
avgScore = totalScore / numberOfJudges
```

---

# 📜 11. Activity Timeline

---

Show events:

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

---

---

# ⚙️ API (FULL)

---

## Get Project

```http
GET /api/v1/projects/:id
```

---

## Submit Project

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

---

## Score Project

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

---

## Moderate

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

---

# 🔐 Permissions (VERY IMPORTANT)

---

```txt
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

```txt
/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**.

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

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


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

Description

🧠 What are we building?

🎯 Goal

🧠 Core Concept

🏗️ Route

📦 Page Layout

🔹 1. Header

🔹 2. Project Overview

🔹 3. Team Section

🔹 4. Submission Details

🔹 5. Attachments

⭐ 6. Scoring System (CRITICAL)

Only for Judges

Scoring UI

Total Score

Feedback

Submit Score

API

Data Model (Example)

Rules

🧑‍💻 7. Participant Actions

Submit Flow

API

🏢 8. Organizer Moderation Panel

Actions

API

🛡️ 9. Admin Controls

📊 10. Score Aggregation

Show:

📜 11. Activity Timeline

⚙️ API (FULL)

Get Project

Submit Project

Score Project

Moderate

🔐 Permissions (VERY IMPORTANT)

🧩 States

Loading

Error

Not Found

Unauthorized

🛡️ Edge Cases

🎨 UI Requirements

🧪 Test Cases

📂 File Structure

🚀 Future Enhancements

✅ Done When

🎯 Priority

🏁 Final Note

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions