feat: add network query example to fetch posts and comments

src/api/message.js

@@ -9,12 +9,24 @@
  * 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;
+    // TODO: handle production and development environments
+    const response = await fetch(`http://localhost:5173/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 {
+    // TODO: handle production and development environments
+    const response = await fetch(
+      `http://localhost:5173/api/comments?postId=${postId}`,
+    );
+    return await response.json();
+  } catch (error) {
+    throw new Error('Failed to load comments: ', error);
   }
 };

src/pages/welcome/Welcome.jsx

@@ -5,34 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { CodeSnippet, Column, Grid, Tile } from '@carbon/react';
-import { useEffect, useState } from 'react';
+import {
+  CodeSnippet,
+  Column,
+  Grid,
+  Tile,
+  UnorderedList,
+  ListItem,
+  Stack,
+} from '@carbon/react';
 
-import { getMessage } from '../../api/message.js';
 import { Footer } from '../../components/footer/Footer';
 import { WelcomeHeader } from './WelcomeHeader.jsx';
 import { PageLayout } from '../../layouts/page-layout.jsx';
+import PostComponent from './post/PostComponent.jsx';
+import { Suspense } from 'react';
 
 // The styles are imported into index.scss by default.
 // Do the same unless you have a good reason not to.
 // import './welcome.scss';
 
 const Welcome = () => {
-  const [message, setMessage] = useState('');
-
-  useEffect(() => {
-    const loadMessage = async () => {
-      try {
-        const msg = await getMessage();
-        setMessage(msg);
-      } catch {
-        setMessage('Failed to load message');
-      }
-    };
-
-    loadMessage();
-  }, []);
-
   return (
     <PageLayout
       className="cs--welcome"
@@ -134,25 +127,49 @@ const Welcome = () => {
           sm={4}
         >
           <Grid>
-            <Column sm={2} md={4} lg={4}>
+            <Column sm={4} md={4} lg={4}>
               <h3 className="cs--welcome__heading">
                 ↳ An example of data fetching
               </h3>
             </Column>
             <Column
-              sm={2}
+              sm={4}
               md={4}
               lg={12}
               className="cs--welcome__dynamic-message"
             >
-              <p>
-                Below is a dynamically fetched message from an external API
-                endpoint. This showcases how to perform data fetching while
-                keeping components clean and separating network logic.
-              </p>
-              <Tile>
-                <strong>Message:</strong> {message || 'Loading...'}
-              </Tile>
+              <Stack gap={3}>
+                <p>
+                  Below is a dynamically fetched message from an external API
+                  endpoint. This showcases how to perform data fetching while
+                  keeping components clean and separating network logic. Here is
+                  how it works:
+                </p>
+                <UnorderedList>
+                  <ListItem>
+                    <strong>UI Layer</strong> - PostComponent.jsx manages React
+                    state and renders the data using Carbon Design components
+                  </ListItem>
+                  <ListItem>
+                    <strong>API Layer</strong> - Client-side functions in{' '}
+                    <code>api/message.js</code> handle HTTP requests to our
+                    Express backend
+                  </ListItem>
+                  <ListItem>
+                    <strong>Service Layer</strong> - Server-side handlers in{' '}
+                    <code>service/postHandlers.js</code> proxy requests to
+                    external APIs (JSONPlaceholder)
+                  </ListItem>
+                </UnorderedList>
+                <p>
+                  This pattern keeps your components focused on presentation
+                  while centralizing data fetching logic for reusability and
+                  testability.
+                </p>
+              </Stack>
+              <Suspense>
+                <PostComponent />
+              </Suspense>
             </Column>
           </Grid>
         </Column>