📌
カンバン・タスク管理ボード
Trello風のドラッグ操作ボード。UI実装力が身につく
どんなもの?
「未着手・進行中・完了」のようにカードをドラッグして動かすタスク管理ボード(Trelloのようなもの)。ドラッグ&ドロップという少し高度なUI操作の実装が学べます。チームで共有すればプロジェクト管理ツールとしても使え、応用範囲の広い題材です。
こんな人におすすめ
本格的なUIを作りたい中級者。チーム利用も視野に
おすすめの技術スタック
カンバンは「ドラッグ操作のUI」と「リアルタイム同期」が核。UIの実装はCursorに任せ、データとリアルタイム同期はSupabase(標準でリアルタイム機能あり)で実現。複数人で同時編集できるボードが作れます。
作り方のステップ
- ボード構造を設計 リスト(列)とカードの関係をCursorと設計。カンバンの基本構造です。
- ドラッグ操作を実装 「カードをドラッグして別の列に移動」を実装。少し難しいですがAIが対応します。
- リアルタイム同期 Supabaseのリアルタイム機能で、複数人が同時に使っても即座に反映されるように。
- 公開する Vercelで公開。個人のタスク管理からチームのプロジェクト管理まで使えます。
収益化のヒント
Supabase・Vercelの導線。プロジェクト管理・生産性ツールは関心層が厚い。