diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
index 8f638a0..87ee73d 100644
--- a/.github/workflows/frontend.yml
+++ b/.github/workflows/frontend.yml
@@ -29,8 +29,11 @@ jobs:
 
     - name: Install dependencies
       run: cd Frontend && npm install --force # This should install all dependencies, regardless of the workspace
+    
+    - name: Write shared .env file
+      run: echo "${{ github.ref == 'refs/heads/deployment' && secrets.SHARED_PROD_ENV_FILE || secrets.SHARED_DEV_ENV_FILE }}" > Frontend/shared/.env
 
-    - name: Write .env file
+    - name: Write Frontend .env file
       run: echo "${{ github.ref == 'refs/heads/deployment' && secrets.FRONTEND_PROD_ENV_FILE || secrets.FRONTEND_DEV_ENV_FILE }}" > Frontend/speedcart-react/.env
 
     - name: Build front end
diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index 35d30e4..2726d02 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -37,6 +37,7 @@
         "process": "^0.11.10",
         "react": "18.2.0",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^6.0.0",
         "react-icons": "^5.2.1",
         "react-intersection-observer": "^9.5.3",
         "react-native": "0.74.5",
@@ -12341,6 +12342,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "license": "MIT",
@@ -17962,6 +17968,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.0.0.tgz",
+      "integrity": "sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.3.0",
       "license": "MIT",
@@ -20301,6 +20318,57 @@
         "vite": "^2.9.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
       }
     },
+    "node_modules/vite-tsconfig-paths": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.4.tgz",
+      "integrity": "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "tsconfck": "^3.0.3"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-tsconfig-paths/node_modules/tsconfck": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
+      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
+      "bin": {
+        "tsconfck": "bin/tsconfck.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-tsconfig-paths/node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.4.4",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
@@ -20982,7 +21050,8 @@
     "speedcart-react": {
       "version": "0.8.5",
       "dependencies": {
-        "vite": "^6.3.3"
+        "vite": "^6.3.3",
+        "vite-tsconfig-paths": "^5.1.4"
       }
     },
     "speedcart-react-native": {
diff --git a/Frontend/package.json b/Frontend/package.json
index d37ba6c..6f50873 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -1,5 +1,6 @@
 {
   "name": "my-monorepo",
+  "type": "module",
   "private": true,
   "workspaces": [
     "shared",
@@ -35,6 +36,7 @@
     "process": "^0.11.10",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^6.0.0",
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.5.3",
     "react-native": "0.74.5",
diff --git a/Frontend/shared/.env b/Frontend/shared/.env
deleted file mode 100644
index 5494f0f..0000000
--- a/Frontend/shared/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-API_DOMAIN=api.speedcartapp.com
-TESTING_MODE=false
\ No newline at end of file
diff --git a/Frontend/shared/.gitignore b/Frontend/shared/.gitignore
index c228cbe..6032708 100644
--- a/Frontend/shared/.gitignore
+++ b/Frontend/shared/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 dist/
-src/constants/config.json
\ No newline at end of file
+src/constants/config.json
+.env
\ No newline at end of file
diff --git a/Frontend/shared/generate-config.js b/Frontend/shared/generate-config.js
index 5f521ee..b83c6e3 100644
--- a/Frontend/shared/generate-config.js
+++ b/Frontend/shared/generate-config.js
@@ -6,11 +6,15 @@ const dotenv = require('dotenv');
 dotenv.config();
 
 const config = {
-  API_DOMAIN: process.env.API_DOMAIN,
-  API_PORT: process.env.API_PORT,
-  TESTING_MODE: process.env.TESTING_MODE,
+  API_DOMAIN: process.env.API_DOMAIN || 'localhost',
+  API_PORT: process.env.API_PORT || '',  // ensure it always exists
+  TESTING_MODE: process.env.TESTING_MODE || 'false',
 };
 
 // Write the config to a file in the shared directory
-fs.writeFileSync(path.resolve(__dirname, './src/constants/config.json'), JSON.stringify(config, null, 2));
+fs.writeFileSync(
+  path.resolve(__dirname, './src/constants/config.json'),
+  JSON.stringify(config, null, 2)
+);
+
 console.log('Config file generated successfully.');
diff --git a/Frontend/shared/src/constants/BaseUrl.ts b/Frontend/shared/src/constants/BaseUrl.ts
index d73b5d6..3f64565 100644
--- a/Frontend/shared/src/constants/BaseUrl.ts
+++ b/Frontend/shared/src/constants/BaseUrl.ts
@@ -2,10 +2,13 @@
 import config from './config.json';
 
 const API_DOMAIN = config.API_DOMAIN;
+const API_PORT = config.API_PORT;
 
 // Protocol depends on if we're using dev or production
 const API_PROTOCOL = API_DOMAIN === 'localhost' ? 'http' : 'https';
 
 // This can be reused for all backend interactions
-export const BASE_URL: string = `${API_PROTOCOL}://${API_DOMAIN}`;
+export const BASE_URL: string = API_PORT
+    ? `${API_PROTOCOL}://${API_DOMAIN}:${API_PORT}`
+    : `${API_PROTOCOL}://${API_DOMAIN}`;
 export const TESTING_MODE: boolean = config.TESTING_MODE === 'true';
\ No newline at end of file
diff --git a/Frontend/speedcart-react/package.json b/Frontend/speedcart-react/package.json
index 3ff017f..42f7427 100644
--- a/Frontend/speedcart-react/package.json
+++ b/Frontend/speedcart-react/package.json
@@ -26,6 +26,7 @@
     ]
   },
   "dependencies": {
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }
diff --git a/Frontend/speedcart-react/src/App.tsx b/Frontend/speedcart-react/src/App.tsx
index 74dc80b..8af3281 100644
--- a/Frontend/speedcart-react/src/App.tsx
+++ b/Frontend/speedcart-react/src/App.tsx
@@ -1,6 +1,9 @@
 // App.js
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import PageLayout from '@components/PageLayout';
 import Navigation from '@components/Navigation';
 import Footer from '@components/Footer';
 import Modal from '@components/Modal';
@@ -8,15 +11,25 @@ import SitePolicies from '@components/SitePolicies';
 
 import { AppRoute } from '@constants/routes';
 
-import Home from '@pages/Home';
-import ShoppingListShare from '@pages/ShoppingListShare';
-import Login from '@pages/Login';
-import Dashboard from '@pages/Dashboard';
-import NewShoppingListWithProvider from '@pages/NewShoppingListWithProvider';
-import ShoppingListDetailWithProvider from '@pages/ShoppingListDetailWithProvider';
+const Home = React.lazy(() => import('@pages/Home'));
+const ShoppingListShare = React.lazy(() => import('@pages/ShoppingListShare'));
+const Login = React.lazy(() => import('@pages/Login'));
+const Dashboard = React.lazy(() => import('@pages/Dashboard'));
+const NewShoppingListWithProvider = React.lazy(() => import('@pages/NewShoppingListWithProvider'));
+const ShoppingListDetailWithProvider = React.lazy(() => import('@pages/ShoppingListDetailWithProvider'));
 
 import './App.css';
 
+function ErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+}
+
 function App() {
   const [showSitePolicies, setShowSitePolicies] = useState(true);
 
@@ -38,14 +51,18 @@ function App() {
           <Modal isOpen={showSitePolicies} isCloseable={false} >
             <SitePolicies onAccept={handleSitePoliciesAccept} />
           </Modal>
-          <Routes>
-            <Route path={AppRoute.HOME} element={<Home id="HomePage"/>} />
-            <Route path={AppRoute.DASHBOARD} element={<Dashboard/>} />
-            <Route path={AppRoute.NEW_SHOPPING_LIST} element={<NewShoppingListWithProvider/>} />
-            <Route path={AppRoute.LOGIN} element={<Login />} />
-            <Route path={`${AppRoute.SHOPPING_LIST_DETAIL}/:id`} element={<ShoppingListDetailWithProvider />} />
-            <Route path={`${AppRoute.SHOPPING_LIST_SHARE}/:token`} element={<ShoppingListShare />} />
-          </Routes>
+          <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { /* reset state if needed */ }}>
+            <React.Suspense fallback={<PageLayout>Loading...</PageLayout>}>
+              <Routes>
+                <Route path={AppRoute.HOME} element={<Home id="HomePage"/>} />
+                <Route path={AppRoute.DASHBOARD} element={<Dashboard/>} />
+                <Route path={AppRoute.NEW_SHOPPING_LIST} element={<NewShoppingListWithProvider/>} />
+                <Route path={AppRoute.LOGIN} element={<Login />} />
+                <Route path={`${AppRoute.SHOPPING_LIST_DETAIL}/:id`} element={<ShoppingListDetailWithProvider />} />
+                <Route path={`${AppRoute.SHOPPING_LIST_SHARE}/:token`} element={<ShoppingListShare />} />
+              </Routes>
+            </React.Suspense>
+          </ErrorBoundary>
           <Footer id="policyFooter" />
         </Router>
     );
diff --git a/Frontend/speedcart-react/src/assets/images/freshProduce.jpg b/Frontend/speedcart-react/src/assets/images/freshProduce.jpg
index 124a098..64dbca7 100644
Binary files a/Frontend/speedcart-react/src/assets/images/freshProduce.jpg and b/Frontend/speedcart-react/src/assets/images/freshProduce.jpg differ
diff --git a/Frontend/speedcart-react/src/assets/images/phoneAndLaptop.jpg b/Frontend/speedcart-react/src/assets/images/phoneAndLaptop.jpg
index cb20b2f..c13f803 100644
Binary files a/Frontend/speedcart-react/src/assets/images/phoneAndLaptop.jpg and b/Frontend/speedcart-react/src/assets/images/phoneAndLaptop.jpg differ
diff --git a/Frontend/speedcart-react/src/customHooks/ShoppingListContext/ShoppingListContext.tsx b/Frontend/speedcart-react/src/customHooks/ShoppingListContext/ShoppingListContext.tsx
index f46c075..749d79c 100644
--- a/Frontend/speedcart-react/src/customHooks/ShoppingListContext/ShoppingListContext.tsx
+++ b/Frontend/speedcart-react/src/customHooks/ShoppingListContext/ShoppingListContext.tsx
@@ -6,6 +6,13 @@ import { AuthContextType, createGroceryItem, createShoppingList, deleteGroceryIt
 
 const ShoppingListContext = createContext(null);
 
+// Defined here so it doesn't get recreated on every render
+function partition<T>(arr: T[], predicate: (val: T) => boolean): [T[], T[]] {
+    const pass: T[] = [], fail: T[] = [];
+    for (const el of arr) (predicate(el) ? pass : fail).push(el);
+    return [pass, fail];
+}
+
 // This component handles all state-related work for any pages
 // that deal with saving shopping lists
 export const ShoppingListProvider = ({ children }) => {
@@ -18,6 +25,7 @@ export const ShoppingListProvider = ({ children }) => {
   const [deletedItems, setDeletedItems] = useState([]); // Any items deleted in the front end should obviously be removed from the database on the back end
   const [newItems, setNewItems] = useState([]); // Any new items added in the front end should be added to the database on the back end
   const [crudMode, setCrudMode] = useState<CrudMode>(CrudMode.READ);
+  const [error, setError] = useState<string>(''); // Stores any kind of error that occurred with the most recent batch of remote requests
   // These state variables are necessary if the user changes from editing mode to view mode
   const [originalShoppingList, setOriginalShoppingList] = useState(null);
   const [originalGroceryItems, setOriginalGroceryItems] = useState([]);
@@ -126,36 +134,42 @@ export const ShoppingListProvider = ({ children }) => {
       currentListID = listID;
     }
 
-    if (existingItems.length > 0) {
-      // Update each existing grocery item
-      const itemPromises = existingItems.map(item => callBackendAPI(updateGroceryItem, {
-        item: item
-      }));
+    // Pool all item-related promises into one array without evaluating them yet (i.e. lazy evaluation)
+    const allItemPromises: (() => Promise<Response>)[] = [];
 
-      await Promise.all(itemPromises);
+    // Collect all lazy API calls
+    for (const item of existingItems) {
+      allItemPromises.push(() => callBackendAPI(updateGroceryItem, { item }));
     }
 
-    if (deletedItems.length > 0) {
-      // Remove each grocery item that the user wants to delete
-      const itemDeletePromises = deletedItems.map(item => callBackendAPI(deleteGroceryItem, {
-        item: item
-      }));
+    for (const item of deletedItems) {
+      allItemPromises.push(() => callBackendAPI(deleteGroceryItem, { item }));
+    }
 
-      await Promise.all(itemDeletePromises);
+    for (const item of newItems) {
+      allItemPromises.push(() =>
+        callBackendAPI(createGroceryItem, {
+          item: {
+            ...item,
+            shopping_list_id: currentListID
+          }
+        })
+      );
     }
 
-    if (newItems.length > 0) {
-      // Add each new item the user wants to add
-      const itemCreationPromises = newItems.map(item => callBackendAPI(createGroceryItem, {
-         item: {
-          ...item,
-          shopping_list_id: currentListID
-         }
-      }));
+    // Start all the calls at once, lazily
+    const settled = await Promise.allSettled(allItemPromises);
+
+    const [fulfilled, rejected] = partition(settled, r => r.status === "fulfilled");
 
-      await Promise.all(itemCreationPromises);
+    if (rejected.length > 0) {
+      console.error("Some operations failed:", rejected);
+      setError("Some items failed to save. Please try again.");
+      return;
     }
-    
+
+    console.log("All operations succeeded!");
+    setError(''); // Clear any previous error
   };
 
   return (
diff --git a/Frontend/speedcart-react/src/functions/test.js b/Frontend/speedcart-react/src/functions/test.js
deleted file mode 100644
index 5a2e704..0000000
--- a/Frontend/speedcart-react/src/functions/test.js
+++ /dev/null
@@ -1,72 +0,0 @@
-const axios = require('axios');
-const { performance } = require('perf_hooks');
-
-async function fetchData(url, processRecordCallback) {
-  const start = performance.now();
-
-  const response = await axios({
-    method: 'get',
-    url: url,
-    responseType: 'stream',
-  });
-
-  const end = performance.now();
-  console.log(`Time taken for fetchData: ${end - start} milliseconds`);
-
-  const stream = response.data;
-
-  let partialData = '';
-
-  stream.on('data', (chunk) => {
-    const chunkText = chunk.toString('utf-8');
-    partialData += chunkText;
-
-    // Check for complete records in the partialData
-    let recordSeparatorIndex;
-    while ((recordSeparatorIndex = partialData.indexOf('\n')) !== -1) {
-      const record = partialData.substring(0, recordSeparatorIndex);
-      // Process the record one at a time
-      processRecordCallback(record);
-
-      // Remove the processed record from partialData
-      partialData = partialData.substring(recordSeparatorIndex + 1);
-    }
-  });
-
-  return new Promise((resolve) => {
-    stream.on('end', () => {
-      // Process any remaining data in partialData after the stream ends
-      if (partialData.length > 0) {
-        processRecordCallback(partialData);
-      }
-
-      console.log('All data processed');
-      resolve();
-    });
-  });
-}
-
-// Example usage inside an async function
-async function main() {
-  // Construct request data necessary for query
-  const params = {
-    database: 'movies',
-    tblName: 'movies',
-    condition: '',
-    params: {},
-  };
-
-  // Stringify the entire params object
-  const paramsString = JSON.stringify(params);
-  
-  const url = `https://www.speedcartapp.com/api/ShopFastDataManager.php?params=${encodeURIComponent(paramsString)}`; // Replace with your actual URL
-
-  const processRecordCallback = (record) => {
-    // Process each record as it arrives
-    console.log('Processed Record:', record);
-  };
-
-  await fetchData(url, processRecordCallback);
-}
-
-main().catch(error => console.error(error));
diff --git a/Frontend/speedcart-react/vite.config.ts b/Frontend/speedcart-react/vite.config.mjs
similarity index 65%
rename from Frontend/speedcart-react/vite.config.ts
rename to Frontend/speedcart-react/vite.config.mjs
index a976ec7..e59e053 100644
--- a/Frontend/speedcart-react/vite.config.ts
+++ b/Frontend/speedcart-react/vite.config.mjs
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import path from 'path';
 import Restart from 'vite-plugin-restart';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: './',  // Ensure the root is this package
@@ -13,16 +13,9 @@ export default defineConfig({
       ],
     }),
     react(),
+    tsconfigPaths(), // Allows Vite to resolve paths in tsconfig.json
   ],
   resolve: {
-    alias: {
-      '@assets': path.resolve(__dirname, 'src/assets'),
-      '@components': path.resolve(__dirname, 'src/components'),
-      '@constants': path.resolve(__dirname, 'src/constants'),
-      '@customHooks': path.resolve(__dirname, 'src/customHooks'),
-      '@modularStyles': path.resolve(__dirname, 'src/modularStyles'),
-      '@pages': path.resolve(__dirname, 'src/pages'),
-    },
     dedupe: ['shared'], // Forces Vite to always use the package, not resolve it itself
     preserveSymlinks: true // Prevents Vite from resolving `shared` to the source folder
   },