Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
#76 コメント 2 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@Korale05 がすでに取り組んでいます。

2026年10月28日 から。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
82/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, react
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
JavaScript
スター
3
フォーク
2
平均マージ
10時間 33分
マージ済み PR(30日)
41

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

KEX-03/taskflow のほかの issue

KEX-03/taskflow の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。