Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Project View Page (Participant + Organizer + Judge + Admin — Permission-Based)

Open
  • Is something wrong?
#19 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
authorization, backend, frontend

Research direction

Start with /projects/index.tsx and the listed components: ProjectTable.tsx, Filters.tsx, ActionsMenu.tsx, DeleteModal.tsx, and ScoreModal.tsx. Review the GET, DELETE, and score API requirements and the role rules first. Done means one responsive project page supports the specified roles, states, actions, filters, pagination, and permission enforcement.

Written by the indexing model from the issue text.

Description

enhancement good first issue NSoC'26

🧠 What are we building?

We are building a Project View Page where users can see and manage projects.

This page is used by:

  • 🧑‍💻 Participants → see their own projects
  • 🏢 Organizers → see all projects in their community/events
  • ⚖️ Judges → see assigned projects
  • 🛡️ Admins → see everything

👉 It is ONE page, but behavior changes based on role.

🎯 Goal

Create a clean, responsive page that:

  • shows a list of projects
  • supports actions (view, edit, delete, score)
  • changes UI based on permissions
  • works for events, hackathons, workshops

🧠 Key Idea (IMPORTANT)

Same Page → Different Role → Different Actions

🏗️ Where will this page be used?

/participant/projects
/organizer/projects
/community/:id/projects
/event/:id/projects
/judge/projects
/admin/projects

👉 Use one reusable component, not separate pages.

📦 Page Layout

Sidebar
Header (title + actions)
-------------------------
Search + Filters
-------------------------
Project Table
-------------------------
Pagination / Empty State

🔹 Sidebar

Use existing sidebar.

Highlight Projects tab.

🔹 Header

Show:

  • Page title:

    • "My Projects" (participant)
    • "Community Projects" (organizer)
    • "Assigned Projects" (judge)

  • Button:

    • ➕ Create Project (only for participant)

🔍 Filters & Search

Search

  • search by project name

Filters

  • Status:

    • Draft
    • Submitted
    • Approved

  • Type:

    • Hackathon
    • Event
    • Workshop

Sort

  • Latest (default)
  • Oldest
  • A → Z

📊 Project Table

Common Columns (for all)

  • Project Name
  • Event Name
  • Type
  • Status
  • Last Updated

Extra Columns (based on role)

🧑‍💻 Participant

  • Actions:

    • View
    • Edit (only draft)
    • Delete
🏢 Organizer

  • Extra:

    • Owner Name

  • Actions:

    • View
    • Delete
⚖️ Judge

  • Extra:

    • Score

  • Actions:

    • View
    • Score
🛡️ Admin

  • Actions:

    • View
    • Delete
    • Suspend

⚡ Actions (What user can do)

👁️ View

  • open project details page

✏️ Edit

  • only participant
  • only draft projects

🗑️ Delete

  • show confirmation modal
  • call delete API

⭐ Score (Judge)

  • open modal
  • submit score

⚙️ API

Get Projects

GET /api/v1/projects
Query Example
?communityId=123
&eventId=456
&status=submitted
&page=1

Delete Project

DELETE /api/v1/projects/:id

Score Project

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

🔐 Permissions (VERY IMPORTANT)

Backend must enforce:

  • Participant → only own projects
  • Organizer → only their community
  • Judge → only assigned
  • Admin → all

👉 Do NOT trust frontend role

🧩 States to Handle

Loading

  • show skeleton table

Empty

No projects yet
[ Create Project ]

No Results

No matching projects

Error

  • show message + retry

🛡️ Edge Cases

  • no projects
  • only drafts
  • delete last project
  • API fails
  • unauthorized delete

🎨 UI Requirements

  • responsive (mobile + desktop)
  • clean table layout
  • status badges (color)
  • action menu (3 dots)
  • proper spacing

🧪 What to test

  • participant sees only own projects
  • organizer sees community projects
  • judge sees assigned projects
  • admin sees all projects
  • edit only works for drafts
  • delete works with confirmation
  • filters work
  • search works
  • pagination works

📂 Suggested File Structure

/projects
  ├── index.tsx
  ├── components/
  │    ├── ProjectTable.tsx
  │    ├── Filters.tsx
  │    ├── ActionsMenu.tsx
  │    ├── DeleteModal.tsx
  │    └── ScoreModal.tsx

🚀 Future Improvements (Optional)

  • bulk delete
  • real-time updates
  • analytics
  • project tags

✅ Done When

  • page works for all roles
  • permissions correctly applied
  • UI responsive
  • API integrated
  • no crashes / edge cases handled

🎯 Priority

🔥 High (Core feature)

🏁 Final Note

This page is used everywhere in CommDesk.

👉 Keep it:

  • simple
  • clean
  • permission-driven

👉 Focus on:

Correct data + correct permissions > fancy UI
Dominant language
TypeScript
Stars
7
Forks
17
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from NexGenStudioDev/CommDesk

All issues in NexGenStudioDev/CommDesk

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.