debugfest / debugfest/mern-todo-list

Feature Request: Add Filtering (All / Active / Completed) and Todo Count

Open
#5 1 comment 0 reactions 1 assignee Claimed by @Pratham21223 View on GitHub
enhancement good first issue hacktoberfest
Dominant language
TypeScript
Stars
1
Forks
4
PR merge metrics
No merged PRs in 30d

Description

The current list displays all todos together, making it harder to focus on active tasks. Adding filtering options and task counters enhances usability and productivity.

### 🎯 Proposed Solution
- Add filter buttons: **All**, **Active**, **Completed**.
- Implement filtering client-side or via query params (e.g., `/api/todos?completed=true`).
- Display total todos and remaining active count.

### ✅ Expected Behavior
- Clicking a filter updates the displayed list.
- Counts update dynamically when todos change.
- Users can easily switch between views.

### 💻 Technical Notes
- Frontend: `App/src/components/TodoList.tsx`, possible updates to `App/src/api/*`.
- Backend: Optional support for query-based filtering.

### 🧪 Test Steps
1. Add multiple todos with mixed completion states.
2. Switch between filters → list updates accordingly.
3. Verify total and active count accuracy.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.