My Issue Tracker - Notionライクなタスク＆アイデア管理ツール

ブレインストーミングのための自由な「アイデアブロック」と、体系的な「ToDoデータベース」を一つのページでシームレスに管理できる、Notionライクな多機能トラッカーです。

👇 今すぐサイトで体験！

https://nanaism.github.io/my-issue-tracker/

Issue Trackerのスクリーンショット

🌟 プロジェクトの特徴 (Features)

このツールは、思考の整理からタスクの実行まで、一気通貫したワークフローを提供します。

📝 独立したマルチページ機能
- プロジェクトやカテゴリごとに複数のページを作成・切り替え・削除できます。各ページは完全に独立したアイデアブロックとToDoリストを保持します。
💡 ドラッグ＆ドロップ対応のアイデアブロック
- 思いついたアイデアを次々とブロックとして追加。ドラッグ＆ドロップで直感的に並び替え、思考を自由に整理できます。
📊 高機能なToDoデータベース
- タスクをテーブル形式で管理。「タイトル」「ステータス」「作成日」などを一覧で把握し、ソートやフィルタリングも可能です。
✒️ コンテキストを失わない詳細編集サイドバー
- ToDoアイテムをクリックすると、画面右側に詳細編集用のサイドバーが出現。ページを移動することなく、タスクの詳細（説明文など）をリッチに編集できます。
💾 サーバー不要 & データはローカル保持
- 作成したすべてのデータはブラウザのLocalStorageに保存されるため、アカウント登録は不要。プライベートな情報を外部に送信することなく、安全に利用できます。

💡 こだわりのポイント：設計思想

「発想」と「整理」の融合

多くのツールは、自由な発想（マインドマップなど）か、構造化された管理（ToDoリストなど）のどちらかに特化しています。このプロジェクトでは、**ページの上部でアイデアを自由に発散させ（アイデアブロック）、ページの下部でそれを具体的なタスクに落とし込む（ToDoデータベース）**という、思考の自然な流れを一つの画面で実現することを目指しました。

複雑な状態変更を安全に扱う技術選定

このような高機能なフロントエンドアプリケーションでは、ネストされた複雑なデータ（ページ ⊃ ブロック/ToDo ⊃ 詳細データ）を扱う必要があります。そこで、状態管理ライブラリの組み合わせを工夫しました。

Zustand: シンプルでボイラープレートの少ないAPIが魅力のグローバル状態管理ライブラリ。
Immer: 「状態の直接変更」のような書き方で、安全にイミュータブル（不変）な更新を行うことができるライブラリ。これにより、複雑なデータ構造の更新処理を、驚くほどシンプルかつ安全に記述することが可能になりました。

この Zustand + Immer の組み合わせが、このアプリの複雑な状態管理を支える技術的な心臓部です。

🛠️ 使用技術 (Tech Stack)

このアプリケーションは、パフォーマンスと開発者体験を重視したモダンな技術スタックで構築されています。

Core: React, TypeScript
Build Tool: Vite
State Management: Zustand, Immer
UI & Styling: shadcn/ui, Tailwind CSS
Data Storage: LocalStorage

🚀 ローカルでの実行方法 (Getting Started)

このプロジェクトをご自身の環境で動かす場合は、以下の手順に従ってください。

リポジトリをクローン

git clone https://github.com/nanaism/my-issue-tracker.git

ディレクトリに移動
```
cd my-issue-tracker
```
依存関係をインストール
```
npm install
# または yarn install
```
開発サーバーを起動
```
npm run dev
# または yarn dev
```
ブラウザで http://localhost:5173 (Viteのデフォルトポート) を開いてください。