Skip to content

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

Notifications You must be signed in to change notification settings

b13o/orange-mimdmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 

Repository files navigation

Image

マインドマップアプリ

概要

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

学習目標

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

推奨技術

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

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

🎯 お題

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

必須機能

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

ユーザーストーリー

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published