イシュー管理アプリ

概要

このプロジェクトでは、Notion 風のイシュー管理アプリを構築します。

アイデアをブロックとして管理したり、ToDo をデータベースビューでの表示・編集、複数ページでの管理機能を実装します。

学習目標

useState、immer、useContext、zustand を段階的に使用した状態管理の比較学習を行います。 複雑な状態構造の管理において、各ライブラリの特徴と利点について理解を深めてください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• useState による基本的な状態管理
• immer によるイミュータブルな記述の簡略化
• Context API による グローバルな状態管理
• Zustand によるグローバルでハイパフォーマンスな状態管理
• Vite を用いた React 環境構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui によるコンポーネントの導入
• GitHub Pages へのデプロイ

---

🎯 お題

• 「ユーザーストーリー」を全て満たすアプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
• スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. アイデアブロック管理：
   • アイデアをブロックとして追加・削除・並び替えできる。
2. ToDo データベースビュー：
   • ToDo をテーブル形式で表示・管理する。
3. 詳細表示：
   • ToDo クリックで右サイドバーに詳細ページを表示する。
4. ページ管理：
   • 複数ページの作成・切り替え・削除を行う。

ユーザーストーリー

アイデアブロック機能

• ユーザーがページにアクセスすると、アイデアを入力できるフォームが表示されている。
• 追加したアイデアが、ブロック形式で縦に一覧表示される。
• アイデアブロックをドラッグ&ドロップで並び替えできる。
• アイデアブロックを削除できる。

ToDo データベース機能

• ToDo をテーブル形式（データベースビュー）で表示できる。
• ToDo のタイトル、ステータス（未完了/完了）、作成日が表示される。
• 新しい ToDo を追加できる。
• ToDo のステータスを切り替えできる。
• ToDo を削除できる。

詳細表示機能

• ToDo をクリックすると、右サイドバーが開き詳細が表示される。
• サイドバーで ToDo のタイトル、説明、ステータスを編集できる。
• サイドバーを閉じることができる。

ページ管理機能

• 新しいページを作成できる。
• ページタブでページを切り替えできる。
• ページのタイトルを編集できる。
• ページを削除できる（最低 1 ページは残る）。
• 各ページで独立したアイデアブロックと ToDo を管理できる。

その他

• アプリケーションがデプロイされており、誰でもアクセス可能である。