https://github.com/b13o/orange-mimdmap

🍊A simple and easy-to-use mind map app. Orange color.
https://github.com/b13o/orange-mimdmap

jotai react react-flow shadcn-ui typescript

Last synced: 3 months ago
JSON representation

🍊A simple and easy-to-use mind map app. Orange color.

• Host: GitHub
• URL: https://github.com/b13o/orange-mimdmap
• Owner: b13o
• Created: 2025-03-11T13:35:39.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-03-11T14:10:06.000Z (3 months ago)
• Last Synced: 2025-03-11T15:26:06.051Z (3 months ago)
• Topics: jotai, react, react-flow, shadcn-ui, typescript
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# マインドマップアプリ

## 概要

このプロジェクトでは、Figma 風のマインドマップアプリを構築します。

親要素ブロックに対し、子要素ブロックを繋げていくことで、関係性を視覚的に表現することができます。

## 学習目標

Jotai を使用した、グローバルな状態管理について学習します。

コンポーネント間でのデータ共有、アトムベースの状態管理、ローカルストレージ連携などの実装を確認してください。

### 推奨技術

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

- Jotai を用いたグローバルな状態管理

- React Flow を使用したノードベースのダイアグラム

- Vite を用いた React 環境構築

- TypeScript による型チェック

- Tailwind CSS を用いたスタイリング

- shadcn/ui を用いたコンポーネント

- GitHub Pages へのデプロイ

---

## 🎯 お題

- 「ユーザーストーリー」を全て満たすアプリを構築してください。

- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。

- スタイルは、あなた自身で独自にカスタマイズすることが可能です。

### 必須機能

1. **マインドマップの基本操作**：

   - ノードの追加、編集、削除、移動ができる。

   - ノード間の親子関係を視覚的に表示する。

2. **コンテンツブロックの作成**：

   - サイドバーからテキストを入力してブロックを作成できる。

3. **状態の永続化**：

   - ブラウザを閉じても内容が保存される。

4. **リセットボタン**:

   - 全ての状態をリセットできる。

## ユーザーストーリー

- [ ] ユーザーがサイトにアクセスすると、中央に 1 つ、デフォルトのブロック（ノード）が表示されている。

- [ ] ノードを選択すると、「子要素を追加・編集・削除」のボタンが表示される。

- [ ] ユーザーが「子要素を追加」を選択すると、選択中のノードに子ノードを追加できる。

- [ ] ノードをドラッグして自由に動かして配置できる。

- [ ] 親ノードと子ノードが線で繋がれて表示される。

- [ ] サイドバーにテキスト入力フォームがあり、テキストを入力すると、新たな親ノードが作成される。

- [ ] ページをリロードしても、作成したマインドマップの内容が保持される。

- [ ] 画面上部に「リセット」ボタンがあり、クリックするとマインドマップを初期状態に戻せる。

- [ ] アプリケーションが公開されており、誰でもアクセス可能である。