Missing 404 page — non-existent routes show a blank page

[thomasiverson]

Description

Navigating to a non-existent route (e.g., http://localhost:5137/nonexistent) renders a completely blank <main> element with no content, no error message, and no redirect. The console shows:

No routes matched location "/nonexistent"

Expected behavior

A user-friendly 404 "Page Not Found" page should be displayed with:

• A clear message that the page doesn't exist
• A link back to the Home page or other navigation options

Steps to reproduce

1. Start the frontend dev server (npm run dev:frontend)
2. Navigate to http://localhost:5137/nonexistent (or any URL not matching a defined route)
3. Observe the blank page between the navigation bar and footer

Suggested fix

Add a catch-all Route element in frontend/src/App.tsx:

<Route path="*" element={<NotFound />} />

Create a NotFound component that renders a styled 404 page.

Affected area

frontend/src/App.tsx — Routes configuration