(SP: 5) [Quiz] Redis caching + guest session fix + cleanup (#263)

* feat(quiz-ui): quiz UI polish - tabs, category accents, color scheme (issues #181, #193, #194)

- Refactor QaTabButton to shared CategoryTabButton component
- Add category accent colors to QuizCard, buttons, progress indicators
- Standardize colors with CSS variables, traffic light timer
- Add DynamicGridBackground to quizzes list page
- Border-only answer feedback, semi-transparent progress styles

* docs: update .gitignore

* fix(quiz): align disqualification threshold with warning banner

Changed violationsCount > 3 to >= 3 in QuizResult points block
to match the warning banner threshold at line 124.

* feat(quiz-testing): add quiz unit tests

- Configure Vitest for quiz module
- Add test factories and setup utilities
- Add quiz-crypto tests (13 tests)
- Add quiz-session tests (12 tests)

* test(quiz): add integration tests for verify-answer API and useAntiCheat hook (#199)

- verify-answer.test.ts: 8 tests for API endpoint
  - Correct/wrong answer verification
  - Validation errors (missing fields, tampered data)
  - Security: rejects modified encrypted answers

- quiz-anticheat.test.ts: 10 tests for useAntiCheat hook
  - Detects copy, paste, context-menu, tab-switch events
  - Respects isActive flag
  - Reset and cleanup functionality

Total quiz tests: 52 (9 setup + 25 unit + 18 integration)

* test(quiz): expand test coverage to 90%+ with hooks, API routes, and UI flow

Add 28 new tests covering:
- useQuizSession hook (6 tests)
- useQuizGuards hook (8 tests)
- guest-quiz storage (5 tests)
- guest-result API route (5 tests)
- quiz-slug API route (3 tests)
- QuizContainer UI flow (1 test)

Coverage: 35% -> 90.94% (quiz scope)
Tests: 52 -> 80

* chore: remove coverage-quiz from git, add to .gitignore

* chore: add coverage-quiz to .gitignore, fix quiz guards test

* fix(a11y): improve quiz accessibility and i18n compliance

* fix(sl/feat/quiz): replace with correct name for react icon

* feat(quiz): implement Redis caching + session fixes + cleanup

Closes #260, #261, #262

- Add quiz-answers-redis.ts with getOrCreateQuizAnswersCache()
- Cache correct answers per quiz (12h TTL)
- Replace AES-256-GCM decryption with O(1) Redis lookup
- Add initializeQuizCache server action
- Update verify-answer route to use Redis

- Allow restoring 'completed' sessions (not just 'in_progress')
- Only clear session for authenticated users after submit
- Guest result screen now survives language switch

- Delete PendingResultHandler.tsx (never executes)
- Delete start-session/route.ts (broken import, unused)
- Delete quiz-crypto.ts (AES replaced by Redis)
- Delete quiz-crypto.test.ts (tests dead code)
- Rewrite verify-answer.test.ts for Redis API (8 tests)
- Fix quiz-session.test.ts for completed session restore

* chore(quiz): delete unused start-session route

Part of #262 cleanup - route had broken import after Redis migration.

* git commit -m "fix(quiz): add NaN seed validation and cache/DB fallback

- Validate seed param to prevent NaN breaking question shuffle
- Add cache recovery in verify-answer when Redis cache expires
- Add DB fallback in getCorrectAnswer when Redis unavailable

Author: LesiaUKR

frontend/actions/quiz.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { and,eq, inArray } from 'drizzle-orm';
+import { eq, inArray } from 'drizzle-orm';
 
 import { db } from '@/db';
 import { awardQuizPoints, calculateQuizPoints } from '@/db/queries/points';
@@ -255,3 +255,22 @@ export async function submitQuizAttempt(
     };
   }
 }
+
+export async function initializeQuizCache(
+  quizId: string
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    const { getOrCreateQuizAnswersCache } =
+      await import('@/lib/quiz/quiz-answers-redis');
+    const success = await getOrCreateQuizAnswersCache(quizId);
+
+    if (!success) {
+      return { success: false, error: 'Quiz not found' };
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to initialize quiz cache:', error);
+    return { success: false, error: 'Internal server error' };
+  }
+}

frontend/app/[locale]/dashboard/page.tsx

@@ -7,7 +7,6 @@ import { StatsCard } from '@/components/dashboard/StatsCard';
 import { getUserQuizStats } from '@/db/queries/quiz';
 import { getUserProfile } from '@/db/queries/users';
 import { redirect } from '@/i18n/routing';
-import { Link } from '@/i18n/routing';
 import { getCurrentUser } from '@/lib/auth';
 
 export async function generateMetadata({
@@ -85,17 +84,17 @@ export default async function DashboardPage({
         className="pointer-events-none absolute inset-0 -z-10"
         aria-hidden="true"
       >
-        <div className="absolute inset-0 bg-gradient-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
-        <div className="absolute top-0 left-1/4 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
-        <div className="absolute right-0 bottom-0 h-[26rem] w-[26rem] rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
-        <div className="absolute bottom-10 left-10 h-[20rem] w-[20rem] rounded-full bg-pink-300/20 blur-3xl dark:bg-fuchsia-500/10" />
+        <div className="absolute inset-0 bg-linear-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
+        <div className="absolute top-0 left-1/4 h-96 w-xl -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
+        <div className="absolute right-0 bottom-0 h-104 w-104 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
+        <div className="absolute bottom-10 left-10 h-80 w-[20rem] rounded-full bg-pink-300/20 blur-3xl dark:bg-fuchsia-500/10" />
       </div>
 
       <div className="relative z-10 mx-auto max-w-5xl px-6 py-12">
         <header className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-center">
           <div>
             <h1 className="text-4xl font-black tracking-tight drop-shadow-sm md:text-5xl">
-              <span className="bg-gradient-to-r from-sky-400 via-violet-400 to-pink-400 bg-clip-text text-transparent dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500">
+              <span className="bg-linear-to-r from-sky-400 via-violet-400 to-pink-400 bg-clip-text text-transparent dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500">
                 {t('title')}
               </span>
             </h1>

frontend/app/[locale]/quiz/[slug]/page.tsx

@@ -1,12 +1,10 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
-import { PendingResultHandler } from '@/components/quiz/PendingResultHandler';
 import { QuizContainer } from '@/components/quiz/QuizContainer';
 import { stripCorrectAnswers } from '@/db/queries/quiz';
 import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 import { getCurrentUser } from '@/lib/auth';
-import { createEncryptedAnswersBlob } from '@/lib/quiz/quiz-crypto';
 
 interface QuizPageProps {
   params: Promise<{ locale: string; slug: string }>;
@@ -29,10 +27,19 @@ export default async function QuizPage({
     notFound();
   }
 
-  const seed = seedParam ? parseInt(seedParam, 10) : Date.now();
+  if (!seedParam) {
+    // eslint-disable-next-line react-hooks/purity -- redirect throws, value never used in render
+    redirect(`/${locale}/quiz/${slug}?seed=${Date.now()}`);
+  }
+
+  const seed = Number.parseInt(seedParam, 10);
+  if (Number.isNaN(seed)) {
+     // eslint-disable-next-line react-hooks/purity -- redirect throws, value never used in render
+    redirect(`/${locale}/quiz/${slug}?seed=${Date.now()}`);
+  }
+  
   const questions = await getQuizQuestionsRandomized(quiz.id, locale, seed);
 
-  const encryptedAnswers = createEncryptedAnswersBlob(questions);
   const clientQuestions = stripCorrectAnswers(questions);
 
   if (!questions.length) {
@@ -73,13 +80,11 @@ export default async function QuizPage({
           quizSlug={slug}
           quizId={quiz.id}
           questions={clientQuestions}
-          encryptedAnswers={encryptedAnswers}
           userId={user?.id ?? null}
           timeLimitSeconds={quiz.timeLimitSeconds ?? questions.length * 30}
           seed={seed}
           categorySlug={quiz.categorySlug}
         />
-        {user && <PendingResultHandler userId={user.id} />}
       </div>
     </div>
   );

frontend/app/api/auth/github/callback/route.ts

@@ -3,7 +3,7 @@ import { NextRequest, NextResponse } from 'next/server';
 
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
-import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { setAuthCookie, signAuthToken } from '@/lib/auth';
 import { consumeOAuthState } from '@/lib/auth/oauth-state';
 import { authEnv } from '@/lib/env/auth';
 

frontend/app/api/auth/google/callback/route.ts

@@ -3,7 +3,7 @@ import { NextRequest, NextResponse } from 'next/server';
 
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
-import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { setAuthCookie, signAuthToken } from '@/lib/auth';
 import { consumeOAuthState } from '@/lib/auth/oauth-state';
 import { authEnv } from '@/lib/env/auth';
 

frontend/app/api/auth/login/route.ts

@@ -6,7 +6,7 @@ import { z } from 'zod';
 
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
-import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { setAuthCookie, signAuthToken } from '@/lib/auth';
 
 export const runtime = 'nodejs';
 

frontend/app/api/debug/redis-clear/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from 'next/server';
+
+import { getRedisClient } from '@/lib/redis';
+
+export async function DELETE() {
+  if (process.env.NODE_ENV !== 'development') {
+    return NextResponse.json({ error: 'Dev only' }, { status: 403 });
+  }
+
+  const redis = getRedisClient();
+  if (!redis) {
+    return NextResponse.json({ error: 'No Redis client' }, { status: 500 });
+  }
+
+  const keys = await redis.keys('quiz:answers:*');
+
+  if (keys.length > 0) {
+    await redis.del(...keys);
+  }
+
+  return NextResponse.json({ deleted: keys.length });
+}

frontend/app/api/debug/redis/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server';
+
+import { getRedisClient } from '@/lib/redis';
+
+export async function GET() {
+  if (process.env.NODE_ENV === 'production') {
+    return NextResponse.json({ error: 'Not available' }, { status: 403 });
+  }
+
+  const redis = getRedisClient();
+  if (!redis) {
+    return NextResponse.json({ error: 'Redis not configured' });
+  }
+
+  const keys = await redis.keys('quiz:answers:*');
+  const data: Record<string, unknown> = {};
+
+  for (const key of keys) {
+    data[key] = await redis.get(key);
+  }
+
+  return NextResponse.json({
+    count: keys.length,
+    keys,
+    data,
+  });
+}

frontend/app/api/questions/[category]/route.ts

@@ -1,4 +1,4 @@
-import { and, eq, ilike,sql } from 'drizzle-orm';
+import { and, eq, ilike, sql } from 'drizzle-orm';
 import { NextResponse } from 'next/server';
 
 import { db } from '@/db';

frontend/app/api/quiz/verify-answer/route.ts

@@ -1,49 +1,48 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 
-import { decryptAnswers } from '@/lib/quiz/quiz-crypto';
+import { getCorrectAnswer, getOrCreateQuizAnswersCache } from '@/lib/quiz/quiz-answers-redis';
 
-interface VerifyRequest {
-  questionId: string;
-  answerId: string;
-  encryptedAnswers: string;
-}
+export const runtime = 'nodejs';
 
-export async function POST(request: NextRequest) {
+export async function POST(req: Request) {
   try {
-    const body: VerifyRequest = await request.json();
-    const { questionId, answerId, encryptedAnswers } = body;
+    const body = await req.json().catch(() => null);
 
-    if (!questionId || !answerId || !encryptedAnswers) {
+    if (!body?.quizId || !body?.questionId || !body?.selectedAnswerId) {
       return NextResponse.json(
-        { error: 'Missing required fields' },
+        { success: false, error: 'Missing required fields' },
         { status: 400 }
       );
     }
 
-    const correctAnswersMap = decryptAnswers(encryptedAnswers);
+    const { quizId, questionId, selectedAnswerId } = body;
 
-    if (!correctAnswersMap) {
-      return NextResponse.json(
-        { error: 'Invalid encrypted data' },
-        { status: 400 }
-      );
-    }
+    let correctAnswerId = await getCorrectAnswer(quizId, questionId);
 
-    const correctAnswerId = correctAnswersMap[questionId];
+    if (!correctAnswerId) {
+      const cacheReady = await getOrCreateQuizAnswersCache(quizId);
+      if (cacheReady) {
+        correctAnswerId = await getCorrectAnswer(quizId, questionId);
+      }
+    }
 
     if (!correctAnswerId) {
       return NextResponse.json(
-        { error: 'Question not found' },
+        { success: false, error: 'Question not found in cache' },
         { status: 404 }
       );
     }
 
+    const isCorrect = selectedAnswerId === correctAnswerId;
+
     return NextResponse.json({
-      isCorrect: answerId === correctAnswerId,
+      success: true,
+      isCorrect,
     });
-  } catch {
+  } catch (error) {
+    console.error('Failed to verify answer:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      { success: false, error: 'Internal server error' },
       { status: 500 }
     );
   }