Docker Composeで動作する、モダンなカンバン式TODOタスク管理アプリケーションです。
- 🎯 3カラムのカンバンボード: Todo / In Progress / Done
- 🖱️ ドラッグ&ドロップ: タスクを直感的に移動
- 💾 データ永続化: SQLiteでデータを安全に保存
- 🐳 Docker完結: ホストOSに依存しない環境
- 🎨 モダンなUI: Tailwind CSSによる美しいデザイン
- ⚡ 高速開発: Vite + TypeScriptで快適な開発体験
- Vite + React (TypeScript)
- Tailwind CSS - スタイリング
- Zustand - 状態管理
- @dnd-kit - ドラッグ&ドロップ機能
- Zod - スキーマバリデーション
- Node.js + Express (TypeScript)
- Prisma - ORM
- SQLite - データベース
- Zod - スキーマバリデーション
- 共有型パッケージ (
@kanban/shared) - バックエンドとフロントエンドで型定義を共有 - TypeScript Strict Mode - 完全な型安全性を実現（any型ゼロ）
- Docker
- Docker Compose
-
リポジトリをクローン (または、プロジェクトディレクトリに移動)
cd /Users/ogiharakouhei/.cursor/worktrees/kanban/HFDG7 -
データディレクトリを作成
mkdir -p data
-
Docker Composeで起動
docker compose up --build
-
ブラウザでアクセス
- フロントエンド: http://localhost:3000
- バックエンドAPI: http://localhost:8080
docker compose downデータを削除したい場合:
docker compose down -v
rm -rf data/*.db.
├── docker-compose.yml # Docker Compose設定
├── README.md # このファイル
├── TYPE_SAFETY_IMPROVEMENTS.md # 型安全性向上の実施内容
├── data/ # SQLiteデータベース（永続化）
│ └── kanban.db
├── shared/ # 共有型定義パッケージ
│ ├── package.json
│ ├── tsconfig.json
│ ├── index.ts
│ ├── types.ts # 共通型定義
│ ├── schemas/ # Zodスキーマ
│ │ ├── taskSchema.ts
│ │ └── memoSchema.ts
│ └── utils/ # 型ガードとバリデーション
│ ├── typeGuards.ts
│ └── validators.ts
├── backend/ # バックエンド
│ ├── Dockerfile
│ ├── package.json
│ ├── tsconfig.json
│ ├── prisma/
│ │ ├── schema.prisma # データベーススキーマ
│ │ └── migrations/ # マイグレーションファイル
│ └── src/
│ ├── index.ts # Express APIサーバー
│ ├── controllers/ # コントローラー
│ ├── services/ # ビジネスロジック
│ ├── repositories/ # データアクセス
│ ├── validators/ # バリデーション
│ └── middleware/ # ミドルウェア
└── frontend/ # フロントエンド
├── Dockerfile
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── index.html
└── src/
├── main.tsx
├── App.tsx
├── types.ts # 共有型のre-export
├── store/
│ └── taskStore.ts # Zustand状態管理
├── components/ # UIコンポーネント
├── hooks/ # カスタムフック
├── services/ # APIクライアント
└── utils/ # ユーティリティ関数
- 「➕ 新しいタスクを追加」ボタンをクリック
- タスク名、詳細、ステータスを入力
- 「追加」ボタンをクリック
- タスクカードをドラッグ&ドロップで移動
- カラム間の移動も、カラム内の並び替えも可能
- タスクカードの ✏️ アイコンをクリック
- 内容を編集して「保存」
- タスクカードの 🗑️ アイコンをクリック
- 確認ダイアログで「OK」
開発中は、コンテナがソースコードの変更を自動で検知して再読み込みします。
docker compose logs -f apidocker compose logs -f webこのプロジェクトでは、コード品質を維持するために以下のツールとプロセスを導入しています。
- ESLint: TypeScript/JavaScript のコードリンター
- Prettier: コードフォーマッター
- Husky: Gitフックツール
- lint-staged: ステージされたファイルのみをlint/format
- GitHub Actions: 自動CI/CDパイプライン
プロジェクトのルートディレクトリで以下を実行：
# ルートの依存関係をインストール
npm install
# Huskyをセットアップ
npm run prepare
# バックエンドの依存関係をインストール
cd backend && npm install
# フロントエンドの依存関係をインストール
cd ../frontend && npm install
# 共有パッケージの依存関係をインストール
cd ../shared && npm install# すべてのプロジェクトをLint
npm run lint
# すべてのファイルをフォーマット
npm run format
# フォーマットチェック（CIで使用）
npm run format:check
# すべてのプロジェクトをテスト
npm run test
# すべてのプロジェクトをビルド
npm run build# コードをLint
npm run lint
# Lintエラーを自動修正
npm run lint:fix
# コードをフォーマット
npm run format
# 型チェックのみ（ビルドなし）
npm run check
# テストを実行
npm run test
# テストをカバレッジ付きで実行
npm run test:coverage# コードをLint
npm run lint
# Lintエラーを自動修正
npm run lint:fix
# コードをフォーマット
npm run format
# 型チェックのみ（ビルドなし）
npm run check
# テストを実行
npm run test
# テストをカバレッジ付きで実行
npm run test:coverageこのプロジェクトでは、Huskyとlint-stagedを使用して、コミット前に自動的にコードをチェックします。
コミット時に自動的に実行される処理：
- ステージされた
.tsと.tsxファイルに対してESLintを実行・修正 - ステージされた
.tsと.tsxファイルをPrettierでフォーマット - ステージされた
.json、.md、.yml、.yamlファイルをPrettierでフォーマット
もしLintエラーやフォーマットエラーがある場合、コミットは失敗します。エラーを修正してから再度コミットしてください。
GitHub Actionsを使用して、以下のチェックを自動的に実行します：
- Lint and Format Check: ESLintとPrettierによるコード品質チェック
- Type Check: TypeScriptの型チェック
- Backend Tests: バックエンドのテスト実行とカバレッジレポート
- Frontend Tests: フロントエンドのテスト実行とカバレッジレポート
- Build: バックエンドとフロントエンドのビルド確認
- 上記すべてのチェック
- Docker Build: DockerイメージのビルドとキャッシュGeneration
.editorconfig ファイルが含まれているため、以下の設定が自動的に適用されます：
- インデント: 2スペース
- 改行コード: LF
- 文字コード: UTF-8
- 行末の空白を削除
VS Code、WebStorm、IntelliJ IDEAなどのモダンなエディタは .editorconfig を自動的に認識します。
| メソッド | エンドポイント | 説明 |
|---|---|---|
| GET | /api/tasks |
全タスクを取得 |
| POST | /api/tasks |
タスクを作成 |
| PUT | /api/tasks/:id |
タスクを更新 |
| DELETE | /api/tasks/:id |
タスクを削除 |
| POST | /api/tasks/reorder |
タスクの順序を一括更新 |
SQLiteデータベースは ./data/kanban.db に保存され、コンテナを削除してもデータは保持されます。
このプロジェクトは完全な型安全性を実現しています：
- ✅ any型ゼロ - すべてのコードで適切な型定義を使用
- ✅ 共有型定義 - バックエンドとフロントエンドで型定義を共有
- ✅ Zodスキーマ - バリデーションと型定義の同期
- ✅ TypeScript Strict Mode - 厳格な型チェック
- ✅ 型ガード - ランタイム型チェック
バックエンドとフロントエンドの両方で、共有型パッケージをインポートできます：
// Task関連の型とスキーマ
import {
Task,
TaskStatus,
TaskPriority,
CreateTaskRequest,
UpdateTaskRequest,
CreateTaskRequestSchema,
UpdateTaskRequestSchema,
} from '@kanban/shared';
// 型ガード
import { isTask, isPrismaClientKnownRequestError } from '@kanban/shared';
// バリデーション
import { validateCreateTaskRequest } from '@kanban/shared';詳細は TYPE_SAFETY_IMPROVEMENTS.md を参照してください。
このプロジェクトは個人用途のタスク管理アプリケーションです。
個人用プロジェクトですが、改善案があればお気軽にご連絡ください。
製作: シニアエンジニア向けカンバンタスク管理システム
開発期間: 2025年11月