Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
#19 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

@DevAbhay07 がすでに取り組んでいます。

2026年4月21日 から。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
35/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
typescript

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
TypeScript
スター
7
フォーク
17
PR マージ指標
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

NexGenStudioDev/CommDesk のほかの issue

NexGenStudioDev/CommDesk の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。