マインドマップアプリ

概要

このプロジェクトでは、Figma 風のマインドマップアプリを構築します。 親要素ブロックに対し、子要素ブロックを繋げていくことで、関係性を視覚的に表現することができます。

学習目標

Jotai を使用した、グローバルな状態管理について学習します。 コンポーネント間でのデータ共有、アトムベースの状態管理、ローカルストレージ連携などの実装を確認してください。

推奨技術

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

• Jotai を用いたグローバルな状態管理
• React Flow を使用したノードベースのダイアグラム
• Vite を用いた React 環境構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui を用いたコンポーネント
• GitHub Pages へのデプロイ

---

🎯 お題

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

必須機能

1. マインドマップの基本操作：
   • ノードの追加、編集、削除、移動ができる。
   • ノード間の親子関係を視覚的に表示する。
2. コンテンツブロックの作成：
   • サイドバーからテキストを入力してブロックを作成できる。
3. 状態の永続化：
   • ブラウザを閉じても内容が保存される。
4. リセットボタン:
   • 全ての状態をリセットできる。

ユーザーストーリー

• ユーザーがサイトにアクセスすると、中央に 1 つ、デフォルトのブロック（ノード）が表示されている。
• ノードを選択すると、「子要素を追加・編集・削除」のボタンが表示される。
• ユーザーが「子要素を追加」を選択すると、選択中のノードに子ノードを追加できる。
• ノードをドラッグして自由に動かして配置できる。
• 親ノードと子ノードが線で繋がれて表示される。
• サイドバーにテキスト入力フォームがあり、テキストを入力すると、新たな親ノードが作成される。
• ページをリロードしても、作成したマインドマップの内容が保持される。
• 画面上部に「リセット」ボタンがあり、クリックするとマインドマップを初期状態に戻せる。
• アプリケーションが公開されており、誰でもアクセス可能である。