Fake / mock backend

What this example does

The included Node server runs on your own computer. It stores customers in memory and supports creating, listing, searching, updating and deleting records. It sends real HTTP responses, including validation errors, so you can develop UI before a database is ready.

Start the server

Use Node.js 24.14+ to match the project toolchain. From this documentation folder:

node examples/mock-server.cjs

No npm install is needed. Open http://127.0.0.1:5188/client for the included standalone API testing client. Keep the terminal open; Ctrl+C stops the server. If the port is occupied, use PowerShell:

$env:PORT = "5189"
node examples/mock-server.cjs

Change the client URL and React API base to that port. The browser client at /client uses the same origin automatically.

Try the full workflow

1. Create a customer with a unique email.
2. Search by name or email and edit the customer’s plan or status.
3. Try a duplicate email: the server returns 409 and the form keeps your entries.
4. Click Simulate load failure: the API returns 503; Refresh recovers.
5. Delete a sample customer after confirmation.
6. Restart the server to return to the initial two records.

Endpoint reference

Fields: name (1–80 characters), email (valid format, unique), plan (Starter/Growth/Scale), status (Active/Trial/Archived). The server ignores client IDs on create. PATCH retains unspecified fields. Malformed JSON returns 400; invalid fields return 422.

Test from PowerShell

$base = 'http://127.0.0.1:5188/api'
Invoke-RestMethod "$base/customers"
$body = @{ name='Taylor Demo'; email='taylor@example.com'; plan='Growth'; status='Trial' } | ConvertTo-Json
$created = Invoke-RestMethod "$base/customers" -Method Post -ContentType 'application/json' -Body $body
Invoke-RestMethod "$base/customers/$($created.id)" -Method Patch -ContentType 'application/json' -Body '{"status":"Active"}'
Invoke-RestMethod "$base/customers/$($created.id)" -Method Delete

Connect the React edition

1. Copy MockCustomersPage.tsx into adminbag-react/src/pages/.
2. Register a /mock-customers route inside DashboardLayout as shown in Routes and new pages.
3. Run the mock server and the React development server in separate terminals.
4. Visit /#/mock-customers. The page handles loading, invalid responses, request cancellation and Retry.
5. Create a record in the API testing client, then reload the React page to see the shared API data.

VITE_DEMO_API_URL=http://127.0.0.1:5188/api

This optional .env.local value overrides the example’s default. Restart Vite after changing it. The supplied React page demonstrates reading; the API testing client source demonstrates all four CRUD operations.

CORS and production migration

The server permits local HTTP origins on localhost and 127.0.0.1. Use the Vite server, not file://. Set VITE_DEMO_API_URL for the copied example page and restart Vite. This setting only configures the copied example page. The connected workspace uses a different contract and src/config/backend.ts; see the Demo / API switch chapter.

Replace the teaching service with authenticated endpoints and persistent database storage. Handle 401, 403, 409 and validation failures. Remove reset/failure controls from a deployed application.