React with Node.js API

1// server.js (Express)
2app.use(cors({ origin: 'https://shop.example.com', credentials: true }));
3app.use(express.json());
4app.get('/api/products', (req, res) => res.json(products));

1// ── server/index.js (Express, Node.js) ──
2// import express from 'express';
3// import cors from 'cors';
4// const app = express();
5// app.use(express.json());
6// app.use(cors({ origin: process.env.CLIENT_ORIGIN ?? 'http://localhost:5173', credentials: true }));
7// let products = [{ id: 1, name: 'Pen', price: 20 }];
8// app.get('/api/products', (req, res) => res.json(products));
9// app.post('/api/products', (req, res) => {
10//   const { name, price } = req.body;
11//   if (!name || !(price > 0)) return res.status(400).json({ error: 'Name and a positive price are required' });
12//   const product = { id: Date.now(), name, price };
13//   products.push(product);
14//   res.status(201).json(product);
15// });
16// app.listen(4000);
17

18// ── client/src/ProductsPage.jsx (React) ──
19import { useEffect, useState } from 'react';
20

21const API = import.meta.env?.VITE_API_URL ?? '/api';     // '/api' uses the Vite proxy in dev
22

23const api = {
24  async list() {
25    const res = await fetch(`${API}/products`, { credentials: 'include' });
26    if (!res.ok) throw new Error('Could not load products');
27    return res.json();
28  },
29  async create(product) {
30    const res = await fetch(`${API}/products`, {
31      method: 'POST',
32      credentials: 'include',
33      headers: { 'Content-Type': 'application/json' },
34      body: JSON.stringify(product),
35    });
36    const body = await res.json();
37    if (!res.ok) throw new Error(body.error ?? 'Could not save');
38    return body;
39  },
40};
41

42export default function ProductsPage() {
43  const [products, setProducts] = useState([]);
44  const [error, setError] = useState('');
45

46  useEffect(() => { api.list().then(setProducts).catch(e => setError(e.message)); }, []);
47

48  async function handleSubmit(e) {
49    e.preventDefault();
50    const formElement = e.currentTarget;          // keep it: currentTarget is null after await
51    const form = new FormData(formElement);
52    try {
53      const created = await api.create({ name: form.get('name'), price: Number(form.get('price')) });
54      setProducts(p => [...p, created]);
55      setError('');
56      formElement.reset();
57    } catch (err) {
58      setError(err.message);
59    }
60  }
61

62  return (
63    <>
64      <ul>{products.map(p => <li key={p.id}>{p.name} — ₹{p.price}</li>)}</ul>
65      <form onSubmit={handleSubmit}>
66        <input name="name" aria-label="Name" />
67        <input name="price" type="number" aria-label="Price" />
68        <button>Add</button>
69      </form>
70      {error && <p role="alert">{error}</p>}
71    </>
72  );
73}

With Express on :4000 and Vite on :5173 (proxying /api), the page lists “Pen — ₹20”. Adding “Bag” with price 650 POSTs JSON, Express answers 201 and the list grows. Submitting without a price shows Express’s message “Name and a positive price are required”.