Refactor project configuration by removing unnecessary console logs in alchemy.run.ts, updating package.json to consolidate dependencies, and enhancing CSS with new animation styles. Improve error handling in various routes and ensure better performance metrics tracking in the application.

Author: acoyfellow

alchemy.run.ts

@@ -39,8 +39,6 @@ export const WORKER = await Worker(`${projectName}-worker`, {
   url: false
 });
 
-console.log("Worker:", WORKER.url);
-
 export const APP = await SvelteKit(`${projectName}-app`, {
   name: `${projectName}-app`,
   bindings: {
@@ -51,10 +49,9 @@ export const APP = await SvelteKit(`${projectName}-app`, {
   url: true,
   adopt: true,
   env: {
+    BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET || "default-secret",
     BETTER_AUTH_URL: process.env.BETTER_AUTH_URL || "http://localhost:5173",
   }
 });
 
-console.log("App:", APP.url);
-
 await project.finalize(); 

bun.lock

@@ -3,9 +3,6 @@
   "workspaces": {
     "": {
       "name": "remote",
-      "dependencies": {
-        "wrangler": "^4.28.1",
-      },
       "devDependencies": {
         "@sveltejs/adapter-cloudflare": "^7.1.3",
         "@sveltejs/kit": "^2.27.3",
@@ -22,6 +19,7 @@
         "tailwindcss": "^4.1.11",
         "typescript": "^5.9.2",
         "vite": "^7.1.1",
+        "wrangler": "^4.28.1",
       },
     },
   },

package.json

@@ -1,29 +1,10 @@
 {
 	"name": "remote",
-	"description": "Barebones starter for authenticated apps with persistent edge state - SvelteKit + Better Auth + Durable Objects",
 	"version": "1.0.0",
-	"type": "module",
-	"keywords": ["sveltekit", "better-auth", "cloudflare", "durable-objects", "alchemy", "remote-functions", "typescript"],
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/acoyfellow/remote"
 	},
-	"scripts": {
-		"dev": "alchemy dev",
-		"deploy": "alchemy deploy",
-		"destroy": "alchemy destroy",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "db:better-auth": "bunx @better-auth/cli generate",
-    "db:generate": "drizzle-kit generate",
-    "db:migrate": "drizzle-kit migrate",
-    "db:studio": "drizzle-kit studio",
-    "db:local": "wrangler d1 migrations apply remote-db --local",
-    "db:remote": "wrangler d1 migrations apply remote-db --remote"
-	},
 	"devDependencies": {
 		"@sveltejs/adapter-cloudflare": "^7.1.3",
 		"@sveltejs/kit": "^2.27.3",
@@ -39,9 +20,26 @@
 		"svelte-check": "^4.3.1",
 		"tailwindcss": "^4.1.11",
 		"typescript": "^5.9.2",
-		"vite": "^7.1.1"
-	},
-	"dependencies": {
+		"vite": "^7.1.1",
 		"wrangler": "^4.28.1"
-	}
+	},
+	"description": "Barebones starter for authenticated apps with persistent edge state - SvelteKit + Better Auth + Durable Objects",
+	"keywords": ["sveltekit", "better-auth", "cloudflare", "durable-objects", "alchemy", "remote-functions", "typescript"],
+	"scripts": {
+		"dev": "alchemy dev",
+		"deploy": "alchemy deploy",
+		"destroy": "alchemy destroy",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"db:better-auth": "bunx @better-auth/cli generate",
+		"db:generate": "drizzle-kit generate",
+		"db:migrate": "drizzle-kit migrate",
+		"db:studio": "drizzle-kit studio",
+		"db:local": "wrangler d1 migrations apply remote-db --local",
+		"db:remote": "wrangler d1 migrations apply remote-db --remote"
+	},
+	"type": "module"
 }

src/app.css

@@ -9,3 +9,64 @@ body {
   line-height: 1.2;
   font-weight: 400;
 }
+
+/* Futuristic Brutalist Animations */
+@keyframes slide-right {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100vw); }
+}
+
+@keyframes slide-down {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(100vh); }
+}
+
+@keyframes float-1 {
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  25% { transform: translate(20px, -10px) rotate(90deg); }
+  50% { transform: translate(-10px, -20px) rotate(180deg); }
+  75% { transform: translate(-20px, 10px) rotate(270deg); }
+}
+
+@keyframes float-2 {
+  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
+  33% { transform: translate(-15px, 15px) rotate(120deg) scale(0.8); }
+  66% { transform: translate(15px, -15px) rotate(240deg) scale(1.2); }
+}
+
+@keyframes pulse-slow {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.5); }
+}
+
+@keyframes scan {
+  0% { transform: translateY(-100%); opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { transform: translateY(100vh); opacity: 0; }
+}
+
+/* Animation classes */
+.animate-slide-right {
+  animation: slide-right 8s linear infinite;
+}
+
+.animate-slide-down {
+  animation: slide-down 12s linear infinite;
+}
+
+.animate-float-1 {
+  animation: float-1 6s ease-in-out infinite;
+}
+
+.animate-float-2 {
+  animation: float-2 8s ease-in-out infinite;
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 3s ease-in-out infinite;
+}
+
+.animate-scan {
+  animation: scan 4s ease-in-out infinite;
+}

src/hooks.server.ts

@@ -6,25 +6,41 @@ import { error } from "@sveltejs/kit";
 import type { Handle } from "@sveltejs/kit";
 
 export const handle: Handle = async ({ event, resolve }) => {
-  const db = event.platform?.env?.DB;
-  
-  if (!db) return error(500, 'D1 database not available');
-
-  // Initialize auth once, then reuse
-  const auth = initAuth(db, event.platform?.env);
-  
   try {
-    const session = await auth.api.getSession({
-      headers: event.request.headers,
-    });
-    event.locals.user = session?.user || null;
-    event.locals.session = session?.session || null;
-  } catch (error) {
-    console.error('Session loading error:', error);
+    const db = event.platform?.env?.DB;
+    
+    if (!db) return error(500, 'D1 database not available');
+
+    // Initialize auth once, then reuse
+    const auth = initAuth(db, event.platform?.env);
+    
+    try {
+      const session = await auth.api.getSession({
+        headers: event.request.headers,
+      });
+      event.locals.user = session?.user || null;
+      event.locals.session = session?.session || null;
+    } catch (sessionError) {
+      console.error('Session loading error:', sessionError);
+      event.locals.user = null;
+      event.locals.session = null;
+    }
+
+    const response = await svelteKitHandler({ event, resolve, auth, building });
+    return response;
+    
+  } catch (criticalError) {
+    console.error('Critical error in handle:', criticalError);
+    
+    // Graceful fallback - serve app without auth
     event.locals.user = null;
     event.locals.session = null;
+    
+    try {
+      return await resolve(event);
+    } catch (resolveError) {
+      console.error('Failed to resolve even without auth:', resolveError);
+      return error(500, 'Service temporarily unavailable');
+    }
   }
-
-  const response = await svelteKitHandler({ event, resolve, auth, building });
-  return response;
 };

src/lib/auth-store.svelte.ts

@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import { signIn, signOut as signOutClient, signUp } from '$lib/auth-client';
-import type { User, Session } from '$lib/types';
+import type { User, Session } from 'better-auth';
 
 interface AuthState {
   user: User | null;  // User object from Better Auth
@@ -89,3 +89,8 @@ class AuthStore {
 
 // Export singleton instance
 export const authStore = new AuthStore();
+
+// Individual getters for convenience
+export const getUser = () => authStore.user;
+export const getSession = () => authStore.session;
+export const getIsAuthenticated = () => !!authStore.user;

src/lib/auth.ts

@@ -8,6 +8,7 @@ import { getRequestEvent } from '$app/server';
 import type { D1Database } from '@cloudflare/workers-types';
 
 let authInstance: ReturnType<typeof betterAuth> | null = null;
+let drizzleInstance: ReturnType<typeof drizzle> | null = null;
 
 export function getAuth(): ReturnType<typeof betterAuth> {
   if (!authInstance) {
@@ -16,55 +17,67 @@ export function getAuth(): ReturnType<typeof betterAuth> {
   return authInstance;
 }
 
+export function getDrizzle(): ReturnType<typeof drizzle> {
+  if (!drizzleInstance) {
+    throw new Error('Database not initialized. Call initAuth() first.');
+  }
+  return drizzleInstance;
+}
+
 export function initAuth(db: D1Database, env?: any) {
   if (!db) {
     throw new Error('D1 database is required for Better Auth');
   }
 
   // Only create once
-  if (authInstance) {
+  if (authInstance && drizzleInstance) {
     return authInstance;
   }
 
-  const drizzleDb = drizzle(db, {
-    schema: {
-      user,
-      session,
-      account,
-      verification,
-    },
-  });
-
-  authInstance = betterAuth({
-    trustedOrigins: [
-      "http://localhost:5173",
-      "https://*.coey.dev",
-      "https://*-remote-app.coy.workers.dev",
-    ],
-    database: drizzleAdapter(drizzleDb, {
-      provider: 'sqlite',
+  // Create singleton Drizzle instance (connection pooling)
+  if (!drizzleInstance) {
+    drizzleInstance = drizzle(db, {
       schema: {
         user,
         session,
         account,
         verification,
       },
-    }),
-    emailAndPassword: {
-      enabled: true,
-      autoSignIn: true,
-      requireEmailVerification: false,
-    },
-    session: {
-      expiresIn: 60 * 60 * 24 * 7, // 7 days
-      updateAge: 60 * 60 * 24, // 1 day
-    },
-    secret: env?.BETTER_AUTH_SECRET || (() => {
-      throw new Error('BETTER_AUTH_SECRET environment variable is required');
-    })(),
-    baseURL: env?.BETTER_AUTH_URL || 'http://localhost:5173',
-    plugins: [sveltekitCookies(getRequestEvent as any)],
-  });
+    });
+  }
+
+  if (!authInstance) {
+    authInstance = betterAuth({
+      trustedOrigins: [
+        "http://localhost:5173",
+        "https://*.coey.dev",
+        "https://*-remote-app.coy.workers.dev",
+      ],
+      database: drizzleAdapter(drizzleInstance, {
+        provider: 'sqlite',
+        schema: {
+          user,
+          session,
+          account,
+          verification,
+        },
+      }),
+      emailAndPassword: {
+        enabled: true,
+        autoSignIn: true,
+        requireEmailVerification: false,
+      },
+      session: {
+        expiresIn: 60 * 60 * 24 * 7, // 7 days
+        updateAge: 60 * 60 * 24, // 1 day
+      },
+      secret: env?.BETTER_AUTH_SECRET || (() => {
+        throw new Error('BETTER_AUTH_SECRET environment variable is required');
+      })(),
+      baseURL: env?.BETTER_AUTH_URL || 'http://localhost:5173',
+      plugins: [sveltekitCookies(getRequestEvent as any)],
+    });
+  }
 
   return authInstance;
 }

src/routes/+layout.server.ts

@@ -1,8 +1,9 @@
 import type { LayoutServerLoad } from './$types';
+import type { User, Session } from '$lib/schema';
 
 export const load: LayoutServerLoad = async ({ locals }) => {
   return {
-    user: locals.user,
-    session: locals.session,
+    user: locals.user as User,
+    session: locals.session as Session,
   };
 };

src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import "../app.css";
   import { authStore } from "$lib/auth-store.svelte";
+  import type { User, Session } from "$lib/schema";
 
   let { data, children } = $props();
 
-  authStore.initialize(data.user, data.session);
+  authStore.initialize(data.user as User, data.session as Session);
 </script>
 
 {@render children?.()}