Feature: Project Lifecycle Management Detail Page

[vivek0369]

Overview

Implement a fully functional, role-aware Project Detail Page that serves as the central execution and evaluation layer for projects. The page should support the complete project lifecycle including viewing, submission, judging, moderation, and activity tracking with a modern glassmorphism dark-mode UI.

---

✨ Features to Implement

1. Routing Setup

Add a protected route:

/projects/:projectId

under the /org layout in App.tsx.

Example:

/org/projects/proj-123

---

2. Mock API Service

Create:

src/features/ProjectDetail/services/mockProjectApi.ts

The service should simulate backend APIs with artificial delays and mock data storage.

Required APIs

• getProject(projectId)

  • Fetch full project details and nested relationships.

• submitProject(projectId)

  • Transition project state from Draft → Submitted.

• scoreProject(projectId, scoreData)

  • Allow judges to evaluate projects.
  • Automatically calculate total score.

• moderateProject(projectId, action)

  • Approve or reject project submissions.

• deleteProject(projectId)

  • Remove project from the mock store.

---

🎭 Role-Based UI Behavior

👨‍💻 Participant View

• Can edit project while in Draft state.
• Can submit project.
• View current project status.

⚖️ Judge View

Display a dedicated Judge Scoring Panel:

• Innovation score
• Technical Complexity score
• Design/UX score
• Impact score
• Auto-calculated score out of 40
• Feedback textarea
• Smooth glassmorphism UI with sliders

🛡️ Organizer/Admin View

Display Moderation Panel:

• Approve Project
• Reject Project
• Delete Project

---

📌 Core UI Sections

🔹 Header Panel

• Dynamic project status badges:

  • Draft
  • Submitted
  • Under Review
  • Approved
  • Rejected

🔹 Project Overview

• Description
• Tech stack tags
• Repository link
• Demo link

🔹 Team Section

• Team member avatars
• Names and roles

🔹 Activity Timeline

Vertical timeline showing:

• Project creation
• Submission events
• Judge scoring
• Moderation actions
• Actor name + timestamp

---

🎨 UI/UX Requirements

• Rich aesthetics
• Dark mode glassmorphism design
• Smooth transitions and hover effects
• Responsive layout
• Modern dashboard-style interface

---

✅ Validation & Edge Cases

• Disable buttons during API requests
• Prevent invalid actions based on role/state
• Loading spinner while fetching data
• Proper empty/error states
• Invalid projectId handling

---

🧪 Testing Instructions

Run:

npm run dev

Visit:

/org/projects/proj-123

Use the temporary role switcher to test:

• Participant
• Judge
• Organizer
• Admin

Verify:

• Role-aware rendering
• State transitions
• Scoring logic
• Moderation workflow
• Activity updates

---

📂 Suggested Structure

src/features/ProjectDetail/
│
├── components/
├── pages/
├── services/
├── hooks/
├── types/
└── utils/

---

🏷️ Suggested Labels

• enhancement
• frontend
• ui/ux
• role-based-access
• dashboard
• hacktoberfest
• nsoc26

---

🎯 Expected Outcome

A production-style project lifecycle management page with:

• Role-aware permissions
• Interactive judging system
• Moderation workflow
• Timeline tracking
• Modern responsive UI
• Fully simulated API behavior

---

🏷️Labels

NSoC26 Frontend Feature enhancement

---

🔗 Related Issues

Closes #20

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive Task Management system and a detailed Project View feature, including RBAC via a PermissionProvider, new routing, and various UI components. Feedback focused on performance optimizations, such as memoizing sorted lists and reducing redundant array filtering. Additionally, logic improvements were suggested for the scoring system, and UI consistency was addressed by recommending custom modals instead of native browser alerts.

[abhishek-nexgen-dev]

@vivek0369 please check the master branch one please sync the project so that you got the latest code once you got the latest code merge it with your branch and push your changes again