ドラッグ&ドロップ対応のカンバン式タスク管理 Web アプリです。
🔗 https://taskflow-five-rouge.vercel.app/
- カンバンボード — Todo / In Progress / Done の 3 列
- ドラッグ&ドロップ — @dnd-kit によるスムーズな並び替え・列移動
- タスク追加 — タイトル・説明・優先度・ステータスを設定
- 優先度バッジ — 高 / 中 / 低 を色分け表示
- 進捗バー — 完了率をヘッダーにリアルタイム表示
- 永続化 — localStorage に自動保存（リロードしてもデータが残る）
| Category | Library |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| State | Zustand + localStorage persist |
| DnD | @dnd-kit |
| Testing | Vitest + Testing Library |
| CI | GitHub Actions |
src/
├── app/ # Next.js App Router
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── KanbanBoard.tsx # DnD コンテキスト・レイアウト全体
│ ├── Column.tsx # ドロップゾーン + SortableContext
│ ├── TaskCard.tsx # ドラッグ可能なタスクカード
│ └── AddTaskModal.tsx # タスク追加モーダル
├── store/
│ └── useTaskStore.ts # Zustand store（CRUD + 並び替え）
├── types/
│ └── index.ts # 共通型定義
└── __tests__/
└── useTaskStore.test.ts
git clone https://github.com/nodokamome/taskflow.git
cd taskflow
npm install
npm run devhttp://localhost:3000 を開いてください。
npm run testMIT
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.