update

app/projects/[slug]/page.tsx

@@ -25,18 +25,25 @@ const ProjectDetail = () => {
   const slug = params.slug as string;
   const [project, setProject] = useState<Project | null>(null);
 
-  // Load project from localStorage by slug
+  // Load project from API by slug
   useEffect(() => {
-    const savedProjects = localStorage.getItem('portfolio-projects');
-    if (savedProjects) {
-      const projects = JSON.parse(savedProjects);
-      const foundProject = projects.find((p: Project) => 
-        p.title.toLowerCase().replace(/[^a-z0-9]+/g, '-') === slug
-      );
-      if (foundProject) {
-        setProject(foundProject);
+    const loadProject = async () => {
+      try {
+        const response = await fetch(`/api/projects/search?slug=${slug}`);
+        if (response.ok) {
+          const data = await response.json();
+          if (data.projects && data.projects.length > 0) {
+            setProject(data.projects[0]);
+          }
+        } else {
+          console.error('Failed to fetch project from API');
+        }
+      } catch (error) {
+        console.error('Error loading project:', error);
       }
-    }
+    };
+
+    loadProject();
   }, [slug]);
 
   if (!project) {

app/projects/page.tsx

@@ -22,12 +22,23 @@ interface Project {
 const ProjectsPage = () => {
   const [projects, setProjects] = useState<Project[]>([]);
 
-  // Load projects from localStorage
+  // Load projects from API
   useEffect(() => {
-    const savedProjects = localStorage.getItem('portfolio-projects');
-    if (savedProjects) {
-      setProjects(JSON.parse(savedProjects));
-    }
+    const loadProjects = async () => {
+      try {
+        const response = await fetch('/api/projects?published=true');
+        if (response.ok) {
+          const data = await response.json();
+          setProjects(data.projects || []);
+        } else {
+          console.error('Failed to fetch projects from API');
+        }
+      } catch (error) {
+        console.error('Error loading projects:', error);
+      }
+    };
+
+    loadProjects();
   }, []);
 
   const categories = ["All", "Web Development", "Full-Stack", "Web Application", "Mobile App"];