Enable demo mode for GitHub Pages deployment - Use localStorage when no valid backend API is configured - Add demo mode notice banner in production - Smart backend detection checks for valid API URLs - Users can now test the app fully without backend

Author: martinmeerAT

apps/main-app/src/App.tsx

@@ -4,6 +4,7 @@
 import { HashRouter, Route, Routes } from 'react-router'
 import { AuthHandler } from './components/AuthHandler'
 import { DevTools } from './components/DevTools'
+import { DemoModeNotice } from './components/DemoModeNotice'
 import HomePage from './pages/Home'
 import CarOverview from './pages/CarOverview'
 import AddCar from './pages/AddCar'
@@ -17,6 +18,7 @@ import InMaintenance from './pages/InMaintenance'
 export default function App() {
   return (
     <AuthHandler>
+      <DemoModeNotice />
       <HashRouter>
         <Routes>
           <Route path="/" element={<HomePage />} />

apps/main-app/src/components/DemoModeNotice.tsx

@@ -0,0 +1,60 @@
+// apps/main-app/src/components/DemoModeNotice.tsx
+import { useState, useEffect } from 'react';
+import { Alert, AlertDescription } from './ui/alert';
+import { Button } from './ui/button';
+import { Info, X } from 'lucide-react';
+import { ConfigService } from '../services/ConfigService';
+
+/**
+ * Notice banner shown in production when using demo/localStorage mode
+ */
+export function DemoModeNotice() {
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [showNotice, setShowNotice] = useState(false);
+
+  useEffect(() => {
+    // Only show in production when using localStorage (demo mode)
+    const isProduction = process.env.NODE_ENV === 'production';
+    const usingBackend = ConfigService.shouldUseBackend();
+    const dismissed = sessionStorage.getItem('demo_notice_dismissed') === 'true';
+    
+    setShowNotice(isProduction && !usingBackend && !dismissed);
+  }, []);
+
+  const handleDismiss = () => {
+    setIsDismissed(true);
+    sessionStorage.setItem('demo_notice_dismissed', 'true');
+  };
+
+  if (!showNotice || isDismissed) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 p-4">
+      <Alert className="bg-blue-50 border-blue-200 max-w-4xl mx-auto shadow-lg">
+        <Info className="h-4 w-4 text-blue-600" />
+        <AlertDescription className="flex items-start justify-between">
+          <div className="flex-1 pr-4">
+            <p className="text-sm text-blue-900 font-medium mb-1">
+              🚀 Demo Mode
+            </p>
+            <p className="text-sm text-blue-800">
+              You're using the demo version. All data is stored locally in your browser. 
+              Your data is private and will be saved for your next visit on this device.
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDismiss}
+            className="text-blue-600 hover:text-blue-800 hover:bg-blue-100"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+}
+

apps/main-app/src/services/ConfigService.ts

@@ -9,7 +9,7 @@ export class ConfigService {
 
   /**
    * Check if the app should use backend API or localStorage
-   * Priority: localStorage override > environment variable > production default
+   * Priority: localStorage override > valid API URL check > environment variable
    */
   static shouldUseBackend(): boolean {
     // Check for manual override in localStorage (for development/testing)
@@ -18,9 +18,15 @@ export class ConfigService {
       return override === 'true';
     }
 
-    // Check environment variable
+    // Check if we have a valid API URL configured
+    const config = APP_CONFIG.getCurrentConfig();
+    const hasValidApiUrl = config.API_URL && 
+                          !config.API_URL.includes('your-api-domain.com') &&
+                          !config.API_URL.includes('localhost');
+
+    // In production, only use backend if we have a valid API URL
     if (process.env.NODE_ENV === 'production') {
-      return true;
+      return hasValidApiUrl;
     }
 
     // Development default - use localStorage