LearnCurve - エンジニア向け学習曲線アプリ

忘却曲線に基づいた最適なタイミングで、エンジニアが知識を"思い出せる"ようにする学習アプリ。

🚀 技術スタック

• フロントエンド: Next.js 15 (App Router), TypeScript, TailwindCSS
• ホスティング: Cloudflare Pages
• データベース: Cloudflare D1 (SQLite)
• ORM: Drizzle ORM
• 認証: Supabase Auth (Magic Link)

📋 セットアップ

1. 依存関係のインストール

pnpm install

2. Supabase プロジェクトの作成

1. Supabase でプロジェクトを作成
2. プロジェクト設定から API URL と Anon Key を取得

3. 環境変数の設定

.env.development と .env.production に以下を設定：

NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-key"
OPENAI_API_KEY="your-openai-api-key"

重要: Cloudflare Pagesにデプロイする場合、機密情報（OPENAI_API_KEYなど）は.env.productionだけでは設定されません。以下のコマンドでCloudflare Pagesのシークレットとして設定してください：

# 本番環境のシークレットを設定
pnpm wrangler pages secret put OPENAI_API_KEY --project-name=learning-curve-app

プロンプトが表示されたら、APIキーを入力してください。

4. Cloudflare D1 データベースの作成

wrangler d1 create nextjs-d1-drizzle-cloudflare-pages

作成された database_id を wrangler.toml に設定します。

5. データベースマイグレーション

# マイグレーションファイルの生成
pnpm db:generate

# ローカル環境にマイグレーション適用
pnpm db:migrate:dev

# 本番環境にマイグレーション適用
pnpm db:migrate:prod

6. Supabase 認証設定

Supabase ダッシュボードで以下を設定：

1. Authentication > URL Configuration

   • Redirect URLs に http://localhost:3000/auth/callback を追加（開発環境）
   • 本番環境の URL も追加

2. Authentication > Email Templates

   • Magic Link のテンプレートを確認（必要に応じてカスタマイズ）

🏃 開発

ローカル開発サーバー起動

pnpm dev

Cloudflare Pages でローカル実行

pnpm pages:dev

📦 デプロイ

Cloudflare Pages へのデプロイ

pnpm pages:deploy

GitHub 連携

1. GitHub リポジトリに push
2. Cloudflare Pages で GitHub リポジトリを連携
3. ビルドコマンド: pnpm pages:build
4. 環境変数を Cloudflare Pages の設定で追加

📚 主な機能

• ✅ Magic Link 認証
• ✅ カード（学習項目）の作成・編集・削除
• ✅ 忘却曲線に基づいたレビュー機能
• ✅ ダッシュボード（今日のレビュー数、全カード数など）

🗂️ プロジェクト構造

src/
├── app/                    # Next.js App Router
│   ├── api/               # API Routes
│   ├── auth/              # 認証関連
│   ├── cards/             # カード管理画面
│   ├── home/              # ダッシュボード
│   ├── login/             # ログイン画面
│   └── review/           # レビュー画面
├── lib/                   # ユーティリティ
│   ├── supabase/         # Supabase クライアント
│   └── spaced-repetition.ts  # 記憶アルゴリズム
└── server/               # サーバーサイド
    ├── db/               # データベース設定
    └── functions/       # サーバー関数

📝 ライセンス

MIT