タスク管理アプリ

チーム向けのタスク管理 Web アプリケーション。ドラッグ＆ドロップによるカンバンボード、リアルタイム通知、ロールベースのアクセス制御を実装。PostgreSQL と Prisma ORM でデータを管理し、Next.js API Routes でバックエンドを構築しました。

概要

チームのタスクをカンバン形式で管理する Web アプリケーションです。Jira や Notion のような高機能ツールではなく、シンプルさを重視した設計にしています。

主な機能

カンバンボード: ドラッグ＆ドロップでタスクのステータスを変更
リアルタイム通知: タスクのアサインやコメント追加時に通知
ロールベースアクセス制御: 管理者・メンバー・ゲストの3役割
ラベル・優先度管理: タグ付けと優先度設定でフィルタリング

技術的なポイント

Prisma によるタイプセーフな DB アクセス

const tasks = await prisma.task.findMany({
  where: { assigneeId: userId, status: 'IN_PROGRESS' },
  include: { labels: true, comments: { take: 3 } },
  orderBy: { priority: 'desc' },
})

Server-Sent Events によるリアルタイム通知

WebSocket の代わりに Server-Sent Events を採用。サーバーからクライアントへの一方向通知に特化しており、実装がシンプルで Vercel のエッジ環境とも相性が良い選択でした。

学んだこと

フルスタック開発で最も時間がかかったのは、フロントエンドとバックエンドの型定義の共有でした。zod でスキーマを定義し、バリデーションと型推論を一元管理する設計が有効でした。