feat(Blog): merge develop

Author: KomrakovaAnna

CHANGELOG.md

@@ -101,3 +101,61 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Prevented import breakages caused by outdated shop/platform shells
 - Improved robustness of quiz duration calculation with reliable fallbacks
 - Cleaned up redundant files, comments, and unused utilities
+
+## [0.4.0] - 2026-01-21
+
+### Added
+
+- Complete authentication lifecycle:
+  - Google & GitHub OAuth
+  - Email verification
+  - Password reset and recovery flows
+- Full internationalization (uk / en / pl) across:
+  - Authentication pages
+  - Dashboard
+  - Contacts
+  - About page
+  - Blog, Q&A, Quiz
+  - Privacy Policy and Terms & Conditions
+- New quiz content:
+  - Angular, Vue.js, Node.js quizzes
+  - HTML and React question bases
+- Advanced quiz experience:
+  - Countdown timer with persistence and auto-submit
+  - Encrypted/hashed answers to prevent client-side cheating
+  - Session persistence with quit confirmation
+  - Guest quiz results synced after authentication
+- Real-time online users counter with animated UI
+- GDPR-compliant cookie consent banner with i18n support
+- Unified platform & shop header system
+- System theme–based favicon switching (light / dark)
+- Initial SVG icon set for UI usage
+
+### Changed
+
+- Quiz UI redesigned:
+  - Category-based tabs
+  - Consistent QuizCard layout
+  - Progress indicators and status badges
+- Q&A UI refreshed:
+  - Unified layout with shared background
+  - Improved pagination and accordion readability
+- Authentication pages refactored into reusable components
+- Blog experience improved:
+  - Redesigned blog page and cards
+  - Category pages and header search
+  - Recommended posts section
+- Shop UI and layout unified across platform and admin views
+- Tailwind theme tokens centralized for theme-aware styling
+- Database migration history reset to a clean, linear baseline
+
+### Fixed
+
+- Fixed GitHub OAuth redirect and CSRF state handling
+- Fixed quiz timer issues when switching languages
+- Fixed Q&A API caching to always return fresh data
+- Resolved multiple accessibility issues (WCAG, W3C, Lighthouse 100%)
+- Hardened authentication redirects to prevent open-redirect vulnerabilities
+- Stabilized shop checkout, refund, inventory, and webhook flows
+- Improved Neon performance and reduced CU-hours usage
+- Cleaned up redundant files, comments, and legacy code

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

@@ -1,15 +1,29 @@
+import { getPlatformStats } from "@/lib/about/stats"
+import { getSponsors } from "@/lib/about/github-sponsors"
+
 import { HeroSection } from "@/components/about/HeroSection"
+import { TopicsSection } from "@/components/about/TopicsSection"
 import { FeaturesSection } from "@/components/about/FeaturesSection"
 import { PricingSection } from "@/components/about/PricingSection"
 import { CommunitySection } from "@/components/about/CommunitySection"
 
-export default function AboutPage() {
+export default async function AboutPage() {
+  const [stats, sponsors] = await Promise.all([
+    getPlatformStats(),
+    getSponsors()
+  ])
+
   return (
-    <main className="min-h-screen bg-neutral-950 text-white">
-      <HeroSection />
+    <main className="min-h-screen bg-gray-50 dark:bg-black overflow-hidden text-gray-900 dark:text-white
+      w-[100vw] relative left-[50%] right-[50%] -ml-[50vw] -mr-[50vw]"
+    >
+      
+      <HeroSection stats={stats} />
+      <TopicsSection />
       <FeaturesSection />
-      <PricingSection />
+      <PricingSection sponsors={sponsors} />
       <CommunitySection />
+      
     </main>
   )
-}
+}

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

@@ -1,17 +1,29 @@
-export const metadata = {
-  title: "Contacts | DevLovers",
-  description:
-    "Get in touch with the DevLovers team for questions, feedback, or collaboration.",
-};
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "contacts" });
+
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+  };
+}
+
+export default async function ContactsPage() {
+  const t = await getTranslations("contacts");
 
-export default function ContactsPage() {
   return (
     <main className="max-w-2xl mx-auto py-12 px-4">
-      <h1 className="text-3xl font-bold mb-6">Contacts</h1>
-      <p className="mb-4">We’d love to hear from you! 💬</p>
+      <h1 className="text-3xl font-bold mb-6">{t("title")}</h1>
+      <p className="mb-4">{t("subtitle")} 💬</p>
       <ul className="space-y-2">
         <li>
-          📧 Email:{" "}
+          📧 {t("email")}{" "}
           <a
             href="mailto:victor.svertoka@gmail.com"
             className="text-blue-600 hover:underline"
@@ -20,7 +32,7 @@ export default function ContactsPage() {
           </a>
         </li>
         <li>
-          💼 LinkedIn:{" "}
+          💼 {t("linkedin")}{" "}
           <a
             href="https://www.linkedin.com/in/viktor-svertoka/"
             target="_blank"
@@ -31,7 +43,7 @@ export default function ContactsPage() {
           </a>
         </li>
         <li>
-          🧑‍💻 GitHub:{" "}
+          🧑‍💻 {t("github")}{" "}
           <a
             href="https://github.com/ViktorSvertoka"
             target="_blank"

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

@@ -1,5 +1,6 @@
 import { redirect } from '@/i18n/routing';
 import { Link } from '@/i18n/routing'
+import { getTranslations } from 'next-intl/server';
 import { getCurrentUser } from '@/lib/auth';
 import { getUserProfile } from '@/db/queries/users';
 import { getUserQuizStats } from '@/db/queries/quiz';
@@ -9,10 +10,19 @@ import { StatsCard } from '@/components/dashboard/StatsCard';
 import { QuizSavedBanner } from '@/components/dashboard/QuizSavedBanner';
 import { PostAuthQuizSync } from "@/components/auth/PostAuthQuizSync";
 
-export const metadata = {
-  title: 'Dashboard | DevLovers',
-  description: 'Track your progress and quiz performance.',
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'dashboard' });
+
+  return {
+    title: t('metaTitle'),
+    description: t('metaDescription'),
+  };
+}
 
 export default async function DashboardPage({ params }: { params: Promise<{ locale: string }> }) {
   const session = await getCurrentUser();
@@ -22,6 +32,8 @@ export default async function DashboardPage({ params }: { params: Promise<{ loca
   const user = await getUserProfile(session.id);
   if (!user) { redirect({ href: '/login', locale }); return; }
 
+  const t = await getTranslations('dashboard');
+
   const attempts = await getUserQuizStats(session.id);
 
   const totalAttempts = attempts.length;
@@ -36,7 +48,7 @@ export default async function DashboardPage({ params }: { params: Promise<{ loca
 
   const lastActiveDate =
     totalAttempts > 0
-      ? new Date(attempts[0].completedAt).toLocaleDateString('uk-UA')
+      ? new Date(attempts[0].completedAt).toLocaleDateString(locale)
       : null;
 
   const userForDisplay = {
@@ -74,21 +86,21 @@ export default async function DashboardPage({ params }: { params: Promise<{ loca
           <div>
             <h1 className="text-4xl md:text-5xl font-black tracking-tight drop-shadow-sm">
               <span className="bg-gradient-to-r from-sky-400 via-violet-400 to-pink-400 dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500 bg-clip-text text-transparent">
-                Dashboard
+                {t('title')}
               </span>
             </h1>
             <p className="mt-2 text-slate-600 dark:text-slate-400 text-lg">
-              Welcome back to your training ground.
+              {t('subtitle')}
             </p>
           </div>
 
           <Link href="/contacts" className={outlineBtnStyles}>
-            Support & Feedback
+            {t('supportLink')}
           </Link>
         </header>
         <QuizSavedBanner />
         <div className="grid gap-8 md:grid-cols-2">
-          <ProfileCard user={userForDisplay} />
+          <ProfileCard user={userForDisplay} locale={locale} />
           <StatsCard stats={stats} />
         </div>
       </div>

frontend/app/[locale]/forgot-password/page.tsx

@@ -1,123 +1,7 @@
 "use client";
-import { Link } from "@/i18n/routing";
-import { useState } from "react";
-import { useSearchParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
 
-export default function ForgotPasswordPage() {
-    const searchParams = useSearchParams();
-    const returnTo = searchParams.get("returnTo");
-
-    const [loading, setLoading] = useState(false);
-    const [email, setEmail] = useState("");
-    const [submitted, setSubmitted] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-        setLoading(true);
-        setError(null);
-
-        try {
-            const res = await fetch("/api/auth/password-reset", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ email }),
-            });
-
-            if (!res.ok) {
-                setError("Something went wrong. Please try again.");
-                return;
-            }
-
-            setSubmitted(true);
-        } catch (err) {
-            console.error("Password reset request failed:", err);
-            setError("Network error. Please check your connection and try again.");
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    return (
-        <div className="mx-auto max-w-sm py-12">
-            <h1 className="mb-6 text-2xl font-semibold">
-                Forgot password
-            </h1>
+import { ForgotPasswordForm } from "@/components/auth/ForgotPasswordForm";
 
-            {submitted ? (
-                <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
-                    <p>
-                        If an account for{" "}
-                        <strong>{email}</strong> exists, we’ve sent a
-                        password reset link.
-                    </p>
-
-                    <p className="mt-2">
-                        Please check your inbox and follow the
-                        instructions to reset your password.
-                    </p>
-
-                    <Link
-                        href={
-                            returnTo
-                                ? `/login?returnTo=${encodeURIComponent(returnTo)}`
-                                : "/login"
-                        }
-                        className="mt-4 inline-block underline"
-                    >
-                        Back to login
-                    </Link>
-                </div>
-            ) : (
-                <form onSubmit={onSubmit} className="space-y-4">
-                    <p className="text-sm text-gray-600">
-                        Enter your email address and we’ll send
-                        you a link to reset your password.
-                    </p>
-
-                    <input
-                        type="email"
-                        required
-                        placeholder="Email"
-                        value={email}
-                        onChange={e => setEmail(e.target.value)}
-                        className="w-full rounded border px-3 py-2"
-                    />
-
-                    {error && (
-                        <p className="text-sm text-red-600">
-                            {error}
-                        </p>
-                    )}
-
-                    <Button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full"
-                    >
-                        {loading
-                            ? "Sending reset link..."
-                            : "Send reset link"}
-                    </Button>
-                </form>
-            )}
-
-            {!submitted && (
-                <p className="mt-4 text-sm text-gray-600">
-                    Remembered your password?{" "}
-                    <Link
-                        href={
-                            returnTo
-                                ? `/login?returnTo=${encodeURIComponent(returnTo)}`
-                                : "/login"
-                        }
-                        className="underline"
-                    >
-                        Log in
-                    </Link>
-                </p>
-            )}
-        </div>
-    );
+export default function ForgotPasswordPage() {
+    return <ForgotPasswordForm />;
 }

frontend/app/[locale]/layout.tsx

@@ -15,6 +15,7 @@ import { MainSwitcher } from '@/components/header/MainSwitcher';
 import { AppChrome } from '@/components/header/AppChrome';
 
 import { CookieBanner } from '@/components/shared/CookieBanner';
+import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
 
 export const dynamic = 'force-dynamic';
 
@@ -74,6 +75,7 @@ export default async function LocaleLayout({
             {children}
           </MainSwitcher>
         </AppChrome>
+        <OnlineCounterPopup />
 
         <Footer />
         <Toaster position="top-right" richColors expand />

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

@@ -1,5 +1,11 @@
 import { getLeaderboardData } from '@/db/queries/leaderboard';
 import LeaderboardClient from '@/components/leaderboard/LeaderboardClient';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Leaderboard | DevLovers',
+  description: 'Top performers of the community',
+};
 
 export const revalidate = 3600;