I Design Beautiful,
Human Centered
Digital Experiences

                              import React from 'react';
              import { useQuery } from '@tanstack/react-query';
              
              // --- API Service (e.g., api/products.ts) ---
              async function fetchProducts() {
                const response = await fetch('/api/products');
                if (!response.ok) {
                  throw new Error('Failed to fetch products');
                }
                return response.json();
              }
              
              // --- ProductList Component (e.g., components/ProductList.jsx) ---
              function ProductList() {
                const { 
                  data: products, 
                  isLoading, 
                  isError, 
                  error 
                } = useQuery({ 
                  queryKey: ['products'], 
                  queryFn: fetchProducts 
                });
              
                if (isLoading) {
                  return (
                    <div aria-live="polite" className="text-info">
                      Loading products...
                    </div>
                  );
                }
              
                if (isError) {
                  return (
                    <div role="alert" className="text-danger">
                      Error: {error.message}
                    </div>
                  );
                }
              
                return (
                  <div className="product-list">
                    <h3 className="h4 mb-3">Featured Products</h3>
                    <ul className="list-unstyled">
                      {products.map((product) => (
                        <li key={product.id} className="mb-2">
                          <strong>{product.name}</strong> - $ {product.price.toFixed(2)}
                        </li>
                      ))}
                    </ul>
                  </div>
                );
              }
              
              // --- App.js (or a parent component) ---
              // How it would be used in a larger application context
              function App() {
                return (
                  <div>
                    {/* Other components */}
                    <ProductList />
                    {/* More components */}
                  </div>
                );
              }
              
              export default App;