Personal Catalogue: React, Express & MongoDB — Chapter 9, Exercise 1
=====================================================================

TASK
Create src/api.js and .env.development, then update all six fetch call
sites listed in this chapter's own table to use API_BASE_URL. Confirm
the dev app (npm run dev + nodemon server.js) still works exactly as
before.

SOLUTION

src/api.js:

  export const API_BASE_URL = import.meta.env.VITE_API_URL ?? '';

catalogue-web/.env.development:

  VITE_API_URL=http://localhost:4000

The six updated call sites:

  // AddItemForm.jsx
  import { API_BASE_URL } from '../api';
  ...
  const res = await fetch(`${API_BASE_URL}/api/items`, { method: 'POST', ... });

  // AddItemForm.jsx's own duplicate-check hook usage stays the same
  // shape, since useDuplicateCheck itself now imports API_BASE_URL directly.

  // TagEditor.jsx
  import { API_BASE_URL } from '../api';
  ...
  fetch(`${API_BASE_URL}/api/items/${bookId}/tags/add`, ...);
  fetch(`${API_BASE_URL}/api/items/${bookId}/tags/remove`, ...);

  // TagFilter.jsx
  import { API_BASE_URL } from '../api';
  ...
  const url = tag
    ? `${API_BASE_URL}/api/items?tag=${encodeURIComponent(tag)}`
    : `${API_BASE_URL}/api/items`;

  // SearchBar.jsx
  import { API_BASE_URL } from '../api';
  ...
  const url = q
    ? `${API_BASE_URL}/api/items/search?q=${encodeURIComponent(q)}`
    : `${API_BASE_URL}/api/items`;

  // App.jsx
  import { API_BASE_URL } from './api';
  ...
  fetch(`${API_BASE_URL}/api/items`).then(...);

  // useDuplicateCheck.js
  import { API_BASE_URL } from '../api';
  ...
  fetch(`${API_BASE_URL}/api/items/search?q=${encodeURIComponent(trimmed)}`);

Run with: npx nodemon server.js (backend) and npm run dev (frontend, in
catalogue-web)
Output: the app behaves identically to before this change -- adding
items, editing tags, searching, and filtering by tag all still work,
since VITE_API_URL=http://localhost:4000 in .env.development makes
API_BASE_URL resolve to the exact same literal string every fetch call
used to hardcode directly.

WHY THIS WORKS AS AN ANSWER
----------------------------
It creates the single source of truth exactly as the chapter specifies
and updates every one of the six real call sites the chapter's own
table identifies, then confirms the refactor is behavior-preserving in
dev -- the whole point of the change is that nothing should look or act
differently yet, only the source of the URL should have moved.