(SP: 3) [Frontend] Complete About page redesign: optimize DB queries, add TS types, and fix configuration

Author: yevheniidatsenko

frontend/components/about/CommunitySection.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { MessageCircle, Github, ArrowRight, ExternalLink } from "lucide-react"
-import { TESTIMONIALS } from "@/data/about"
+import { TESTIMONIALS, type Testimonial } from "@/data/about" 
 
 import Link from "next/link"
 
@@ -26,10 +26,8 @@ export function CommunitySection() {
                 </p>
             </div>
 
-            {/* Infinite Scroll Container */}
             <div className="relative w-full pause-on-hover mb-16">
 
-                {/* Fade Edges */}
                 <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-r from-gray-50 dark:from-background to-transparent" />
                 <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-l from-gray-50 dark:from-background to-transparent" />
 
@@ -95,7 +93,7 @@ function TestimonialCard({
   platform,
   icon: Icon,
   color
-}: any) {
+}: Testimonial) {
   return (
     <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#0f0f0f] p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
       <div className="mb-3 flex items-start justify-between">

frontend/components/about/TopicsSection.tsx

@@ -2,7 +2,7 @@
 
 import { motion } from "framer-motion"
 import { ArrowUpRight } from "lucide-react"
-import { TOPICS } from "@/data/about"
+import { TOPICS, type Topic } from "@/data/about" 
 import Image from "next/image"
 import Link from "next/link" 
 
@@ -35,7 +35,7 @@ export function TopicsSection() {
 
                     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                         {TOPICS.map((topic, i) => (
-                            <TopicCard key={topic.id} topic={topic} index={i} />
+                            <TopicCard key={topic.id} topic={topic as Topic} index={i} />
                         ))}
                     </div>
 
@@ -44,7 +44,7 @@ export function TopicsSection() {
     )
 }
 
-function TopicCard({ topic, index }: { topic: any, index: number }) {
+function TopicCard({ topic, index }: { topic: Topic, index: number }) {
     return (
         <motion.div
             initial={{ opacity: 0, y: 20 }}

frontend/data/about.ts

@@ -1,55 +1,55 @@
 import { Twitter, Linkedin, Github } from "lucide-react"
 
 export const TESTIMONIALS = [
-  {
-    name: "Alex Chen",
-    role: "Frontend @ Meta",
-    avatar: "AC",
-    content: "Cheap therapy for React devs.",
-    platform: "Twitter",
-    icon: Twitter,
-    color: "text-sky-500 bg-sky-500/10"
-  },
-  {
-    name: "Sarah J.",
-    role: "Senior SWE @ Google",
-    avatar: "SJ",
-    content: "Harder than my actual interview. 10/10.",
-    platform: "LinkedIn",
-    icon: Linkedin,
-    color: "text-blue-600 bg-blue-600/10"
-  },
-  {
-    name: "git_push_force",
-    role: "Open Source Contributor",
-    avatar: "GP",
-    content: "Found a bug in the quiz, reported it, got points. Now I'm addicted to fixing your typos.",
-    platform: "GitHub",
-    icon: Github,
-    color: "text-gray-900 dark:text-white bg-gray-500/10"
-  },
-  {
-    name: "Emily Park",
-    role: "Full Stack @ Vercel",
-    avatar: "EP",
-    content: "This is the only place where 'centering a div' is explained like I'm 5. Bless you.",
-    platform: "Twitter",
-    icon: Twitter,
-    color: "text-sky-500 bg-sky-500/10"
-  },
-  {
-    name: "David Kim",
-    role: "Staff Engineer @ Netflix",
-    avatar: "DK",
-    content: "I use the Q&A section to win arguments with my juniors. Don't tell them.",
-    platform: "LinkedIn",
-    icon: Linkedin,
-    color: "text-blue-600 bg-blue-600/10"
-  },
+    {
+        name: "Alex Chen",
+        role: "Frontend @ Meta",
+        avatar: "AC",
+        content: "Cheap therapy for React devs.",
+        platform: "Twitter",
+        icon: Twitter,
+        color: "text-sky-500 bg-sky-500/10"
+    },
+    {
+        name: "Sarah J.",
+        role: "Senior SWE @ Google",
+        avatar: "SJ",
+        content: "Harder than my actual interview. 10/10.",
+        platform: "LinkedIn",
+        icon: Linkedin,
+        color: "text-blue-600 bg-blue-600/10"
+    },
+    {
+        name: "git_push_force",
+        role: "Open Source Contributor",
+        avatar: "GP",
+        content: "Found a bug in the quiz, reported it, got points. Now I'm addicted to fixing your typos.",
+        platform: "GitHub",
+        icon: Github,
+        color: "text-gray-900 dark:text-white bg-gray-500/10"
+    },
+    {
+        name: "Emily Park",
+        role: "Full Stack @ Vercel",
+        avatar: "EP",
+        content: "This is the only place where 'centering a div' is explained like I'm 5. Bless you.",
+        platform: "Twitter",
+        icon: Twitter,
+        color: "text-sky-500 bg-sky-500/10"
+    },
+    {
+        name: "David Kim",
+        role: "Staff Engineer @ Netflix",
+        avatar: "DK",
+        content: "I use the Q&A section to win arguments with my juniors. Don't tell them.",
+        platform: "LinkedIn",
+        icon: Linkedin,
+        color: "text-blue-600 bg-blue-600/10"
+    },
 ]
 
 export const TOPICS = [
-        {
+    {
         id: "git",
         name: "Git & Version Control",
         questions: "90+ Questions",
@@ -140,4 +140,7 @@ export const TOPICS = [
         glow: "bg-[#339933]",
         href: "/q&a/?category=node"
     },
-]
+]
+
+export type Topic = typeof TOPICS[number];
+export type Testimonial = typeof TESTIMONIALS[number];

frontend/lib/about/stats.ts

@@ -18,31 +18,35 @@ const formatMetric = (n: number) => {
 
 export const getPlatformStats = unstable_cache(
   async (): Promise<PlatformStats> => {
-    // 1. GitHub
     let stars = 125
     try {
         const headers: HeadersInit = {}
         if (process.env.GITHUB_TOKEN) headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`
 
-        // Додаємо тип any для опцій fetch, щоб TS не лаявся на next.js розширення
         const res = await fetch('https://api.github.com/repos/DevLoversTeam/devlovers.net', { 
-            headers, 
-            next: { revalidate: 3600 } 
-        } as RequestInit & { next?: { revalidate?: number } })
+            headers,
+            cache: 'no-store'
+        })
 
-        if (res.ok) stars = (await res.json()).stargazers_count
-    } catch (e) { console.error(e) }
+        if (res.ok) {
+            const data = await res.json()
+            stars = data.stargazers_count
+        }
+    } catch (e) { 
+        console.error("GitHub Fetch Error:", e) 
+    }
 
-    // 2. LinkedIn
     const linkedinCount = process.env.LINKEDIN_FOLLOWER_COUNT ? parseInt(process.env.LINKEDIN_FOLLOWER_COUNT) : 1342
 
-    // 3. DB
     let totalUsers = 243
     let solvedTests = 1890
     try {
-      const [u] = await db.select({ value: count() }).from(users)
+      const [[u], [q]] = await Promise.all([
+        db.select({ value: count() }).from(users),
+        db.select({ value: count() }).from(quizAttempts)
+      ])
+      
       if (u) totalUsers = u.value
-      const [q] = await db.select({ value: count() }).from(quizAttempts)
       if (q) solvedTests = q.value
     } catch (e) { 
         console.error("DB Fetch Error:", e) 

frontend/next.config.ts

@@ -41,8 +41,13 @@ const nextConfig: NextConfig = {
         hostname: "github.com",
         pathname: "/**",
       },
+      {
+        protocol: 'https',
+        hostname: 'cdn.jsdelivr.net',
+        pathname: '/**',
+      },
     ],
   },
 };
 
-export default withNextIntl(nextConfig);
+export default withNextIntl(nextConfig);