Product Listing Page

Build a product listing page for an e-commerce store. The page shows products from a PostgreSQL database, each with a name, price, description, and product image. Users can browse products and click through to a product detail page.

The backend is an Express API with the following schema:

CREATE TABLE categories (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL
);

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  price DECIMAL(10,2) NOT NULL,
  image_url TEXT,
  category_id INTEGER REFERENCES categories(id),
  created_at TIMESTAMP DEFAULT NOW()
);

The frontend is React with TypeScript and React Router.

Requirements

• GET /api/products endpoint that returns products with their category name
• Product listing page showing product cards in a grid
• Each card shows the product image, name, price, and category
• Clicking a product card navigates to /products/:id
• The app also has a Home page and an About page accessible via navigation

Output

• server/index.ts — Express server setup and middleware
• server/routes/products.ts — Product routes
• src/App.tsx — React app with routing
• src/pages/HomePage.tsx — Home page
• src/pages/ProductListPage.tsx — Product listing page
• src/pages/ProductDetailPage.tsx — Product detail page (can be a stub)
• src/pages/AboutPage.tsx — About page
• src/components/ProductCard.tsx — Product card component