Study Tracker 📚✨

学習時間・達成率をグラフで見える化する学習管理ダッシュボードアプリです。

✨ 特徴

特徴	説明
🏗️ フルスタック構成	バックエンドに Java (Spring Boot)、フロントエンドに Next.js を採用した本格的な Web アプリケーション
⚡ モダンな技術スタック	最新のフレームワーク・ライブラリで構築。TypeScript による型安全な開発
🔐 セキュアな認証	JWT (JSON Web Token) を使用したステートレス認証を実装
🎨 直感的な UI/UX	グラフやゲージを使った視覚的にわかりやすいダッシュボード
📱 レスポンシブデザイン	PC・タブレット・スマートフォンに対応
🐳 Docker 対応	Docker Compose で簡単にデータベース環境を構築

🎯 機能

• 📊 学習時間の可視化 - 日別・科目別の学習時間をグラフで表示
• 🎯 目標達成率 - 月間目標に対する達成率を円グラフで表示
• 📝 学習ログ管理 - 学習記録の追加・編集・削除
• 💭 振り返り機能 - 今日のひとこと振り返りを記録
• 🔐 認証機能 - JWT 認証によるセキュアなログイン

🛠️ 技術スタック

バックエンド

• Java 17
• Spring Boot 3.2
• Spring Security (JWT 認証)
• Spring Data JPA
• MySQL 8.0 (Docker)
• Lombok

フロントエンド

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• Recharts (グラフライブラリ)
• Zustand (状態管理)
• date-fns (日付処理)

インフラ

• Docker / Docker Compose
• MySQL 8.0
• Railway (バックエンド・データベースホスティング)
• Vercel (フロントエンドホスティング)

🌐 デモ

本番環境: https://yucco-study-tracker.vercel.app

デモアカウント

項目	値
メールアドレス	demo@example.com
パスワード	demo1234

🚀 開始方法

必要条件

• Java 17 以上
• Node.js 18 以上
• Docker Desktop
• npm または yarn

セットアップ

# 1. リポジトリをクローン
git clone https://github.com/Yucco-K/study-tracker.git
cd study-tracker

# 2. 環境変数ファイルを作成
cp env.example .env
# .env を編集して必要に応じて値を変更

# 3. Git フックをインストール（機密情報チェック）
bash scripts/install-hooks.sh

# 4. MySQL コンテナを起動
docker-compose up -d

# 5. バックエンドを起動
cd backend
export $(cat ../.env | grep -v '^#' | xargs)
mvn spring-boot:run

# 6. フロントエンドを起動（別ターミナル）
cd frontend
npm install
npm run dev

アクセス

• フロントエンド: http://localhost:3000
• バックエンド API: http://localhost:8080

📡 API エンドポイント

認証 (/api/auth)

メソッド	エンドポイント	説明
POST	/register	ユーザー登録
POST	/login	ログイン

科目 (/api/subjects)

メソッド	エンドポイント	説明
GET	/	科目一覧取得
POST	/	科目作成
PUT	/{id}	科目更新
DELETE	/{id}	科目削除

学習ログ (/api/logs)

メソッド	エンドポイント	説明
GET	/	ログ一覧取得
GET	/range?startDate=&endDate=	期間指定でログ取得
POST	/	ログ作成
PUT	/{id}	ログ更新
DELETE	/{id}	ログ削除

目標 (/api/goals)

メソッド	エンドポイント	説明
GET	/current	今月の目標取得
GET	/{year}/{month}	指定月の目標取得
POST	/	目標設定

振り返り (/api/reflections)

メソッド	エンドポイント	説明
GET	/	振り返り一覧取得
GET	/recent	最近の振り返り取得
POST	/	振り返り保存
DELETE	/{id}	振り返り削除

統計 (/api/stats)

メソッド	エンドポイント	説明
GET	/	今月の統計取得
GET	/{year}/{month}	指定月の統計取得

ヘルスチェック

メソッド	エンドポイント	説明
GET	/health	サービス稼働確認

📁 プロジェクト構成

study-tracker/
├── backend/
│   └── src/main/java/com/studytracker/
│       ├── controller/     # REST コントローラー
│       ├── service/        # ビジネスロジック
│       ├── repository/     # データアクセス
│       ├── entity/         # エンティティ
│       ├── dto/            # データ転送オブジェクト
│       ├── security/       # JWT認証
│       ├── config/         # 設定
│       └── exception/      # 例外処理
│
├── frontend/
│   └── src/
│       ├── app/            # Next.js App Router
│       ├── components/     # Reactコンポーネント
│       │   ├── auth/       # 認証関連
│       │   ├── charts/     # グラフコンポーネント
│       │   ├── dashboard/  # ダッシュボード
│       │   └── ui/         # 共通UIコンポーネント
│       ├── lib/            # APIクライアント
│       ├── store/          # Zustand状態管理
│       └── types/          # TypeScript型定義
│
├── scripts/
│   ├── check-secrets.sh    # 機密情報チェック
│   └── install-hooks.sh    # Git フックインストール
│
├── Dockerfile              # 本番用 Docker イメージ
├── docker-compose.yml      # ローカル MySQL コンテナ定義
├── railway.toml            # Railway デプロイ設定
└── env.example             # 環境変数テンプレート

🖼️ スクリーンショット

ダッシュボード

達成率ゲージ・日別/月別/年別学習時間グラフ・科目別学習時間を一目で確認

学習記録 & 振り返り

最近の学習ログ一覧と、今日のひとこと振り返り機能

月間目標設定

目標時間を簡単に設定。プリセットから選択も可能

今日の振り返り

気分と一言コメントで日々の学習を振り返り

科目の追加

学習科目をカラー付きで自由に追加・管理

📄 ライセンス

MIT License