
このプロジェクトでは、Figma 風のマインドマップアプリを構築します。 親要素ブロックに対し、子要素ブロックを繋げていくことで、関係性を視覚的に表現することができます。
Jotai を使用した、グローバルな状態管理について学習します。 コンポーネント間でのデータ共有、アトムベースの状態管理、ローカルストレージ連携などの実装を確認してください。
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- Jotai を用いたグローバルな状態管理
- React Flow を使用したノードベースのダイアグラム
- Vite を用いた React 環境構築
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui を用いたコンポーネント
- GitHub Pages へのデプロイ
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
- マインドマップの基本操作:
- ノードの追加、編集、削除、移動ができる。
- ノード間の親子関係を視覚的に表示する。
- コンテンツブロックの作成:
- サイドバーからテキストを入力してブロックを作成できる。
- 状態の永続化:
- ブラウザを閉じても内容が保存される。
- リセットボタン:
- 全ての状態をリセットできる。
- ユーザーがサイトにアクセスすると、中央に 1 つ、デフォルトのブロック(ノード)が表示されている。
- ノードを選択すると、「子要素を追加・編集・削除」のボタンが表示される。
- ユーザーが「子要素を追加」を選択すると、選択中のノードに子ノードを追加できる。
- ノードをドラッグして自由に動かして配置できる。
- 親ノードと子ノードが線で繋がれて表示される。
- サイドバーにテキスト入力フォームがあり、テキストを入力すると、新たな親ノードが作成される。
- ページをリロードしても、作成したマインドマップの内容が保持される。
- 画面上部に「リセット」ボタンがあり、クリックするとマインドマップを初期状態に戻せる。
- アプリケーションが公開されており、誰でもアクセス可能である。