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

TASK
Scaffold the Vite-based React frontend and explain why this variant runs
two separate development servers, where the PHP sibling course needed
only one.

SOLUTION

Setup (run from a folder sibling to catalogue-api, not inside it):
1. `npm create vite@latest catalogue-web -- --template react`
2. `cd catalogue-web`
3. `npm install`
4. `npm run dev`

This starts the Vite dev server (typically on port 5173) serving the
React app. Separately, `npx nodemon server.js` inside catalogue-api
keeps the Express API running on port 4000. Both processes run at the
same time during development.

Why two servers instead of one:

The PHP sibling course needs exactly one server because PHP itself
generates the HTML response directly — a browser requests a page, the
PHP interpreter runs, and the finished HTML comes straight back in one
step. There is no separate "frontend build" to serve.

This React + Express variant genuinely separates those two concerns.
Express's own job is serving JSON data over an API — it never renders
any HTML page. React's own job is turning that JSON into a real user
interface, running entirely in the browser once the Vite-built
JavaScript loads. During development these are two independent
processes talking to each other over real HTTP requests (the React app
calls fetch() against http://localhost:4000/...); in production
(covered in Chapter 9) the React app gets built into static files that
can be served separately from the API, but the underlying separation
between "data" and "interface" stays the same either way.

WHY THIS WORKS AS AN ANSWER
----------------------------
It gives the real, runnable scaffolding commands in the correct order,
then explains the actual architectural reason for the two-server setup
(a template-rendering language producing finished HTML directly, versus
a JSON API paired with a separately running client-side interface)
rather than treating it as an arbitrary extra step.