feat: add network request example with layered architecture

src/api/message.js

@@ -9,12 +9,20 @@
  * This file contains client-side API functions that call our express.js backend routes
  */
 
-export const getMessage = async () => {
+export const getPost = async (postId) => {
   try {
-    const response = await fetch('/api/message');
-    const data = await response.json();
-    return data.message;
+    const response = await fetch(`/api/post/${postId}`);
+    return await response.json();
   } catch (error) {
-    throw new Error('Failed to load message: ', error);
+    throw new Error('Failed to load post: ', error);
+  }
+};
+
+export const getComments = async (postId) => {
+  try {
+    const response = await fetch(`/api/comments?postId=${postId}`);
+    return await response.json();
+  } catch (error) {
+    throw new Error('Failed to load comments: ', error);
   }
 };

src/components/nav/NavHeaderItems.jsx

@@ -1,6 +1,18 @@
 import { HeaderMenu, HeaderMenuItem } from '@carbon/react';
 import { Link as RouterLink } from 'react-router';
 
+/**
+ * Check if a menu path should be active based on the current path
+ * Handles both exact matches and dynamic route segments
+ */
+const isPathActive = (menuPath, currentPath) => {
+  if (!menuPath || !currentPath) return false;
+  // Exact match
+  if (menuPath === currentPath) return true;
+  // Match dynamic routes: /dashboard should be active for /dashboard/123
+  return currentPath.startsWith(`${menuPath}/`);
+};
+
 export const NavHeaderItems = ({ routesInHeader, currentPath }) => (
   <>
     {routesInHeader.map(({ path, carbon }) =>
@@ -16,7 +28,7 @@ export const NavHeaderItems = ({ routesInHeader, currentPath }) => (
                 as={RouterLink}
                 to={subRoute.path}
                 key={subRoute.path}
-                isActive={subRoute.path === currentPath}
+                isActive={isPathActive(subRoute.path, currentPath)}
               >
                 {subRoute.carbon.label}
               </HeaderMenuItem>
@@ -27,7 +39,7 @@ export const NavHeaderItems = ({ routesInHeader, currentPath }) => (
             as={RouterLink}
             key={path}
             to={path}
-            isActive={path === currentPath}
+            isActive={isPathActive(path, currentPath)}
           >
             {carbon?.label}
           </HeaderMenuItem>

src/config/server-config.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Server configuration constants
+// Extracted to avoid importing the full server during tests
+export const port = process.env.PORT || 5173;
+export const base = process.env.BASE || '/';
+export const baseUrl = `http://localhost:${port}`;