Preamble
I require software to visually track and manage project tasks using a PERT-style chart.
The system will allow users to create, organize, and manage tasks in a flowchart-like format. Users will be able to group tasks, define dependencies, and adjust task details such as duration and tags. The long-term goal is to integrate this tool with external project management platforms, such as Jira, to allow seamless synchronization of tasks and dependencies across different systems. While tasks and dependencies can be displayed visually, there are no strict start or end dates governing the flow of tasks in the chart.
All task properties should be edited via a properties sidebar, which appears when adding or selecting a task.
NextJS 14 and react-flow is the preferred technology for this project.
Core Functionalities
When opening a new chart, the graph should display a start task, standard task, and end task (see diagram)
- Start Task: Special node represented by a circle
- End Task: Special node represented by a bold circle with a thicker outline
Users should be able to add tasks by right-clicking on an empty space in the chart and selecting "Add Task" from a context menu
- When a task is added, a properties sidebar should appear to allow task configuration
Clicking on an existing task should bring up the properties sidebar for editing the task details
Each task should have a name and an optional duration (e.g., 1hr, 2d, 1w)
Users should be able to add additional descriptive information to tasks via a free-text field, providing space for extra notes
Users should be able to delete tasks by right-clicking on the task and selecting "Delete" from a context menu
Tasks should support tags (e.g., "backend," "frontend"), displayed as tags/chips in the corner of each task in the diagram
Note that tasks are not restricted by start or end dates, allowing users to create and arrange tasks flexibly without enforcing a fixed timeline.
Task Grouping & Nested Groups
Users should be able to create groups by right-clicking and selecting "Create Group" from a context menu
Users should not be able to drag tasks in/out of groups. If a task is added within a group, it must stay at that group-level
Groups should support nested subgroups, and each group must contain at least a start task, a standard task, and an end task (same as top-level)
Users should be able to expand and collapse groups, allowing the display of detailed or summary views
Dependency Management
Group and Node Manipulation
Users should have the ability to resize groups by dragging the group edges, and these changes should be reflected in the underlying data structure
Nodes should be selectable and movable, allowing users to arrange tasks freely on the canvas
- The system should save the position and layout of tasks and groups into the data structure
Data Structure & Storage
The data format should be serializable to JSON (to be saved to a database in the future). The same structure should be deserializable to restore the PERT chart state
The data structure should support linking tasks to external tools like Jira, with flexibility to adapt to future integrations
Visual & Layout Requirements
Each task will be visually distinct based on its status:
- Not Started
- In Progress
- In Review
- Complete
Customizable node types should be used to represent these statuses
Task dependencies should be represented by arrows connecting tasks
Groups and nodes should have a drag-and-drop interface for reorganization
Dark mode by default
Code Maintainability & Version Control
Example Diagram
The diagram below illustrates a portion of a checkout flow, where different tasks and subgroups are organized for tracking.
Important Note: In the example diagram above, each subgroup does not contain its own start and end tasks. For the app being developed, it is critical that each group has:
- A start task represented by a circle
- An end task represented by a bold circle (thicker outline)