Skip to content

plan.md

Latest commit

 

History

History
53 lines (36 loc) · 2.85 KB

plan.md

File metadata and controls

53 lines (36 loc) · 2.85 KB
Raw

React Task Manager — Contribution Plan

Overview

A task management app built with React and Vite supporting categories, filters, and completion tracking. Work items are tracked as scoped GitHub issues and assigned during sprint cycles. Each issue defines acceptance criteria, component scope, and relevant code references.

Issue Types

Bug Fixes

  • Empty state flicker: Fix a brief flash of "No tasks found" when the page first loads before state initializes.
  • Category filter persistence: Ensure the task category dropdown resets after adding a task instead of retaining the previous selection.
  • Duplicate key warning: Resolve key prop warnings when multiple tasks have the same Date.now() timestamp in rapid succession.
  • Stats counter accuracy: Verify that the "active" counter updates correctly when toggling a task back from completed.

New Features

  • Local storage persistence: Save the todo list to localStorage so tasks survive page refreshes.
  • Drag-and-drop reorder: Integrate @dnd-kit or native HTML5 drag-and-drop to reorder tasks.
  • Due dates: Add an optional due date picker per task and highlight overdue items in red.
  • Search / filter by text: Add a search bar that filters tasks by keyword in addition to the category and status filters.
  • Batch actions: Allow selecting multiple tasks and marking them all complete, active, or deleted at once.
  • Color-coded priority: Add low / medium / high priority labels (green / yellow / red).

Documentation

  • README usage guide: Explain how to add, edit, complete, and delete tasks with screenshots.
  • Component reference: Document TodoItem, TodoList, AddForm, and FilterBar props and behavior.
  • State management: Describe the current useState pattern and note migration paths to useReducer or Zustand.

Testing

  • CRUD unit tests: Use vitest + @testing-library/react to verify add, toggle, and delete operations.
  • Filter correctness: Test that the all / active / completed filters return the correct subsets.
  • Local storage mock: Write an integration test that simulates page refresh with persisted state.
  • Keyboard accessibility: Verify that all actions (add, toggle, delete) work via keyboard alone.

Performance & Optimization

  • Memoize filtered list: Wrap the filtered todo list with useMemo to avoid re-filtering on unrelated state changes.
  • Debounce search input: Add debounce to the text search to avoid filtering on every keystroke.
  • CSS containment: Add content-visibility: auto to the todo list for smooth scrolling with many items.

Contributor Guidelines

  • Run npm run build before submitting; confirm zero errors.
  • Keep each PR focused on a single feature or bug fix.
  • Reference the issue number in the PR title.
  • Include a brief testing summary in the PR description.