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

🚀 Member Event-Based Task System (Permission-Controlled)

Open
  • Is something wrong?
#24 5 comments 0 reactions 1 assignee View on GitHub

@vivek0028 is already working on this.

Since May 6, 2026.

Assessment

This issue has not been assessed yet.

Description

level3 NSoC'26

This project is a production-grade Member Task System where members operate with organizer-level capabilities, controlled via a permission-based system.

✨ Features
  • Event-based task management
  • Permission-driven UI & actions
  • Full task lifecycle:
Create → Assign → Submit → Review → Update
  • Shared UI across roles (Organizer & Member)

🧠 Core Philosophy

Same UI for everyone → Different capabilities via permissions

  • ❌ No restricted/limited UI for members
  • ✅ One powerful system controlled via permissions

🧠 Architecture

Sidebar → Event → Tasks → Submissions → Review → Progress

🔐 Permission System

Default Permissions (All Members)
  • View assigned tasks
  • View task details
  • Submit work
  • Comment
Advanced Permissions (Organizer-Controlled)
Permission Description
CREATE_TASK Create new tasks
ASSIGN_TASK Assign tasks to others
UPDATE_STATUS Update task status
EDIT_TASK Edit tasks
DELETE_TASK Delete tasks
MULTIPLE_SUBMISSION Allow multiple submissions
LATE_SUBMISSION Allow late submissions
VIEW_ALL_TASKS View all event tasks

🧭 Feature Flow

  1. Select Event
  2. View tasks (assigned OR all based on permission)
  3. Create task (if allowed)
  4. Assign task (if allowed)
  5. Submit work
  6. Review tasks (if allowed)
  7. Edit / delete tasks (if allowed)

🧱 Layout Structure


<MainLayout>
  <SideBar />
  <Content />
</MainLayout>

📂 Sidebar

Default Routes

SideBar.tsx

/member/dashboard

/member/tasks
Permission-Based Rendering
if (permissions.includes("CREATE_TASK")) {
  show("Create Task");
}

if (permissions.includes("VIEW_ALL_TASKS")) {
  show("All Tasks");
}

Requirements

  • Active route highlighting

  • Responsive (mobile drawer)

  • Collapsible

  • Permission-aware UI

📄 Pages & Features

📋 Task List Page

Route: /member/tasks

Behavior
if (permissions.includes("VIEW_ALL_TASKS")) {

fetchAllTasks();

} else {

fetchAssignedTasks();

}
Filters

  • Status (Todo / In Progress / Completed)

  • Time (Upcoming / Past)

  • Priority

  • Member (if allowed)

  • Search (debounced)

Actions

Action Permission
View Default
Edit EDIT_TASK
Delete DELETE_TASK
🔍 Task Detail Page

Route: /member/tasks/:taskId

Submission Rules
if (!permissions.includes("MULTIPLE_SUBMISSION")) {
  restrictSingleSubmission();
}

if (deadlinePassed && !permissions.includes("LATE_SUBMISSION")) {

disableSubmission();

}
Sections

  • Task Info

  • Submission Panel

  • Submission History

  • Status Update (if allowed)

  • Comments

  • Review Panel (if allowed)

➕ Create Task

Route: /member/tasks/create

if (!permissions.includes("CREATE_TASK")) {

redirect("/member/tasks");

}
✏️ Edit Task
if (!permissions.includes("EDIT_TASK")) {

blockAccess();

}
🗑️ Delete Task
if (!permissions.includes("DELETE_TASK")) {

blockAction();

}

🧱 Component Structure

components/

layout/

SideBar.tsx

MainLayout.tsx


event/

EventDropdown.jsx


task/

TaskTable.jsx

TaskDetail.jsx

TaskForm.jsx

SubmissionForm.jsx

CommentSection.jsx


common/

StatusBadge.jsx

PriorityBadge.jsx

ConfirmModal.jsx

SkeletonLoader.jsx

🔄 State Management

Library: React Query (TanStack Query)

State

  • selectedEventId

  • tasks

  • taskDetails

  • submissions

  • permissions

🌐 API

GET /api/tasks?eventId=&assignedTo=me

POST /api/tasks

PATCH /api/tasks/:id

DELETE /api/tasks/:id


POST /api/tasks/:id/submissions

POST /api/tasks/:id/comments

🎨 UI/UX Guidelines

  • Same UI as organizer

  • Only actions differ

  • Hide restricted features

  • Highlight urgent tasks

⚠️ Edge Cases

  • No event selected

  • No tasks available

  • Deadline passed

  • Permission changes dynamically

  • Direct URL access without permission

⚡ Performance

  • Cache tasks per event

  • Debounced search

  • Lazy loading

🔐 Security

  • Validate permissions on frontend

  • Backend must enforce RBAC

🧪 Testing Checklist

Permissions

  • Actions visible only if allowed

  • Create/Edit/Delete protected

Functional

  • Task CRUD works

  • Submission flow works

  • Filters work

UI

  • Responsive design

  • Loading states

  • Error handling

🚀 Implementation Plan

  • Phase 1: Layout + Sidebar

  • Phase 2: Task List + Filters

  • Phase 3: Task Detail + Submission

  • Phase 4: Permission System

  • Phase 5: Create/Edit/Delete

  • Phase 6: Final Polish

✅ Acceptance Criteria

  • Shared UI across roles

  • Permissions fully enforced

  • No unauthorized access

  • Clean, responsive UX

🏁 Final Note

This is a role-flexible system design:

  • Organizer → Full control

  • Member → Controlled power

Both operate on the same UI, enabling scalability and consistency.



If this still breaks when you paste somewhere, tell me where (VS Code, GitHub, Notion, etc.)—the fix depends on the tool.

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.