Merge pull request #272 from DevLoversTeam/sl/feat/quiz

(SP: 1) [Frontend] Improve Lighthouse Performance and SEO scores for quiz pages

Author: ViktorSvertoka

frontend/.browserslistrc

@@ -0,0 +1 @@
+defaults and fully supports es6-module

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

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { notFound, redirect } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
@@ -6,6 +7,23 @@ import { stripCorrectAnswers } from '@/db/queries/quiz';
 import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 import { getCurrentUser } from '@/lib/auth';
 
+type MetadataProps = { params: Promise<{ locale: string; slug: string }> };
+
+export async function generateMetadata({ params }: MetadataProps): Promise<Metadata> {
+  const { locale, slug } = await params;
+  const t = await getTranslations({ locale, namespace: 'quiz.page' });
+  const quiz = await getQuizBySlug(slug, locale);
+  
+  if (!quiz) {
+    return { title: t('notFoundTitle') };
+  }
+  
+  return {
+    title: `${quiz.title} | ${t('metaSuffix')}`,
+    description: quiz.description ?? t('metaDescriptionFallback', { title: quiz.title ?? '' }),
+  };
+}
+
 interface QuizPageProps {
   params: Promise<{ locale: string; slug: string }>;
   searchParams: Promise<{ seed?: string }>;

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

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 
 import QuizzesSection from '@/components/quiz/QuizzesSection';
@@ -7,6 +8,16 @@ import { getCurrentUser } from '@/lib/auth';
 
 type PageProps = { params: Promise<{ locale: string }> };
 
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'quiz.list' });
+  
+  return {
+    title: t('metaTitle'),
+    description: t('metaDescription'),
+  };
+}
+
 export const dynamic = 'force-dynamic';
 
 export default async function QuizzesPage({ params }: PageProps) {

frontend/app/globals.css

@@ -1,5 +1,4 @@
 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
-@import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
 @import 'tailwindcss';
 
 @custom-variant dark (&:is(.dark *));
@@ -146,11 +145,13 @@
   border-color: var(--qa-accent);
 }
 
-.no-select {
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
+.no-select,
+.no-select * {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 @keyframes progress {

frontend/components/quiz/CountdownTimer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TriangleAlert } from 'lucide-react';
+import { Clock, TriangleAlert } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
@@ -21,19 +21,33 @@ export function CountdownTimer({
 }: CountdownTimerProps) {
   const t = useTranslations('quiz.timer');
   const endTime = startedAt.getTime() + timeLimitSeconds * 1000;
-  const [remainingSeconds, setRemainingSeconds] = useState(() =>
-    Math.max(0, Math.floor((endTime - Date.now()) / 1000))
-  );
+  const [remainingSeconds, setRemainingSeconds] = useState(timeLimitSeconds);
+  const [isSynced, setIsSynced] = useState(false);
+  const [prevEndTime, setPrevEndTime] = useState(endTime);
+
+    if (endTime !== prevEndTime) {
+      setPrevEndTime(endTime);
+      setIsSynced(false);
+      setRemainingSeconds(timeLimitSeconds);
+    }
+
 
   useEffect(() => {
     if (!isActive) return;
 
+    let synced = false;
+
     const interval = setInterval(() => {
       const now = Date.now();
       const remaining = Math.max(0, Math.floor((endTime - now) / 1000));
 
       setRemainingSeconds(remaining);
 
+      if (!synced) {
+        synced = true;
+        setIsSynced(true);
+      }
+
       if (remaining === 0) {
         clearInterval(interval);
         queueMicrotask(onTimeUp);
@@ -43,11 +57,13 @@ export function CountdownTimer({
     return () => clearInterval(interval);
   }, [isActive, onTimeUp, endTime]);
 
+
   useEffect(() => {
     if (!isActive) return;
 
     const handleVisibilityChange = () => {
       if (!document.hidden) {
+        setIsSynced(false);
         const remaining = Math.max(
           0,
           Math.floor((endTime - Date.now()) / 1000)
@@ -100,10 +116,12 @@ export function CountdownTimer({
 
       <div className="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
         <div
-          className={cn(
-            'h-full transition-all duration-1000 ease-linear',
-            getProgressBarColor()
-          )}
+            className={cn(
+              'h-full',
+              isSynced && 'transition-all duration-1000 ease-linear',
+              getProgressBarColor()
+            )}
+
           style={{ width: `${percentage}%` }}
         />
       </div>
@@ -120,7 +138,7 @@ export function CountdownTimer({
             </>
           ) : (
             <>
-              <span aria-hidden="true">⏰</span> {t('hurryUp')}
+              <Clock className="inline h-4 w-4" aria-hidden="true" /> {t('hurryUp')}
             </>
           )}
         </p>

frontend/db/seed-quiz-javascript.ts

@@ -1,3 +1,5 @@
+import 'dotenv/config';
+
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
@@ -75,7 +77,7 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
   return partData.questions;
 }
 
-async function ensureQuizExists(): Promise<string> {
+async function ensureQuizExists(forceDelete: boolean): Promise<string> {
   console.log('Ensuring quiz exists...');
 
   const [category] = await db
@@ -93,14 +95,24 @@ async function ensureQuizExists(): Promise<string> {
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
+
   if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(
-        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
-      );
+    const existingAttempts = await db
+      .select()
+      .from(quizAttempts)
+      .where(eq(quizAttempts.quizId, existing.id))
+      .limit(1);
+
+    if (existingAttempts.length > 0) {
+      if (!forceDelete) {
+        throw new Error(
+          `Quiz ${QUIZ_METADATA.slug} has existing attempts. Use --force to delete them.`
+        );
+      }
+
+      console.log('Deleting existing attempts (--force flag used)...');
+      await db.delete(quizAttempts).where(eq(quizAttempts.quizId, existing.id));
+      console.log('Attempts deleted.');
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
@@ -211,22 +223,24 @@ async function seedQuestions(
 
 async function seedQuizFromJson() {
   const args = process.argv.slice(2);
-  const partArg = args[0];
+  const forceDelete = args.includes('--force');
+  const partArg = args.find(arg => arg !== '--force');
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log(
-      'Usage: npx tsx db/seeds/seed-quiz-javascript.ts <part-number>'
-    );
-    console.log('Example: npx tsx db/seeds/seed-quiz-javascript.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-javascript.ts all');
+    console.log('Usage: npx tsx db/seed-quiz-javascript.ts <part-number> [--force]');
+    console.log('Example: npx tsx db/seed-quiz-javascript.ts 1');
+    console.log('         npx tsx db/seed-quiz-javascript.ts all --force');
     process.exit(1);
   }
 
   console.log('Starting JavaScript quiz seed...\n');
+  if (forceDelete) {
+    console.log('WARNING: --force flag used. Existing attempts will be deleted.\n');
+  }
 
   try {
-    const quizId = await ensureQuizExists();
+    const quizId = await ensureQuizExists(forceDelete);
 
     if (partArg.toLowerCase() === 'all') {
       console.log('Uploading all parts...\n');

frontend/hooks/useAntiCheat.ts

@@ -22,6 +22,7 @@ export function useAntiCheat(isActive: boolean = true) {
   const [isTabActive, setIsTabActive] = useState(true);
   const [showWarning, setShowWarning] = useState(false);
   const warningTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastInteractionWasTouch = useRef(false);
 
   const addViolation = useCallback(
     (type: AntiCheatViolation['type']) => {
@@ -64,7 +65,10 @@ export function useAntiCheat(isActive: boolean = true) {
 
     const handleContextMenu = (e: MouseEvent) => {
       e.preventDefault();
-      addViolation('context-menu');
+      
+      if (!lastInteractionWasTouch.current) {
+        addViolation('context-menu');
+      }
     };
 
     const handleVisibilityChange = () => {
@@ -76,16 +80,29 @@ export function useAntiCheat(isActive: boolean = true) {
       }
     };
 
+    const handleTouchStart = () => {
+      lastInteractionWasTouch.current = true;
+    };
+
+    const handleMouseDown = () => {
+      lastInteractionWasTouch.current = false;
+    };
+
     document.addEventListener('copy', handleCopy);
     document.addEventListener('paste', handlePaste);
     document.addEventListener('contextmenu', handleContextMenu);
     document.addEventListener('visibilitychange', handleVisibilityChange);
+    document.addEventListener('touchstart', handleTouchStart, { passive: true });
+    document.addEventListener('mousedown', handleMouseDown);
+
 
     return () => {
       document.removeEventListener('copy', handleCopy);
       document.removeEventListener('paste', handlePaste);
       document.removeEventListener('contextmenu', handleContextMenu);
       document.removeEventListener('visibilitychange', handleVisibilityChange);
+      document.removeEventListener('touchstart', handleTouchStart);
+      document.removeEventListener('mousedown', handleMouseDown);
 
       if (warningTimeoutRef.current) {
         clearTimeout(warningTimeoutRef.current);

frontend/messages/en.json

@@ -85,12 +85,17 @@
     "metaTitle": "Quizzes | DevLovers",
     "metaDescription": "Test your knowledge with interactive quizzes",
     "page": {
+      "notFoundTitle": "Quiz Not Found",
+      "metaSuffix": "DevLovers Quiz",
+      "metaDescriptionFallback": "Take the {title} quiz and test your knowledge.",
       "noQuestions": "No questions available for this quiz",
       "questionsLabel": "Questions",
       "timeLabel": "Time",
       "minutes": "min"
     },
     "list": {
+      "metaTitle": "Quizzes | DevLovers",
+      "metaDescription": "Test your knowledge with interactive quizzes on React, Angular, Vue, Node.js and more.",
       "title": "Quizzes",
       "practice": "Practice",
       "subtitle": "Choose a quiz to test your knowledge",

frontend/messages/pl.json

@@ -85,12 +85,17 @@
     "metaTitle": "Quizy | DevLovers",
     "metaDescription": "Sprawdź swoją wiedzę dzięki interaktywnym quizom",
     "page": {
+      "notFoundTitle": "Quiz nie znaleziony",
+      "metaSuffix": "Quiz DevLovers",
+      "metaDescriptionFallback": "Rozwiąż quiz {title} i sprawdź swoją wiedzę.",
       "noQuestions": "Brak dostępnych pytań dla tego quizu",
       "questionsLabel": "Pytania",
       "timeLabel": "Czas",
       "minutes": "min"
     },
     "list": {
+      "metaTitle": "Quizy | DevLovers",
+      "metaDescription": "Sprawdź swoją wiedzę z React, Angular, Vue, Node.js i innych technologii.",
       "title": "Quizy",
       "practice": "Ćwicz",
       "subtitle": "Wybierz quiz, aby sprawdzić swoją wiedzę",

frontend/messages/uk.json

@@ -85,12 +85,17 @@
     "metaTitle": "Квізи | DevLovers",
     "metaDescription": "Перевірте свої знання з допомогою інтерактивних квізів",
     "page": {
+      "notFoundTitle": "Квіз не знайдено",
+      "metaSuffix": "Квіз DevLovers",
+      "metaDescriptionFallback": "Пройдіть квіз {title} та перевірте свої знання.",
       "noQuestions": "Немає питань для цього квізу",
       "questionsLabel": "Питань",
       "timeLabel": "Час",
       "minutes": "хв"
     },
     "list": {
+      "metaTitle": "Квізи | DevLovers",
+      "metaDescription": "Перевірте свої знання з React, Angular, Vue, Node.js та інших технологій.",
       "title": "Квізи",
       "practice": "Практика",
       "subtitle": "Оберіть квіз, щоб перевірити свої знання",