{"id":26186573,"url":"https://github.com/b13o/orange-mimdmap","last_synced_at":"2026-05-08T03:36:08.114Z","repository":{"id":281862768,"uuid":"946659521","full_name":"b13o/orange-mimdmap","owner":"b13o","description":"🍊A simple and easy-to-use mind map app. Orange color.","archived":false,"fork":false,"pushed_at":"2025-03-11T14:10:06.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-11T15:26:06.051Z","etag":null,"topics":["jotai","react","react-flow","shadcn-ui","typescript"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b13o.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-11T13:35:39.000Z","updated_at":"2025-03-11T14:11:46.000Z","dependencies_parsed_at":"2025-03-11T15:26:10.511Z","dependency_job_id":null,"html_url":"https://github.com/b13o/orange-mimdmap","commit_stats":null,"previous_names":["b13o/orange-mimdmap"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Forange-mimdmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Forange-mimdmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Forange-mimdmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Forange-mimdmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b13o","download_url":"https://codeload.github.com/b13o/orange-mimdmap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243126741,"owners_count":20240479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jotai","react","react-flow","shadcn-ui","typescript"],"created_at":"2025-03-11T23:22:35.122Z","updated_at":"2026-05-08T03:36:03.088Z","avatar_url":"https://github.com/b13o.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1440\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0f9018d3-8b67-4b5b-a7e2-3779ff7d6b06\" /\u003e\n\n# マインドマップアプリ\n\n## 概要\n\nこのプロジェクトでは、Figma 風のマインドマップアプリを構築します。\n親要素ブロックに対し、子要素ブロックを繋げていくことで、関係性を視覚的に表現することができます。\n\n## 学習目標\n\nJotai を使用した、グローバルな状態管理について学習します。\nコンポーネント間でのデータ共有、アトムベースの状態管理、ローカルストレージ連携などの実装を確認してください。\n\n### 推奨技術\n\nこのプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。\n\n- Jotai を用いたグローバルな状態管理\n- React Flow を使用したノードベースのダイアグラム\n- Vite を用いた React 環境構築\n- TypeScript による型チェック\n- Tailwind CSS を用いたスタイリング\n- shadcn/ui を用いたコンポーネント\n- GitHub Pages へのデプロイ\n\n---\n\n## 🎯 お題\n\n- 「ユーザーストーリー」を全て満たすアプリを構築してください。\n- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。\n- スタイルは、あなた自身で独自にカスタマイズすることが可能です。\n\n### 必須機能\n\n1. **マインドマップの基本操作**：\n   - ノードの追加、編集、削除、移動ができる。\n   - ノード間の親子関係を視覚的に表示する。\n2. **コンテンツブロックの作成**：\n   - サイドバーからテキストを入力してブロックを作成できる。\n3. **状態の永続化**：\n   - ブラウザを閉じても内容が保存される。\n4. **リセットボタン**:\n   - 全ての状態をリセットできる。\n\n## ユーザーストーリー\n\n- [ ] ユーザーがサイトにアクセスすると、中央に 1 つ、デフォルトのブロック（ノード）が表示されている。\n- [ ] ノードを選択すると、「子要素を追加・編集・削除」のボタンが表示される。\n- [ ] ユーザーが「子要素を追加」を選択すると、選択中のノードに子ノードを追加できる。\n- [ ] ノードをドラッグして自由に動かして配置できる。\n- [ ] 親ノードと子ノードが線で繋がれて表示される。\n- [ ] サイドバーにテキスト入力フォームがあり、テキストを入力すると、新たな親ノードが作成される。\n- [ ] ページをリロードしても、作成したマインドマップの内容が保持される。\n- [ ] 画面上部に「リセット」ボタンがあり、クリックするとマインドマップを初期状態に戻せる。\n- [ ] アプリケーションが公開されており、誰でもアクセス可能である。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13o%2Forange-mimdmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb13o%2Forange-mimdmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13o%2Forange-mimdmap/lists"}