Database implimented

drizzle.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'drizzle-kit';
+
+if (!process.env.DATABASE_URL) {
+  throw new Error('DATABASE_URL environment variable is not set');
+}
+
+export default {
+  schema: './src/lib/schema.ts',
+  out: './drizzle',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL,
+  },
+  verbose: true,
+  strict: true,
+} satisfies Config;

next.config.ts

@@ -1,7 +1,6 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  output: "export",
   /* config options here */
 };
 

package.json

@@ -47,6 +47,7 @@
     "cmdk": "^1.1.1",
     "connect-pg-simple": "^10.0.0",
     "date-fns": "^3.6.0",
+    "dotenv": "^17.2.3",
     "drizzle-orm": "^0.39.1",
     "drizzle-zod": "^0.7.0",
     "embla-carousel-react": "^8.6.0",

src/app/api/contact/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createContactMessage, handleDatabaseError } from '@/lib/db-utils';
+import { z } from 'zod';
+
+const contactSchema = z.object({
+  firstName: z.string().min(1, 'First name is required'),
+  lastName: z.string().min(1, 'Last name is required'),
+  email: z.string().email('Invalid email address'),
+  subject: z.string().min(1, 'Subject is required'),
+  message: z.string().min(10, 'Message must be at least 10 characters'),
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    // Validate the request body
+    const validatedData = contactSchema.parse(body);
+
+    // Save to database
+    const contactMessage = await createContactMessage({
+      firstName: validatedData.firstName,
+      lastName: validatedData.lastName,
+      email: validatedData.email,
+      subject: validatedData.subject,
+      message: validatedData.message,
+      status: 'new',
+    });
+
+    return NextResponse.json(
+      { 
+        success: true, 
+        message: 'Contact message received successfully',
+        id: contactMessage.id 
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error('Error saving contact message:', error);
+
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(
+      { error: handleDatabaseError(error) },
+      { status: 500 }
+    );
+  }
+}

src/app/api/projects/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getAllProjects, getFeaturedProjects, handleDatabaseError } from '@/lib/db-utils';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams;
+    const featured = searchParams.get('featured');
+
+    let projects;
+    if (featured === 'true') {
+      projects = await getFeaturedProjects();
+    } else {
+      projects = await getAllProjects();
+    }
+
+    return NextResponse.json(projects, {
+      headers: {
+        'Cache-Control': 'no-store, max-age=0',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching projects:', error);
+    return NextResponse.json(
+      { error: handleDatabaseError(error) },
+      { status: 500 }
+    );
+  }
+}

src/app/api/team/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from 'next/server';
+import { getAllTeamMembers, handleDatabaseError } from '@/lib/db-utils';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const teamMembers = await getAllTeamMembers();
+
+    return NextResponse.json(teamMembers, {
+      headers: {
+        'Cache-Control': 'no-store, max-age=0',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching team members:', error);
+    return NextResponse.json(
+      { error: handleDatabaseError(error) },
+      { status: 500 }
+    );
+  }
+}

src/app/contact/page.tsx

@@ -25,8 +25,19 @@ export default function Contact() {
     setIsSubmitting(true);
 
     try {
-      // Simulate form submission
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to send message');
+      }
 
       toast({
         title: "Message sent successfully!",
@@ -42,9 +53,10 @@ export default function Contact() {
         message: '',
       });
     } catch (error) {
+      console.error('Contact form error:', error);
       toast({
         title: "Failed to send message",
-        description: "Please try again later or contact us directly.",
+        description: error instanceof Error ? error.message : "Please try again later or contact us directly.",
         variant: "destructive",
       });
     } finally {

src/app/page.tsx

@@ -19,13 +19,18 @@ import { useQuery } from "@tanstack/react-query";
 import { Project } from "@/types/project";
 
 export default function Home() {
-  // Fetch featured projects from JSON file
+  // Fetch featured projects from database API
   const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
-  const { data: allProjects = [] } = useQuery({
+  const { data: allProjects = [], isLoading, error } = useQuery({
     queryKey: ["projects"],
     queryFn: async (): Promise<Project[]> => {
-      const response = await fetch(`${basePath}/data/projects.json`);
-      if (!response.ok) throw new Error("Failed to fetch projects");
+      const response = await fetch(`${basePath}/api/projects`);
+      if (!response.ok) {
+        // Fallback to JSON file if API fails
+        const  fallbackResponse = await fetch(`${basePath}/data/projects.json`);
+        if (!fallbackResponse.ok) throw new Error("Failed to fetch projects");
+        return fallbackResponse.json();
+      }
       return response.json();
     },
   });

src/lib/db-utils.ts

@@ -0,0 +1,45 @@
+import { db } from './db';
+import { projects, teamMembers, contactMessages, type NewContactMessage, type Project, type TeamMember } from './schema';
+import { eq } from 'drizzle-orm';
+
+// Projects utilities
+export async function getAllProjects(): Promise<Project[]> {
+  return await db.select().from(projects);
+}
+
+export async function getFeaturedProjects(): Promise<Project[]> {
+  return await db.select().from(projects).where(eq(projects.featured, true));
+}
+
+export async function getProjectById(id: number): Promise<Project | undefined> {
+  const result = await db.select().from(projects).where(eq(projects.id, id));
+  return result[0];
+}
+
+// Team utilities
+export async function getAllTeamMembers(): Promise<TeamMember[]> {
+  return await db.select().from(teamMembers);
+}
+
+export async function getTeamMemberById(id: number): Promise<TeamMember | undefined> {
+  const result = await db.select().from(teamMembers).where(eq(teamMembers.id, id));
+  return result[0];
+}
+
+// Contact messages utilities
+export async function createContactMessage(message: NewContactMessage) {
+  const result = await db.insert(contactMessages).values(message).returning();
+  return result[0];
+}
+
+export async function getAllContactMessages() {
+  return await db.select().from(contactMessages);
+}
+
+// Helper function to handle database errors
+export function handleDatabaseError(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return 'An unknown database error occurred';
+}