🧠 Neural Tasks - 近未来型TODOリストアプリ

MySQL と Docker を使用した最新技術スタックによる近未来的なTODOリスト Web アプリケーションです。React 19 + TypeScript + Tailwind CSS v4 + Vite の最新スタックで構築されており、美しいサイバーパンクなUIとともにタスク管理を体験できます。

📁 プロジェクト構造

tiger-sql/
├── backend/               # Express.js APIサーバー
│   ├── server.js
│   ├── package.json
│   ├── Dockerfile
│   └── init.sql
├── frontend/             # React + TypeScript フロントエンド
│   ├── src/
│   │   ├── components/   # UIコンポーネント
│   │   ├── hooks/        # カスタムフック
│   │   ├── services/     # API通信
│   │   ├── types/        # TypeScript型定義
│   │   └── utils/        # ユーティリティ関数
│   │       └── cn.ts     # clsx + TailwindCSS統合
│   ├── package.json
│   └── vite.config.ts
├── docker-compose.yml    # Docker構成
└── package.json         # モノレポ管理

✨ 機能

• ⚡ ワンクリック完了 - 大きなボタンで簡単にタスク完了
• 🎨 近未来的UI - サイバーパンク風のデザインとグロウエフェクト
• 🔄 リアルタイム更新 - 即座に反映される変更
• 📊 進捗ダッシュボード - 統計情報とビジュアル化された進捗
• 🔍 インテリジェントフィルター - Neural Filterによる高度なタスク管理
• 📱 レスポンシブデザイン - すべてのデバイスで最適化
• 🌙 ダークテーマ - 目に優しいサイバーパンクカラー
• 🚀 高速パフォーマンス - Vite + React 19の最新技術
• 🧩 clsx統合 - TailwindCSSクラスの効率的な管理

🛠️ 技術スタック（2025年最新版）

フロントエンド

• React 19.1.0 - 最新のReactフレームワーク
• TypeScript 5.8.3 - 静的型付けによる安全な開発
• Vite 6.3.5 - 高速ビルドツール
• Tailwind CSS v4.1.8 - 最新のユーティリティファーストCSS
• clsx 2.1.1 - 条件付きクラス名の効率的な管理
• DaisyUI 5.0.43 - 美しいUIコンポーネント
• Lucide React 0.513.0 - モダンなアイコンライブラリ
• Axios 1.9.0 - HTTP通信ライブラリ
• React Hot Toast 2.5.2 - 通知システム

バックエンド

• Node.js - サーバーランタイム
• Express.js - Web フレームワーク
• MySQL 8.0 - データベース
• mysql2 - MySQL ドライバー

開発ツール

• pnpm 10.10.0 - 高速パッケージマネージャー
• ESLint 9.28.0 - コード品質管理
• TypeScript ESLint 8.34.0 - TypeScript専用リンター

インフラ

• Docker - コンテナ化
• Docker Compose - マルチコンテナ管理

📋 必要な環境

• Docker
• Docker Compose
• pnpm (オプション: フロントエンド開発用)

🚀 クイックスタート

1. バックエンドを起動

# MySQLとExpressサーバーを起動
docker compose up -d

2. フロントエンドを起動

# フロントエンドディレクトリに移動
cd frontend

# 依存関係をインストール（初回のみ）
pnpm install

# 開発サーバーを起動
pnpm dev

3. アプリケーションにアクセス

• フロントエンド: http://localhost:5173
• バックエンドAPI: http://localhost:3001

📁 プロジェクト構造

torasql/
├── frontend/                    # React + TypeScript フロントエンド
│   ├── src/
│   │   ├── components/         # UIコンポーネント
│   │   │   ├── TodoItem.tsx    # タスクアイテム
│   │   │   ├── TodoForm.tsx    # タスク作成フォーム
│   │   │   ├── TodoFilter.tsx  # フィルターコンポーネント
│   │   │   └── LoadingSpinner.tsx
│   │   ├── hooks/
│   │   │   └── useTodos.ts     # カスタムフック
│   │   ├── services/
│   │   │   └── api.ts          # API通信
│   │   ├── types/
│   │   │   └── Todo.ts         # TypeScript型定義
│   │   ├── App.tsx             # メインアプリ
│   │   ├── main.tsx            # エントリーポイント
│   │   └── index.css           # Tailwind CSS v4
│   ├── vite.config.ts          # Vite設定
│   └── package.json            # フロントエンド依存関係
├── docker-compose.yml          # Docker構成
├── Dockerfile                  # バックエンドコンテナ
├── server.js                   # Express サーバー
├── init.sql                    # データベース初期化
└── package.json                # バックエンド依存関係

🗄️ データベース設計

todos テーブル

カラム名	データ型	説明
id	INT AUTO_INCREMENT	主キー
title	VARCHAR(255)	TODO のタイトル
description	TEXT	TODO の説明（任意）
completed	BOOLEAN	完了状態（デフォルト: FALSE）
created_at	TIMESTAMP	作成日時
updated_at	TIMESTAMP	更新日時

🔌 API エンドポイント

• GET /api/todos - すべての TODO を取得
• GET /api/todos/:id - 指定 ID の TODO を取得
• POST /api/todos - 新しい TODO を作成
• PUT /api/todos/:id - TODO を更新
• DELETE /api/todos/:id - TODO を削除
• GET /health - ヘルスチェック

🎨 UIの特徴

サイバーパンクデザイン

• ネオンカラー: 青、紫、シアンのグラデーション
• グロウエフェクト: ボタンやアイコンが光る
• ガラスモーフィズム: 透明感のあるUI要素
• 動的背景: アニメーションする背景エフェクト

UX改善

• 大きな完了ボタン: ⚡アイコン付きで分かりやすい
• ホバーエフェクト: マウスオーバーで編集・削除ボタン表示
• 進捗表示: リアルタイムの統計と進捗バー
• レスポンシブ: すべてのデバイスで最適化

📚 学習ポイント

このプロジェクトでは以下のことを学べます：

フロントエンド

1. React 19 - 最新のReact機能とフック
2. TypeScript - 型安全なフロントエンド開発
3. Vite - 高速な開発環境とビルド
4. Tailwind CSS v4 - ユーティリティファーストCSS
5. カスタムフック - ロジックの再利用可能な分離

バックエンド

1. REST API 設計 - CRUD 操作の実装
2. Express.js - Node.js Web フレームワークの使用
3. MySQL - リレーショナルデータベースの基本操作
4. 非同期プログラミング - async/await の使用

インフラ

1. Docker - コンテナ化技術の基本
2. Viteプロキシ - 開発時のAPI通信設定
3. pnpm - 効率的なパッケージ管理

🐛 トラブルシューティング

Docker コンテナが起動しない場合

1. ポート 3001 と 3306 が他のプロセスで使用されていないか確認
2. Docker デーモンが実行中か確認
3. ログを確認: docker compose logs

フロントエンド開発サーバーが起動しない場合

1. Node.js がインストールされているか確認
2. pnpm がインストールされているか確認: npm install -g pnpm
3. 依存関係を再インストール: pnpm install
4. ポート 5173 が使用可能か確認

API通信エラー

1. バックエンドサーバーが起動しているか確認: curl http://localhost:3001/health
2. MySQL コンテナが起動しているか確認: docker compose ps
3. 環境変数が正しく設定されているか確認（.envファイル）

📄 ライセンス

MIT License

---

🚀 Neural Tasks で未来的なタスク管理を体験してください！