✨ feat: update Docker setup and enhance error handling (#19)

app/Projects/[slug]/page.tsx

@@ -8,6 +8,8 @@ import {
 } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import Link from "next/link";
+
 import Footer_Back from "@/app/components/Footer_Back";
 import Header from "@/app/components/Header";
 import Image from "next/image";
@@ -33,6 +35,7 @@ const ProjectDetails = () => {
   const pathname = usePathname();
   const [project, setProject] = useState<Project | null>(null);
   const [isVisible, setIsVisible] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setTimeout(() => {
@@ -53,7 +56,12 @@ const ProjectDetails = () => {
     } else {
       // Fetch project data based on slug from URL
       const slug = params.slug as string;
-      fetchProjectData(slug);
+      try {
+        fetchProjectData(slug);
+      } catch (error) {
+        console.log(error);
+        setError("Failed to fetch project data");
+      }
     }
   }, [searchParams, router, params, pathname]);
 
@@ -64,12 +72,41 @@ const ProjectDetails = () => {
         throw new Error("Failed to fetch project data");
       }
       const projectData = (await response.json()) as { posts: Project[] };
+      if (projectData.posts.length === 0) {
+        throw new Error("Project not found");
+      }
       setProject(projectData.posts[0]);
     } catch (error) {
       console.error("Failed to fetch project data:", error);
+      setError("Project not found");
     }
   };
 
+  if (error) {
+    return (
+      <div className="min-h-screen flex flex-col bg-radiant">
+        <Header />
+        <div className="flex-grow flex items-center justify-center">
+          <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
+            <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
+              404
+            </h1>
+            <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
+              {error}
+            </p>
+            <Link
+              href="/"
+              className="mt-6 inline-block text-blue-500 hover:underline"
+            >
+              Go Back Home
+            </Link>
+          </div>
+        </div>
+        <Footer_Back />
+      </div>
+    );
+  }
+
   if (!project) {
     return (
       <div className="min-h-screen flex flex-col bg-radiant">

app/api/fetchAllProjects/route.tsx

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://192.168.179.31:2368";
+const GHOST_API_URL = "http://big-bear-ghost:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 export async function GET() {