From ef6b44604a3144872671210d2057001b17446b96 Mon Sep 17 00:00:00 2001
From: Yolando <yolandomanullang@gmail.com>
Date: Sat, 28 Mar 2026 21:16:14 +0700
Subject: [PATCH] feat: implement projects section with category filtering and
 database integration

---
 src/app/[locale]/page.tsx                  | 10 ++-
 src/features/projects/projects-section.tsx | 85 ++++++----------------
 2 files changed, 32 insertions(+), 63 deletions(-)

diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index 0e497f6..e22f264 100644
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -5,8 +5,14 @@ import { ExperienceSection } from "@/features/experience/experience-section";
 import { TechStackSection } from "@/features/skills/tech-stack-section";
 import { ProjectsSection } from "@/features/projects/projects-section";
 import { ContactSection } from "@/features/messages/contact-section";
+import { prisma } from "@/core/db/prisma";
+
+export default async function HomePage() {
+  const publishedProjects = await prisma.project.findMany({
+    where: { isPublished: true },
+    orderBy: { createdAt: "desc" }
+  });
 
-export default function HomePage() {
   return (
     <>
       <Navbar />
@@ -14,7 +20,7 @@ export default function HomePage() {
         <HeroSection />
         <ExperienceSection />
         <TechStackSection />
-        <ProjectsSection />
+        <ProjectsSection initialProjects={publishedProjects} />
         <ContactSection />
       </main>
       <Footer />
diff --git a/src/features/projects/projects-section.tsx b/src/features/projects/projects-section.tsx
index 0ea2265..4028e3e 100644
--- a/src/features/projects/projects-section.tsx
+++ b/src/features/projects/projects-section.tsx
@@ -15,66 +15,18 @@ import {
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 
-export function ProjectsSection() {
+export function ProjectsSection({ initialProjects }: { initialProjects?: any[] }) {
   const t = useTranslations("Projects");
   const [activeFilter, setActiveFilter] = useState("all");
 
-  const projects = [
-    {
-      id: "1",
-      title: t("items.apiGateway.title"),
-      description: t("items.apiGateway.description"),
-      category: "backend",
-      tags: ["Spring Boot", "Kafka", "Redis", "Docker"],
-      metrics: t.has("items.apiGateway.metrics") ? t("items.apiGateway.metrics") : undefined,
-    },
-    {
-      id: "2",
-      title: t("items.paymentEngine.title"),
-      description: t("items.paymentEngine.description"),
-      category: "backend",
-      tags: ["Java", "Kafka", "PostgreSQL", "gRPC"],
-      metrics: t.has("items.paymentEngine.metrics") ? t("items.paymentEngine.metrics") : undefined,
-    },
-    {
-      id: "3",
-      title: t("items.onboarding.title"),
-      description: t("items.onboarding.description"),
-      category: "frontend",
-      tags: ["React", "Next.js", "TypeScript", "Tailwind"],
-      repoUrl: "#",
-      liveUrl: "#",
-    },
-    {
-      id: "4",
-      title: t("items.dashboard.title"),
-      description: t("items.dashboard.description"),
-      category: "frontend",
-      tags: ["React", "Chart.js", "WebSocket", "REST"],
-      repoUrl: "#",
-    },
-    {
-      id: "5",
-      title: t("items.mobileApp.title"),
-      description: t("items.mobileApp.description"),
-      category: "mobile",
-      tags: ["React Native", "TypeScript", "Redux"],
-    },
-    {
-      id: "6",
-      title: t("items.authService.title"),
-      description: t("items.authService.description"),
-      category: "backend",
-      tags: ["Spring Security", "OAuth2", "JWT", "Redis"],
-      metrics: t.has("items.authService.metrics") ? t("items.authService.metrics") : undefined,
-    },
-  ];
+  // Use initialProjects from DB or fallback to empty array
+  const projects = initialProjects || [];
 
   const filters = [
     { value: "all", label: t("filters.all"), icon: <Layers size={16} /> },
-    { value: "backend", label: t("filters.backend"), icon: <Server size={16} /> },
-    { value: "frontend", label: t("filters.frontend"), icon: <Globe size={16} /> },
-    { value: "mobile", label: t("filters.mobile"), icon: <Smartphone size={16} /> },
+    { value: "Enterprise Backend", label: "Backend", icon: <Server size={16} /> },
+    { value: "Frontend Development", label: "Frontend", icon: <Globe size={16} /> },
+    { value: "Mobile Development", label: "Mobile", icon: <Smartphone size={16} /> },
   ];
 
   const filteredProjects =
@@ -131,21 +83,21 @@ export function ProjectsSection() {
                   {/* Category badge */}
                   <div className="flex items-center justify-between mb-4">
                     <span
-                      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-mono font-semibold uppercase tracking-wider ${project.category === "backend"
+                      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-mono font-semibold uppercase tracking-wider ${project.category === "Enterprise Backend"
                           ? "bg-blue-500/10 text-blue-500 dark:text-blue-400"
-                          : project.category === "frontend"
+                          : project.category === "Frontend Development"
                             ? "bg-violet-500/10 text-violet-500 dark:text-violet-400"
                             : "bg-orange-500/10 text-orange-500 dark:text-orange-400"
                         }`}
                     >
-                      {project.category === "backend" ? (
+                      {project.category === "Enterprise Backend" ? (
                         <Server size={12} />
-                      ) : project.category === "frontend" ? (
+                      ) : project.category === "Frontend Development" ? (
                         <Globe size={12} />
                       ) : (
                         <Smartphone size={12} />
                       )}
-                      {project.category}
+                      {project.category.replace(" Development", "").replace("Enterprise ", "")}
                     </span>
                     <div className="flex items-center gap-1.5">
                       {project.repoUrl && (
@@ -169,6 +121,17 @@ export function ProjectsSection() {
                     </div>
                   </div>
 
+                  {/* Image banner */}
+                  {project.imageUrl && (
+                    <div className="w-full h-40 mb-4 rounded-xl overflow-hidden bg-muted/20 relative group-hover:shadow-md transition-shadow">
+                      <img 
+                        src={project.imageUrl} 
+                        alt={project.title}
+                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
+                      />
+                    </div>
+                  )}
+
                   {/* Title & description */}
                   <h3 className="text-lg font-bold mb-2 group-hover:text-accent transition-colors">
                     {project.title}
@@ -187,9 +150,9 @@ export function ProjectsSection() {
                     </div>
                   )}
 
-                  {/* Tags */}
+                  {/* Tags (Using generic category slice due to PRISMA missing tags yet) */}
                   <div className="flex flex-wrap gap-1.5 mt-auto">
-                    {project.tags.map((tag) => (
+                    {(project.tags || [project.category.split(" ")[0]]).map((tag: string) => (
                       <span
                         key={tag}
                         className="px-2 py-1 rounded-md text-[10px] font-mono bg-muted/50 text-muted-foreground border border-border/30"