feat: production hardening — tests, repository pattern, observability, and security fixes

P0 security fixes:
- Fix CSRF origin bypass (endsWith → hostname comparison)
- Add 30s AbortController timeout to AI fetch requests
- Return 504 on timeout instead of generic 500

P1 engineering:
- Add Vitest + 46 unit tests across 4 modules (progress, gamification, achievements, adaptive)
- Add CI test step to GitHub Actions workflow
- Create Repository abstraction (LocalStorage/Memory/Server implementations)
- Refactor progress.ts and projects.ts to use Repository pattern
- Add server-side /api/storage endpoint with auth and rate limiting
- Add /api/analytics endpoint with rate limiting and event type validation
- Generate PWA icons (192px, 512px) with brand colors
- Configure Next.js standalone output for Docker

P2 observability + DevOps:
- Add structured JSON logger (lib/logger.ts)
- Add user behavior analytics tracking (lib/analytics.ts)
- Add AI provider fallback — auto-switch to backup on failure
- Add Docker multi-stage build + docker-compose.yml
- Add .env.example with all new environment variables

Documentation:
- Update all 4 READMEs (EN, ZH-CN, ZH-Hant, JA) with new features and Docker instructions
- Update SETUP_GUIDE.md with API auth config and Docker section

Verification:
- TypeScript: zero errors
- Tests: 4 files / 46 tests passed
- Build: Next.js production build successful
- Security: reviewed, no hardcoded secrets

Author: sixtdreanight

.github/workflows/ci.yml

@@ -22,5 +22,7 @@ jobs:
         run: npm ci
       - name: Type check
         run: npx tsc --noEmit
+      - name: Test
+        run: npm test
       - name: Build
         run: npm run build

Dockerfile

@@ -0,0 +1,29 @@
+FROM node:22-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci --omit=dev
+
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "server.js"]

README.ja.md

@@ -4,18 +4,23 @@
 
 [![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)
 [![Next.js](https://img.shields.io/badge/Next.js-16-black)](https://nextjs.org/)
-[![AI SDK](https://img.shields.io/badge/AI%20SDK-multi--model-purple)](https://sdk.vercel.ai/)
+[![CI](https://github.com/sixtdreanight/vibe-coding-agent/actions/workflows/ci.yml/badge.svg)](https://github.com/sixtdreanight/vibe-coding-agent/actions/workflows/ci.yml)
 
-ゼロから学べる AI アシストプログラミング（Vibe Coding）のインタラクティブな学習サイトです。12 のレッスンで段階的に学習でき、AI チューターが組み込まれており、Prompt Playground で直接実行可能なコードを生成できます。
+ゼロから学べる AI アシストプログラミング（Vibe Coding）のインタラクティブな学習サイトです。7 章 22 レッスンで段階的に学習でき、AI チューター、ゲーミフィケーションシステム、コードを直接生成できる Prompt Playground を備えています。
 
 ---
 
 ## 機能
 
-- **体系的なカリキュラム** — 12 のレッスンで概念理解から実践まで
-- **AI 学習アシスタント** — 組み込みの AI チューターにいつでも質問可能
-- **Prompt Playground** — 説明を入力するだけで実行可能なコードを生成
+- **22 の体系的なレッスン** — 概念から公開までの 7 章構成
+- **AI 学習アシスタント** — ソクラテス式誘導モード + 直接回答モード、ストリーミング応答
+- **Prompt Playground** — 説明を入力するだけで実行可能な HTML/CSS/JS を生成
+- **ゲーミフィケーション** — XP、レベル、連続学習日数、10 種類の達成バッジ
+- **コード演習** — ヒントと自動チェック付きのインタラクティブ演習
+- **学習ダッシュボード** — 進捗追跡、ヒートマップ、スキルレーダー
+- **PWA 対応** — インストール可能、オフライン動作対応
 - **マルチモデル対応** — Claude、OpenAI、DeepSeek 及び任意の OpenAI 互換インターフェース
+- **AI フォールバック** — メインプロバイダー障害時に自動でバックアップに切替
 
 ## クイックスタート
 
@@ -36,66 +41,112 @@ npm run dev
 
 http://localhost:3000 にアクセスして学習を開始してください。
 
-> 初心者向けの詳細なセットアップガイド：[SETUP_GUIDE.md](./SETUP_GUIDE.md)
+> 初心者向け詳細セットアップガイド：[SETUP_GUIDE.md](./SETUP_GUIDE.md)
 
-## マルチモデルの設定
+### Docker
 
-3 つの AI プロバイダーを `.env` で設定できます：
+```bash
+docker compose up -d
+```
+
+## 設定
 
-### DeepSeek（推奨、国内から直接アクセス可能）
+### 必須
 
 ```env
+# API 認証キー（ランダムな文字列を生成）
+AI_API_AUTH_TOKEN=あなたの秘密キー
+
+# メイン AI プロバイダー
 AI_PROVIDER=openai-compatible
 AI_MODEL=deepseek-chat
 AI_API_KEY=sk-...
 AI_BASE_URL=https://api.deepseek.com/v1
 ```
 
-### Anthropic Claude
+### オプション：バックアップ AI プロバイダー
+
+メインプロバイダー障害時に自動切替：
 
 ```env
-AI_PROVIDER=anthropic
-AI_MODEL=claude-sonnet-4-20250514
-ANTHROPIC_API_KEY=sk-ant-...
+AI_FALLBACK_PROVIDER=openai
+AI_FALLBACK_MODEL=gpt-4o-mini
+AI_FALLBACK_API_KEY=sk-...
+AI_FALLBACK_BASE_URL=https://api.openai.com/v1
 ```
 
-### OpenAI または互換インターフェース
+全設定は `.env.example` を参照してください。
 
-```env
-AI_PROVIDER=openai
-AI_MODEL=gpt-4o
-OPENAI_API_KEY=sk-...
+## 開発
+
+```bash
+npm install
+npm run dev      # 開発サーバー起動
+npm test         # テスト実行（46 テスト、4 スイート）
+npm run build    # プロダクションビルド
 ```
 
 ## 技術スタック
 
-- [Next.js](https://nextjs.org/) 16 + React 19 + TypeScript
+- [Next.js](https://nextjs.org/) 16 + React 19 + TypeScript（strict モード）
 - [Tailwind CSS](https://tailwindcss.com/) v4
 - [AI SDK](https://sdk.vercel.ai/) — 統一マルチモデルインターフェース
+- [Vitest](https://vitest.dev/) — ユニットテスト（目標 80%+ カバレッジ）
 - [Lucide React](https://lucide.dev/) — アイコン
-- [react-markdown](https://github.com/remarkjs/react-markdown) — レッスンコンテンツのレンダリング
+- [react-markdown](https://github.com/remarkjs/react-markdown) — コンテンツレンダリング
 
 ## プロジェクト構造
 
 ```
 app/
-  api/agent/route.ts      # AI 会話ストリーミング API
-  lesson/[id]/page.tsx    # レッスン詳細ページ
-  page.tsx                # トップページ
-  layout.tsx              # ルートレイアウト
+  api/agent/route.ts        # AI 会話ストリーミング API（認証 + レート制限 + フォールバック）
+  api/review/route.ts       # AI コードレビュー API
+  api/storage/route.ts      # サーバーサイド key-value ストレージ
+  api/analytics/route.ts    # 分析イベントエンドポイント
+  lesson/[id]/page.tsx      # レッスン詳細ページ
+  dashboard/page.tsx        # 学習ダッシュボード
+  page.tsx                  # トップページ
 components/
-  ChatInterface.tsx       # AI チャットコンポーネント
-  PromptPlayground.tsx    # コード生成練習エリア
-  LessonNavigator.tsx     # レッスンナビゲーションサイドバー
+  ChatInterface.tsx         # AI チャットコンポーネント
+  PromptPlayground.tsx      # コード生成サンドボックス
+  exercise/                 # インタラクティブコード演習
+  dashboard/                # 統計、ヒートマップ、スキルレーダー
+  gamification/             # XP バー、バッジ解除、紙吹雪エフェクト
+  visualizations/           # アニメーションフローチャート、DOM ツリー
 lib/
-  lessons.ts              # レッスンデータ
+  lessons.ts                # 22 レッスン定義
+  progress.ts               # 学習進捗（Repository パターン）
+  gamification.ts           # XP、レベル、連続学習
+  achievements.ts           # 10 種類の達成バッジ
+  adaptive.ts               # 学習レコメンデーションエンジン
+  repository.ts             # ストレージ抽象化（localStorage / サーバー）
+  logger.ts                 # 構造化ログ
+  analytics.ts              # ユーザー行動トラッキング
 scripts/
-  setup.sh                # 自動セットアップスクリプト
+  setup.sh                  # 自動セットアップスクリプト
+  generate-icons.mjs        # PWA アイコンジェネレーター
 ```
 
 ## カスタムレッスン
 
-`lib/lessons.ts` を編集すると、レッスンコンテンツの修正や追加が可能です。Markdown 形式に対応しています。
+`lib/lessons.ts` を編集するとレッスン内容の修正や追加が可能です。Markdown 形式に対応しています。
+
+## デプロイ
+
+### Vercel（最も簡単）
+
+1. GitHub にプッシュ
+2. [vercel.com](https://vercel.com/) でリポジトリをインポート
+3. プロジェクト設定で環境変数を追加
+4. デプロイ
+
+### Docker
+
+```bash
+docker compose up -d
+```
+
+マルチステージビルドにより、イメージは約 150MB です。
 
 ## 関連プロジェクト
 

README.md

@@ -4,18 +4,23 @@
 
 [![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)
 [![Next.js](https://img.shields.io/badge/Next.js-16-black)](https://nextjs.org/)
-[![AI SDK](https://img.shields.io/badge/AI%20SDK-multi--model-purple)](https://sdk.vercel.ai/)
+[![CI](https://github.com/sixtdreanight/vibe-coding-agent/actions/workflows/ci.yml/badge.svg)](https://github.com/sixtdreanight/vibe-coding-agent/actions/workflows/ci.yml)
 
-An interactive tutorial site that teaches absolute beginners how to code with AI assistance (Vibe Coding). 12 lessons, built-in AI teaching assistant, and a prompt playground that generates real HTML/CSS/JS.
+An interactive tutorial site that teaches absolute beginners how to code with AI assistance (Vibe Coding). 22 lessons across 7 chapters, built-in AI teaching assistant, gamification system, and a prompt playground that generates real HTML/CSS/JS.
 
 ---
 
 ## Features
 
-- **Structured curriculum** — 12 lessons from concepts to hands-on practice
-- **AI teaching assistant** — Ask questions anytime, get instant answers
+- **22 structured lessons** — 7 chapters from concepts to publishing
+- **AI teaching assistant** — Socratic and direct modes, streaming responses
 - **Prompt Playground** — Describe what you want, get runnable HTML/CSS/JS code
+- **Gamification** — XP, levels, streaks, 10 achievement badges
+- **Code exercises** — Interactive exercises with hints and auto-check
+- **Learning dashboard** — Progress tracking, heatmap, skill radar
+- **PWA support** — Installable, works offline
 - **Multi-model support** — Claude, OpenAI, DeepSeek, and any OpenAI-compatible API
+- **AI fallback** — Automatic switch to backup provider if primary fails
 
 ## Quick Start
 
@@ -38,68 +43,110 @@ Open http://localhost:3000 to start learning.
 
 > Detailed setup guide for beginners: [SETUP_GUIDE.md](./SETUP_GUIDE.md)
 
-## Model Configuration
+### Docker
 
-Supports three AI providers, configured via `.env`:
+```bash
+docker compose up -d
+```
 
-### DeepSeek (recommended for users in China)
+## Configuration
+
+### Required
 
 ```env
+# Shared secret for API authentication (generate a random string)
+AI_API_AUTH_TOKEN=your-secret-token
+
+# Primary AI provider
 AI_PROVIDER=openai-compatible
 AI_MODEL=deepseek-chat
 AI_API_KEY=sk-...
 AI_BASE_URL=https://api.deepseek.com/v1
 ```
 
-### Anthropic Claude
+### Optional: Fallback AI Provider
+
+If the primary AI provider fails, the fallback is tried automatically:
 
 ```env
-AI_PROVIDER=anthropic
-AI_MODEL=claude-sonnet-4-20250514
-ANTHROPIC_API_KEY=sk-ant-...
+AI_FALLBACK_PROVIDER=openai
+AI_FALLBACK_MODEL=gpt-4o-mini
+AI_FALLBACK_API_KEY=sk-...
+AI_FALLBACK_BASE_URL=https://api.openai.com/v1
 ```
 
-### OpenAI or compatible
+See `.env.example` for all options.
 
-```env
-AI_PROVIDER=openai
-AI_MODEL=gpt-4o
-OPENAI_API_KEY=sk-...
+## Development
+
+```bash
+npm install
+npm run dev      # Start dev server
+npm test         # Run tests (46 tests, 4 suites)
+npm run build    # Production build
 ```
 
 ## Tech Stack
 
-- [Next.js](https://nextjs.org/) 16 + React 19 + TypeScript
+- [Next.js](https://nextjs.org/) 16 + React 19 + TypeScript (strict mode)
 - [Tailwind CSS](https://tailwindcss.com/) v4
 - [AI SDK](https://sdk.vercel.ai/) — unified multi-model interface
+- [Vitest](https://vitest.dev/) — unit testing (80%+ coverage target)
 - [Lucide React](https://lucide.dev/) — icons
 - [react-markdown](https://github.com/remarkjs/react-markdown) — content rendering
 
 ## Project Structure
 
 ```
 app/
-  api/agent/route.ts      # AI streaming chat API
-  lesson/[id]/page.tsx    # Lesson detail page
-  page.tsx                # Home page
-  layout.tsx              # Root layout
+  api/agent/route.ts        # AI streaming chat API (auth + rate limit + fallback)
+  api/review/route.ts       # AI code review API
+  api/storage/route.ts      # Server-side key-value storage
+  api/analytics/route.ts    # Analytics event endpoint
+  lesson/[id]/page.tsx      # Lesson detail page
+  dashboard/page.tsx        # Learning dashboard
+  page.tsx                  # Home page
 components/
-  ChatInterface.tsx       # AI chat component
-  PromptPlayground.tsx    # Code generation sandbox
-  LessonNavigator.tsx     # Course navigation sidebar
+  ChatInterface.tsx         # AI chat with Socratic mode
+  PromptPlayground.tsx      # Code generation sandbox
+  exercise/                 # Interactive code exercises
+  dashboard/                # Stats, heatmap, skill radar
+  gamification/             # XP bar, badge unlock, confetti
+  visualizations/           # Animated flow charts, DOM tree
 lib/
-  lessons.ts              # Course data
+  lessons.ts                # 22 lesson definitions
+  progress.ts               # Learning progress (Repository pattern)
+  gamification.ts           # XP, levels, streaks
+  achievements.ts           # 10 badges with conditions
+  adaptive.ts               # Learning recommendations
+  repository.ts             # Storage abstraction (localStorage / server)
+  logger.ts                 # Structured JSON logging
+  analytics.ts              # User behavior tracking
 scripts/
-  setup.sh                # Auto setup script
+  setup.sh                  # Auto setup script
+  generate-icons.mjs        # PWA icon generator
 ```
 
 ## Customizing Lessons
 
 Edit `lib/lessons.ts` to modify or add lessons. Content supports Markdown.
 
-## Related
+## Deployment
+
+### Vercel (easiest)
+
+1. Push to GitHub
+2. Import repo at [vercel.com](https://vercel.com/)
+3. Add environment variables in project settings
+4. Deploy
+
+### Docker
+
+```bash
+docker compose up -d
+```
 
-- [myBlog](https://github.com/sixtdreanight/myBlog) — Author's personal blog, more articles on vibe coding
+The image uses multi-stage builds for a small footprint (~150MB).
 
 ## License