aambrose1 · aambrose1 · May 10, 2026 · May 6, 2026 · May 6, 2026 · May 6, 2026
diff --git a/client/package.json b/client/package.json
@@ -30,6 +30,7 @@
         "test": "react-scripts test",
         "eject": "react-scripts eject"
     },
+    "proxy": "http://localhost:5000",
     "eslintConfig": {
         "extends": [
             "react-app",

diff --git a/client/public/index.html b/client/public/index.html
@@ -3,12 +3,16 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#6200ee" />
     <meta
       name="description"
-      content="KinTree"
-    />  
+      content="KinTree - Preserve and share your family history"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="KinTree" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -1,15 +1,32 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "KinTree",
+  "name": "KinTree - Family Tree Application",
+  "description": "Preserve and share your family history with KinTree",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/x-icon",
+      "purpose": "any"
     }
   ],
-  "start_url": ".",
+  "start_url": "/",
+  "scope": "/",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#6200ee",
+  "background_color": "#ffffff",
+  "orientation": "portrait-primary",
+  "categories": ["family", "social", "productivity"],
+  "screenshots": [
+    {
+      "src": "favicon.ico",
+      "sizes": "540x720",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "favicon.ico",
+      "sizes": "1280x720",
+      "form_factor": "wide"
+    }
+  ]
 }
diff --git a/client/public/service-worker.js b/client/public/service-worker.js
@@ -0,0 +1,100 @@
+const CACHE_NAME = 'kintree-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/favicon.ico',
+];
+
+// Install event - cache essential assets
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        return cache.addAll(urlsToCache).catch(err => {
+          console.warn('Failed to cache some assets:', err);
+          // Continue even if some assets fail to cache
+          return Promise.resolve();
+        });
+      })
+      .then(() => self.skipWaiting())
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', event => {
+  // Skip non-GET requests
+  if (event.request.method !== 'GET') {
+    return;
+  }
+
+  // Skip API calls - let them go through network
+  if (event.request.url.includes('/api/') || 
+      event.request.url.includes('supabase') ||
+      event.request.url.includes('localhost')) {
+    event.respondWith(
+      fetch(event.request)
+        .catch(() => {
+          // Return offline page or cached response if available
+          return caches.match(event.request);
+        })
+    );
+    return;
+  }
+
+  // For other requests, use cache-first strategy
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Return cached version if available
+        if (response) {
+          return response;
+        }
+
+        // Otherwise, fetch from network
+        return fetch(event.request).then(response => {
+          // Don't cache if it's not a successful response
+          if (!response || response.status !== 200 || response.type === 'error') {
+            return response;
+          }
+
+          // Clone the response
+          const responseToCache = response.clone();
+
+          // Cache the new response
+          caches.open(CACHE_NAME)
+            .then(cache => {
+              cache.put(event.request, responseToCache);
+            });
+
+          return response;
+        });
+      })
+      .catch(() => {
+        // Return a custom offline page if available
+        return caches.match('/');
+      })
+  );
+});
+
+// Handle messages from clients
+self.addEventListener('message', event => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
diff --git a/client/src/components/AddFamilyMember/AddFamilyMember.js b/client/src/components/AddFamilyMember/AddFamilyMember.js
@@ -277,7 +277,7 @@ function AddFamilyMemberPopup({ trigger, userid }) {
       console.log('Relationships to create (Existing):', relsToCreate);
 
       for (const rel of relsToCreate) {
-        const relRes = await fetch(`http://localhost:5000/api/relationships/`, {
+        const relRes = await fetch(`/api/relationships/`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -408,7 +408,7 @@ function AddFamilyMemberPopup({ trigger, userid }) {
       console.log('Relationships to create (Manual):', relsToCreate);
 
       for (const rel of relsToCreate) {
-        const relRes = await fetch(`http://localhost:5000/api/relationships/`, {
+        const relRes = await fetch(`/api/relationships/`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({

diff --git a/client/src/components/AddFamilyMember/styles.js b/client/src/components/AddFamilyMember/styles.js
@@ -9,7 +9,6 @@ export const FieldStyle = {
     backgroundColor: 'var(--surface-alt)',
     color: 'var(--text-color)',
     padding: 'var(--space-2) var(--space-4)',
-    marginLeft: 'var(--space-2)',
     outline: 'none',
     fontFamily: 'inherit',
     fontSize: '0.95rem',
@@ -35,8 +34,10 @@ export const ListStyle = {
     display: 'flex',
     flexDirection: 'column',
     textAlign: 'left',
-    marginRight: '15%',
+    margin: '0',
+    paddingLeft: '0',
     width: '100%',
+    boxSizing: 'border-box',
 };
 
 export const ButtonDivStyle = {
@@ -82,6 +83,7 @@ export const FormStyle = {
     paddingTop: '0px',
     minWidth: '360px',
     width: '100%',
+    boxSizing: 'border-box',
 }
 
 export const ItemStyle = {
@@ -96,11 +98,12 @@ export const DateFieldStyle = {
     border: '1px solid var(--input-border)',
     backgroundColor: 'var(--input-bg)',
     color: 'var(--text-color)',
-    marginLeft: 'var(--space-2)',
-    width: '150px',
+    marginLeft: '0',
+    width: '100%',
     padding: 'var(--space-1) var(--space-2)',
     fontFamily: 'inherit',
     outline: 'none',
+    boxSizing: 'border-box',
 };
 
 
@@ -114,6 +117,8 @@ export const MainContainerStyle = {
     minHeight: '150px',
     justifyContent: 'space-between',
     backgroundColor: 'var(--card-bg)',
+    boxSizing: 'border-box',
+    width: '100%',
 }
 
 export const AddOptionsStyle = {
@@ -137,4 +142,4 @@ export const ListingStyle = {
     marginBottom: 'var(--space-2)',
     borderRadius: 'var(--radius-sm)',
     backgroundColor: 'var(--surface-alt)',
-}
+}
diff --git a/client/src/components/UserMemory/CreateMemory.js b/client/src/components/UserMemory/CreateMemory.js
@@ -41,7 +41,7 @@ function CreateMemoryPopup({ trigger, profileID, onMemoryCreated }) {
         return;
       }
 
-      const response = await fetch('http://localhost:5000/api/memories', { 
+      const response = await fetch('/api/memories', { 
         method: 'POST',
         body: formData, 
       });

diff --git a/client/src/components/UserMemory/EditMemory.js b/client/src/components/UserMemory/EditMemory.js
@@ -14,7 +14,7 @@ function EditMemoryPopup({ memory, onMemoryUpdated }) {
 
   const onSubmit = async (data, close) => {
     try {
-      const response = await fetch(`http://localhost:5000/api/memories/${memory.id}`, {
+      const response = await fetch(`/api/memories/${memory.id}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(data),

diff --git a/client/src/components/UserMemory/MemoryCard.js b/client/src/components/UserMemory/MemoryCard.js
@@ -9,7 +9,7 @@ const MemoryCard = ({ memory, onDeleted, onUpdated }) => {
     if (!window.confirm("Are you sure you want to delete this memory?")) return;
 
     try {
-      const response = await fetch(`http://localhost:5000/api/memories/${memory.id}`, {
+      const response = await fetch(`/api/memories/${memory.id}`, {
         method: 'DELETE',
       });
 

diff --git a/client/src/config/urls.js b/client/src/config/urls.js
@@ -1,2 +1,2 @@
-export const CLIENT_URL = process.env.REACT_APP_CLIENT_URL || 'http://localhost:3000';
-export const SERVER_URL = process.env.REACT_APP_SERVER_URL || 'http://localhost:5000';
+export const CLIENT_URL = process.env.REACT_APP_CLIENT_URL || window.location.origin;
+export const SERVER_URL = process.env.REACT_APP_SERVER_URL || '';
diff --git a/client/src/hooks/usePWAInstall.js b/client/src/hooks/usePWAInstall.js
@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Custom hook to handle PWA install prompt
+ * Returns deferredPrompt and functions to show/dismiss install prompt
+ * 
+ * Usage:
+ * const { installPrompt, showInstallPrompt, dismissPrompt } = usePWAInstall();
+ * 
+ * return (
+ *   installPrompt && (
+ *     <div>
+ *       <p>Install KinTree as an app!</p>
+ *       <button onClick={showInstallPrompt}>Install</button>
+ *       <button onClick={dismissPrompt}>Dismiss</button>
+ *     </div>
+ *   )
+ * );
+ */
+export function usePWAInstall() {
+  const [installPrompt, setInstallPrompt] = useState(null);
+  const [showPrompt, setShowPrompt] = useState(false);
+
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (e) => {
+      // Prevent the mini-infobar from appearing on mobile
+      e.preventDefault();
+      // Stash the event for later use
+      setInstallPrompt(e);
+      setShowPrompt(true);
+    };
+
+    const handleAppInstalled = () => {
+      console.log('KinTree installed as PWA');
+      setInstallPrompt(null);
+      setShowPrompt(false);
+    };
+
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+    window.addEventListener('appinstalled', handleAppInstalled);
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+      window.removeEventListener('appinstalled', handleAppInstalled);
+    };
+  }, []);
+
+  const showInstallPrompt = () => {
+    if (installPrompt) {
+      installPrompt.prompt();
+      installPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the install prompt');
+        } else {
+          console.log('User dismissed the install prompt');
+        }
+        setInstallPrompt(null);
+        setShowPrompt(false);
+      });
+    }
+  };
+
+  const dismissPrompt = () => {
+    setShowPrompt(false);
+  };
+
+  return {
+    installPrompt: showPrompt ? installPrompt : null,
+    showInstallPrompt,
+    dismissPrompt,
+    isPromptVisible: showPrompt,
+  };
+}
diff --git a/client/src/index.js b/client/src/index.js
@@ -23,6 +23,7 @@ import Chat from './pages/Chat/Chat';
 import ViewSharedTree from './pages/ViewSharedTree/ViewSharedTree';
 import CreateAccount from './pages/CreateAccount/CreateAccount';
 import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 // creates pages for different paths - buttons should be links to the paths and then the components will populate
 const router = createBrowserRouter([
@@ -175,3 +176,13 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+// Register service worker for PWA support
+serviceWorkerRegistration.register({
+  onSuccess: (registration) => {
+    console.log('Service Worker registered successfully');
+  },
+  onUpdate: (registration) => {
+    console.log('Service Worker update available');
+  },
+});
diff --git a/client/src/pages/Account/Account.js b/client/src/pages/Account/Account.js
@@ -5,6 +5,7 @@ import NavBar from '../../components/NavBar/NavBar';
 import { useCurrentUser } from '../../CurrentUserProvider';
 import { supabase } from '../../utils/supabaseClient';
 import { handleLogout } from '../../utils/authHandlers';
+import { delay } from '../../utils/delay';
 import { SERVER_URL } from '../../config/urls';
 
 function Account() {
@@ -650,9 +651,8 @@ function Account() {
             if (error) throw error;
             setEmailVerificationStatus('Verification email sent! Please check your inbox and click the confirmation link.');
             // Refresh verification status after a delay
-            setTimeout(() => {
-                checkEmailVerification();
-            }, 2000);
+            await delay(2000);
+            await checkEmailVerification();
         } catch (error) {
             console.error('Resend verification email error:', error);
             setEmailVerificationStatus(error.message || 'Failed to send verification email.');