Merge pull request #278 from DevLoversTeam/develop

Release v0.5.4

Author: ViktorSvertoka

CHANGELOG.md

@@ -306,3 +306,97 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Improved stability of text selection detection for AI helper
 - Fixed locale duplication and routing edge cases
 - Reduced visual overlap issues on small mobile screens
+
+## [0.5.3] - 2026-02-04
+
+### Added
+
+- Quiz performance improvements:
+  - Redis-based answer verification replacing AES encryption
+  - Server-side quiz cache initialization to reduce verification latency
+  - Debug endpoints for inspecting and clearing quiz caches (development only)
+- Caching & data layer:
+  - Persistent Redis caching for static Quiz and Q&A data (TTL removed)
+  - Cache-aside strategy for quiz answers and Q&A content
+- Internationalization & accessibility:
+  - Translations for blog categories, CTA variants, and UI components (en / uk / pl)
+  - Improved aria-label coverage for navigation, cart, theme toggle, and search
+- Developer experience:
+  - Finalized ESLint Flat Config for frontend
+  - Stable Prettier + Tailwind class sorting workflow
+  - Consistent format-on-save behavior across the team
+
+### Changed
+
+- Quiz system refactor:
+  - Simplified answer verification flow using Redis lookups
+  - Improved guest session restoration after quiz completion
+  - Language switch now preserves quiz results for guest users
+- Layout & UI refinements:
+  - Removed duplicate padding on quiz routes
+  - Improved mobile alignment for Quiz Rules and headers
+  - Refined leaderboard component structure and lint stability
+- Shop module cleanup:
+  - Normalized component naming (PascalCase)
+  - Reorganized test structure under domain boundaries
+  - Unified active-state and hover styling across shop routes
+- Blog UI improvements:
+  - Fixed mobile paddings and spacing consistency
+  - Improved responsive header and layout behavior
+
+### Fixed
+
+- Fixed mobile layout misalignment on quiz pages
+- Fixed guest language switch issues on quiz result screen
+- Improved WCAG color contrast compliance across quiz UI
+- Fixed ESLint, Prettier, and test configuration inconsistencies
+- Removed unused files, dead code, and outdated utilities
+- Improved reliability of quiz session restoration and state handling
+
+## [0.5.4] - 2026-02-05
+
+### Added
+
+- Quiz SEO & performance improvements:
+  - Dynamic metadata generation for quizzes list and quiz detail pages
+  - i18n-aware meta titles and descriptions (en / uk / pl)
+  - Browserslist configuration targeting modern browsers
+- Quiz content updates:
+  - Expanded JavaScript Fundamentals quiz from 10 to 40 questions
+- Dashboard UI improvements:
+  - New DynamicGridBackground for cleaner visual hierarchy
+  - Refined ProfileCard and StatsCard layouts
+- Accessibility & i18n:
+  - Improved aria-label coverage across navigation and UI controls
+  - Refined English, Polish, and Ukrainian UI copy and punctuation
+
+### Changed
+
+- Quiz UX refinements:
+  - Countdown timer animation stabilized on tab switch and session restore
+  - Emoji replaced with icon-based indicators for consistent styling
+  - Anti-cheat logic improved to distinguish touch vs mouse events
+- Q&A experience improvements:
+  - Pagination scroll now targets section instead of page top
+  - Mobile tap lock resolved by clearing text selection on interaction
+- Home & layout updates:
+  - Improved code card sizing and responsive behavior
+  - Online users counter repositioned for better mobile UX
+- Shop UX refinements:
+  - Canonicalized legacy “View all” filters
+  - Improved cart CTA behavior and badge layering
+- Blog & CMS:
+  - Refactored blog image rendering and filtering logic
+  - Improved pagination state handling
+- Styling & consistency:
+  - Fixed Tailwind v4 canonical class warnings
+  - Unified token-based styling across dashboard, 404 page, and controls
+
+### Fixed
+
+- Fixed mobile anti-cheat false positives on quiz pages
+- Removed render-blocking Font Awesome CSS
+- Fixed quiz timer progress bar desynchronization
+- Improved table text contrast in dark mode
+- Fixed cart badge overlay issues in header
+- Resolved multiple mobile spacing and padding inconsistencies

frontend/.browserslistrc

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

frontend/app/[locale]/blog/[slug]/PostDetails.tsx

@@ -84,7 +84,6 @@ function renderPortableTextSpans(
     const text = child?.text || '';
     if (!text) return null;
     const marks = child?.marks || [];
-    const linkKey = marks.find(mark => linkMap.has(mark));
 
     let node: React.ReactNode = marks.length === 0 ? linkifyText(text) : text;
 
@@ -280,11 +279,14 @@ function renderPortableText(
 
     if (block?._type === 'image' && block?.url) {
       nodes.push(
-        <img
+        <Image
           key={block._key || `image-${i}`}
           src={block.url}
           alt={postTitle || 'Post image'}
-          className="my-6 rounded-xl border border-gray-200"
+          width={1200}
+          height={800}
+          sizes="100vw"
+          className="my-6 h-auto w-full rounded-xl border border-gray-200"
         />
       );
       i += 1;

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

@@ -4,6 +4,7 @@ import { PostAuthQuizSync } from '@/components/auth/PostAuthQuizSync';
 import { ProfileCard } from '@/components/dashboard/ProfileCard';
 import { QuizSavedBanner } from '@/components/dashboard/QuizSavedBanner';
 import { StatsCard } from '@/components/dashboard/StatsCard';
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 import { getUserQuizStats } from '@/db/queries/quiz';
 import { getUserProfile } from '@/db/queries/users';
 import { redirect } from '@/i18n/routing';
@@ -75,42 +76,35 @@ export default async function DashboardPage({
   };
 
   const outlineBtnStyles =
-    'inline-flex items-center justify-center rounded-full border border-slate-200 dark:border-slate-700 bg-white/50 dark:bg-slate-900/50 backdrop-blur-sm px-6 py-2 text-sm font-medium text-slate-600 dark:text-slate-300 transition-colors hover:bg-white hover:text-sky-600 dark:hover:bg-slate-800 dark:hover:text-sky-400';
+    'inline-flex items-center justify-center rounded-full border border-gray-200 dark:border-white/10 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm px-6 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 transition-colors hover:bg-white hover:text-(--accent-primary) dark:hover:bg-neutral-800 dark:hover:text-(--accent-primary)';
 
   return (
-    <main className="relative min-h-[calc(100vh-80px)] overflow-hidden">
+    <div className="min-h-screen">
       <PostAuthQuizSync />
-      <div
-        className="pointer-events-none absolute inset-0 -z-10"
-        aria-hidden="true"
+      <DynamicGridBackground
+        showStaticGrid
+        className="min-h-screen bg-gray-50 py-12 transition-colors duration-300 dark:bg-transparent"
       >
-        <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-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>
-            <p className="mt-2 text-lg text-slate-600 dark:text-slate-400">
-              {t('subtitle')}
-            </p>
+        <main className="relative z-10 mx-auto max-w-5xl px-6">
+          <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 md:text-5xl">
+                <span className="text-(--accent-primary)">{t('title')}</span>
+              </h1>
+              <p className="mt-2 text-lg text-gray-600 dark:text-gray-400">
+                {t('subtitle')}
+              </p>
+            </div>
+
+            <span className={outlineBtnStyles}>{t('supportLink')}</span>
+          </header>
+          <QuizSavedBanner />
+          <div className="grid gap-8 md:grid-cols-2">
+            <ProfileCard user={userForDisplay} locale={locale} />
+            <StatsCard stats={stats} />
           </div>
-
-          <span className={outlineBtnStyles}>{t('supportLink')}</span>
-        </header>
-        <QuizSavedBanner />
-        <div className="grid gap-8 md:grid-cols-2">
-          <ProfileCard user={userForDisplay} locale={locale} />
-          <StatsCard stats={stats} />
-        </div>
-      </div>
-    </main>
+        </main>
+      </DynamicGridBackground>
+    </div>
   );
 }

frontend/app/[locale]/layout.tsx

@@ -10,7 +10,6 @@ import { AppChrome } from '@/components/header/AppChrome';
 import { MainSwitcher } from '@/components/header/MainSwitcher';
 import { CookieBanner } from '@/components/shared/CookieBanner';
 import Footer from '@/components/shared/Footer';
-import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
 import { ThemeProvider } from '@/components/theme/ThemeProvider';
 import { locales } from '@/i18n/config';
 import { getCurrentUser } from '@/lib/auth';
@@ -73,7 +72,6 @@ export default async function LocaleLayout({
             {children}
           </MainSwitcher>
         </AppChrome>
-        <OnlineCounterPopup />
 
         <Footer />
         <Toaster position="top-right" richColors expand />

frontend/app/[locale]/q&a/page.tsx

@@ -27,19 +27,21 @@ export default async function QAPage({
   const t = await getTranslations({ locale, namespace: 'qa' });
 
   return (
-    <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
-      <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="mb-8">
-          <p className="text-sm font-semibold text-(--accent-primary)">
-            {t('pretitle')}
-          </p>
-          <h1 className="text-3xl font-bold">{t('title')}</h1>
-          <p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
-        </div>
-        <Suspense fallback={<>...</>}>
-          <QaSection />
-        </Suspense>
-      </main>
-    </DynamicGridBackground>
+    <div className="min-h-screen">
+      <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
+        <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-8">
+            <p className="text-sm font-semibold text-(--accent-primary)">
+              {t('pretitle')}
+            </p>
+            <h1 className="text-3xl font-bold">{t('title')}</h1>
+            <p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
+          </div>
+          <Suspense fallback={<>...</>}>
+            <QaSection />
+          </Suspense>
+        </main>
+      </DynamicGridBackground>
+    </div>
   );
 }

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,27 @@ 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 }>;
@@ -34,10 +56,10 @@ export default async function QuizPage({
 
   const seed = Number.parseInt(seedParam, 10);
   if (Number.isNaN(seed)) {
-     // eslint-disable-next-line react-hooks/purity -- redirect throws, value never used in render
+    // 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 clientQuestions = stripCorrectAnswers(questions);

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,18 @@ 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/[locale]/shop/cart/CartPageClient.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Minus, Plus, ShoppingBag, Trash2 } from 'lucide-react';
+import { Loader2, Minus, Plus, ShoppingBag, Trash2 } from 'lucide-react';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
@@ -411,10 +411,23 @@ export default function CartPage() {
               />
               <span className={SHOP_CTA_INSET} aria-hidden="true" />
 
-              <span className="relative z-10">
-                {isCheckingOut
-                  ? t('checkout.placing')
-                  : t('checkout.placeOrder')}
+              <span className="relative z-10 inline-flex min-w-0 items-center justify-center gap-2">
+                {isCheckingOut ? (
+                  <Loader2
+                    className="h-4 w-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                ) : null}
+
+                {/* visible label stays stable to avoid wrapping/layout shift */}
+                <span className="truncate whitespace-nowrap">
+                  {t('checkout.placeOrder')}
+                </span>
+
+                {/* screen readers can still get the “placing” state */}
+                {isCheckingOut ? (
+                  <span className="sr-only">{t('checkout.placing')}</span>
+                ) : null}
               </span>
             </button>
 

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

@@ -52,7 +52,7 @@ export default async function HomePage({
             </h2>
 
             <Link
-              href="/shop/products?filter=new"
+              href="/shop/products?filter=newest"
               className="group border-border text-muted-foreground hover:text-foreground focus-visible:ring-offset-background inline-flex items-center gap-2 rounded-md border bg-transparent px-4 py-2 text-xs font-semibold tracking-[0.25em] uppercase shadow-none transition-[transform,box-shadow,color,filter] duration-500 ease-out hover:-translate-y-0.5 hover:shadow-[var(--shop-card-shadow-hover)] hover:brightness-110 focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
               aria-label={t('viewAll')}
             >