Fix deployment issues: URL-encode database password, add auto-migrations, fix dynamic server error

package.json

@@ -6,7 +6,8 @@
     "dev": "NODE_ENV=development next dev -p 3002 --turbo & local-ssl-proxy --config ./ssl-proxy.json",
     "dev:plain": "next dev --turbo",
     "dev:ssl": "NODE_ENV=development next dev -p 3002 --turbo & local-ssl-proxy --config ./ssl-proxy.json",
-    "build": "next build",
+    "build": "node scripts/migrate.js && next build",
+    "build:local": "next build",
     "start": "next start",
     "lint": "next lint",
     "db:generate": "drizzle-kit generate",

scripts/migrate.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process';
+
+async function runMigrations() {
+  try {
+    console.log('🔄 Running database migrations...');
+    
+    // Check if we have a DATABASE_URL
+    if (!process.env.DATABASE_URL) {
+      console.log('⚠️  No DATABASE_URL found, skipping migrations');
+      return;
+    }
+
+    // Run migrations
+    execSync('npx drizzle-kit migrate', { 
+      stdio: 'inherit',
+      env: process.env 
+    });
+    
+    console.log('✅ Database migrations completed successfully!');
+  } catch (error) {
+    console.error('❌ Migration failed:', error.message);
+    process.exit(1);
+  }
+}
+
+runMigrations();

src/app/page.tsx

@@ -12,6 +12,9 @@ import {
 import { eq, desc, inArray } from "drizzle-orm";
 import { sql } from "drizzle-orm";
 
+// Force dynamic rendering for this page
+export const dynamic = 'force-dynamic';
+
 export default async function Home() {
   try {
     const session = await getServerAuthSession();
@@ -154,11 +157,16 @@ export default async function Home() {
     );
   } catch (error) {
     console.error("Error loading homepage:", error);
+    
+    // Return a fallback UI instead of throwing
     return (
       <div className="container mx-auto px-4 py-8">
-        <div className="text-center py-12">
+        <div className="text-center py-12 bg-destructive/10 rounded-lg border border-destructive/20">
-          <p className="text-lg text-muted-foreground">
+          <p className="text-lg text-destructive mb-4">
-            Unable to load images. Please try again later.
+            Oops! Something went wrong loading the images.
+          </p>
+          <p className="text-sm text-muted-foreground">
+            Please try refreshing the page. If the problem persists, contact support.
           </p>
         </div>
       </div>

src/lib/db/index.ts

@@ -4,5 +4,10 @@ import * as schema from './schema';
 
 const connectionString = process.env.DATABASE_URL || 'postgres://postgres:hackme@localhost:5432/opengifame';
 
-const client = postgres(connectionString);
+// Handle connection string more robustly
+const client = postgres(connectionString, {
+  ssl: process.env.NODE_ENV === 'production' ? 'require' : false,
+  max: 1, // Limit connections for serverless
+});
+
 export const db = drizzle(client, { schema });

vercel.json

@@ -0,0 +1,8 @@
+{
+  "buildCommand": "bun run db:migrate && bun run build:local",
+  "devCommand": "bun run dev:plain",
+  "installCommand": "bun install",
+  "env": {
+    "DATABASE_URL": "@database_url"
+  }
+}