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

Board view (1/2): show tasks as a Kanban board

Open
  • Is something wrong?
#76 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
82/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, where the Tasks page and its filters are handled; check how it fetches tasks and applies search and priority filters. The optional client/src/components/Tasks/TaskBoard.jsx can hold the board view. Done means the toggle, saved view choice, three filtered columns, task actions, task limit counts, and narrow-screen layout meet the listed acceptance criteria.

Written by the indexing model from the issue text.

Description

difficulty: medium enhancement frontend hacktoberfest help wanted
Context

A board view shows tasks in three columns, To Do, In Progress and Done, like a Kanban board. This step adds the view. Moving tasks between columns comes in "Board view (2/2)". It doesn't depend on tags, but if "Tags (2/2)" has been merged, the board should respect the tag filter too.

Files likely involved
  • client/src/pages/Tasks.jsx
  • Optional: new client/src/components/Tasks/TaskBoard.jsx
Acceptance criteria
  • A List / Board toggle at the top of the Tasks page (two buttons, the active one marked with aria-pressed). The choice is remembered in localStorage.
  • Board view shows three columns with their task cards (title, priority, and the same Edit and Delete buttons as the list).
  • The search and priority filters (and tags, if available) apply to the board. The status filter is hidden in board view, since the columns already show status.
  • The API returns at most 50 tasks per request, so fetch each column separately (?status=todo&limit=50, and so on). When a column has more than 50 tasks, show "Showing 50 of N" at its bottom.
  • On small screens, the columns stack vertically.
How to test
  1. Switch to Board: three columns with the right tasks. Reload: still on Board.
  2. Search and filter by priority: the columns update.
  3. Create, edit and delete a task from the board: the columns update.
  4. Phone width in DevTools: the columns stack.

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
6h 50m
Merged PRs (30d)
37

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.