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

Tags (2/2): add, show and filter by tags in the app

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

Maintainers usually reply within 1 day

@sunnyrockk is already working on this.

Since Oct 24, 2026.

  • #95 by @sunnyrockk — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
76/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react
Domain
frontend

Research direction

Start in client/src/pages/Tasks.jsx, focusing on TaskForm, task cards and the filters row; check how existing fields, chips and filters work. The issue says this builds on Tags (1/2), so confirm that API work is merged before starting. Done means tags can be added, removed, displayed and used to filter tasks, with the stated limits and pagination behavior.

Written by the indexing model from the issue text.

Description

difficulty: medium enhancement frontend hacktoberfest help wanted
Context

Second step of tags. Builds on "Tags (1/2): add tags to tasks in the API".

Please start this after "Tags (1/2)" is merged.

Files likely involved
  • client/src/pages/Tasks.jsx (TaskForm, the task cards and the filters row)
Acceptance criteria
  • The New/Edit Task form has a Tags field. Typing a tag and pressing Enter or a comma adds it as a chip, and each chip has a remove button (aria-label="Remove tag work"). Limits match the API (5 tags, 20 characters).
  • Task cards show their tags as small chips.
  • Clicking a tag chip on a card filters the list by that tag. The active tag filter is shown next to the other filters, with a way to clear it, and it's included in "Clear filters".
  • Changing the tag filter goes back to page 1, like the other filters.
How to test
  1. Create a task with a few tags: they show on the card.
  2. Edit it: remove a tag, add another, save.
  3. Click a tag on a card: only tasks with that tag are listed. Clear it: everything is back.

New here? 👋 Comment below to ask to work on this issue, and wait to be assigned. Then follow CONTRIBUTING.md for setup and how to open a pull request. Questions are welcome in the comments or in Discussions.

Dominant language
JavaScript
Stars
3
Forks
2
Avg merge
7h 8m
Merged PRs (30d)
38

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 KEX-03/taskflow

All issues in KEX-03/taskflow

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.