Problem
Navigating to any URL the React router doesn't recognize returns HTTP 200 with an empty body instead of a 404 page. Users hitting a typo, stale link, or someone else's typo'd share end up looking at a blank cream-colored page with no nav, no message, no escape route.
Reproduction (verified via gstack QA)
$ B=~/.claude/skills/gstack/browse/dist/browse
$ $B goto https://exploreyc.com/this-is-not-a-real-page
Navigated to https://exploreyc.com/this-is-not-a-real-page (200)
$ $B wait --networkidle
$ $B js "document.body.innerHTML.length"
31 # i.e. essentially empty
$ $B js "document.body.textContent"
"\n \n \n\n"
Same happens for stale URLs that sound right but aren't actual routes — e.g. I found this while testing /validate-idea (the real route is /validator). A shared link to /validate-idea from a blog post, tweet, or old README would silently fail.
Proposed fix
Add a catch-all <Route path="*"> in the React router that renders a small 404 page with:
- A clear "Page not found" message
- The site nav (so the user can recover)
- A link back home
- Maybe a witty hacker-themed touch to match the rest of the design
In the future, also wire up vercel.json routes so the response status is 404 (not 200), but that's a follow-up — the React-level fix is the user-visible win.
Acceptance criteria
Pointers
frontend/src/App.tsx — where the <Routes> block lives. Add <Route path="*" element={<NotFoundPage />} /> at the end.
- Create
frontend/src/pages/NotFoundPage.tsx for the 404 component.
Scope
Touches 2 files (1 new). Estimated time: 30 min - 1 hour.
Want to take this on? Comment below and I'll assign it.
Problem
Navigating to any URL the React router doesn't recognize returns HTTP 200 with an empty body instead of a 404 page. Users hitting a typo, stale link, or someone else's typo'd share end up looking at a blank cream-colored page with no nav, no message, no escape route.
Reproduction (verified via gstack QA)
Same happens for stale URLs that sound right but aren't actual routes — e.g. I found this while testing
/validate-idea(the real route is/validator). A shared link to/validate-ideafrom a blog post, tweet, or old README would silently fail.Proposed fix
Add a catch-all
<Route path="*">in the React router that renders a small 404 page with:In the future, also wire up
vercel.jsonroutesso the response status is 404 (not 200), but that's a follow-up — the React-level fix is the user-visible win.Acceptance criteria
https://exploreyc.com/whatever-junkrenders the new 404 page with the site nav404 Not Found — ExploreYC(works with the per-page-title issue once that lands)Pointers
frontend/src/App.tsx— where the<Routes>block lives. Add<Route path="*" element={<NotFoundPage />} />at the end.frontend/src/pages/NotFoundPage.tsxfor the 404 component.Scope
Touches 2 files (1 new). Estimated time: 30 min - 1 hour.
Want to take this on? Comment below and I'll assign it.