feat: implement Supabase client setup and homepage with item grid display

myfavstuff/app/page.js

@@ -1,4 +1,4 @@
-import { supabase } from '../lib/supabaseClient';
+import { supabase, safeQuery } from '../lib/supabaseClient';
 
 // Function to generate star ratings
 const StarRating = ({ rating }) => {
@@ -18,25 +18,19 @@ export default async function Home() {
   let items = [];
   let fetchError = null;
 
-  if (supabase) {
-    try {
-      const { data, error } = await supabase
-        .from('items')
-        .select('*')
-        .order('created_at', { ascending: false }); // Assuming you have a created_at timestamp
+  // Using safeQuery helper to handle missing Supabase client gracefully
+  const { data, error } = await safeQuery(async (supabase) => {
+    return await supabase
+      .from('items')
+      .select('*')
+      .order('created_at', { ascending: false }); // Assuming you have a created_at timestamp
+  });
   
-      if (error) {
-        throw error;
-      }
-      items = data || [];
-    } catch (error) {
-      console.error('Error fetching items:', error.message);
-      fetchError = 'Could not fetch items. Please check the connection and try again.';
-      // If Supabase client isn't initialized (e.g. missing .env.local), items will remain []
-      // and this error message will be displayed if supabase itself was the issue.
-    }
+  if (error) {
+    console.error('Error fetching items:', error.message);
+    fetchError = 'Could not fetch items. ' + error.message;
   } else {
-    fetchError = 'Supabase client is not initialized. Please check your .env.local file and ensure it has the correct Supabase URL and Anon key.';
+    items = data || [];
   }
 
 

myfavstuff/lib/supabaseClient.js

@@ -1,23 +1,55 @@
 import { createClient } from '@supabase/supabase-js';
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+// Function to create a supabase client that doesn't fail build if env vars are missing
+const createSupabaseClient = () => {
+  // For Coolify docker deployment with build args
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
   
-if (!supabaseUrl) {
-  console.error('Error: Missing Supabase URL. Please set NEXT_PUBLIC_SUPABASE_URL in .env.local');
-}
+  // Skip errors during build
+  if (typeof window === 'undefined') {
+    if (!supabaseUrl || !supabaseAnonKey) {
+      // During build/SSR, return null client - this prevents build errors
+      console.log('Building without Supabase credentials. Will connect at runtime if available.');
+      return null;
+    }
+  } else {
+    // In browser, log helpful messages but don't block rendering
+    if (!supabaseUrl) {
+      console.warn('Warning: Missing Supabase URL. Please configure NEXT_PUBLIC_SUPABASE_URL.');
+    }
+    if (!supabaseAnonKey) {
+      console.warn('Warning: Missing Supabase Anon Key. Please configure NEXT_PUBLIC_SUPABASE_ANON_KEY.');
+    }
+  }
 
-if (!supabaseAnonKey) {
-  console.error('Error: Missing Supabase Anon Key. Please set NEXT_PUBLIC_SUPABASE_ANON_KEY in .env.local');
-}
+  // Only create client if we have credentials
+  if (supabaseUrl && supabaseAnonKey) {
+    try {
+      return createClient(supabaseUrl, supabaseAnonKey);
+    } catch (error) {
+      console.error('Error initializing Supabase client:', error);
+      return null;
+    }
+  }
   
-// Ensure client is only created if keys are present, to avoid errors during build or in environments where keys might not be set.
-// The actual fetch operations in components should handle cases where supabase might not be initialized.
-let supabaseInstance = null;
-if (supabaseUrl && supabaseAnonKey) {
-  supabaseInstance = createClient(supabaseUrl, supabaseAnonKey);
-} else {
-  console.warn('Supabase client not initialized due to missing URL or Anon Key. App will run without Supabase functionality.');
-}
+  return null;
+};
 
-export const supabase = supabaseInstance;
+// Create the client (can be null during build or if credentials missing)
+export const supabase = createSupabaseClient();
+
+// Helper function for components to safely use supabase
+export const safeQuery = async (queryFn) => {
+  if (!supabase) {
+    console.warn('Supabase client not available. Check your environment variables.');
+    return { data: null, error: { message: 'Database connection not available' } };
+  }
+  
+  try {
+    return await queryFn(supabase);
+  } catch (error) {
+    console.error('Error in Supabase query:', error);
+    return { data: null, error: { message: 'Error connecting to database' } };
+  }
+};