From d32a112e84ae15ac25aa1b5623c2c55b378cfb0f Mon Sep 17 00:00:00 2001
From: KonstantinMB <konstantinmb@yahoo.com>
Date: Tue, 19 May 2026 10:48:57 +0300
Subject: [PATCH] Render a real 404 page for unknown routes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unknown URLs previously rendered as a 200 with an empty body — typos
and stale shared links landed users on a blank page with no nav and
no way to recover. Adds NotFoundPage as the last route inside the
Layout block so the nav is preserved and the user can navigate out.

Closes #12

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx                |  2 ++
 frontend/src/pages/NotFoundPage.tsx | 51 +++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 frontend/src/pages/NotFoundPage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3e29843..c7a9a87 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -30,6 +30,7 @@ import { ShareHub } from './pages/ShareHub';
 import { CompanyCardPage } from './pages/CompanyCardPage';
 import { HiringBoardPagePaginated } from './pages/HiringBoardPagePaginated';
 import { HiringAnalyticsPage } from './pages/HiringAnalyticsPage';
+import { NotFoundPage } from './pages/NotFoundPage';
 import './index.css';
 
 const queryClient = new QueryClient({
@@ -185,6 +186,7 @@ function AnimatedRoutes() {
         <Route path="founders" element={<FoundersPage />} />
         <Route path="roadmap" element={<RoadmapPage />} />
         <Route path="share" element={<ShareHub />} />
+        <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
   );
diff --git a/frontend/src/pages/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..1e80a55
--- /dev/null
+++ b/frontend/src/pages/NotFoundPage.tsx
@@ -0,0 +1,51 @@
+import { Link, useLocation } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import { ArrowLeft } from 'lucide-react';
+
+export function NotFoundPage() {
+  const location = useLocation();
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Helmet>
+        <title>404 Not Found — ExploreYC</title>
+        <meta name="robots" content="noindex" />
+      </Helmet>
+      <div className="container mx-auto px-4 py-16 max-w-2xl">
+        <div className="font-mono text-muted-foreground text-sm mb-4">
+          $ cd <span className="text-[#FB651E]">{location.pathname}</span>
+        </div>
+        <div className="font-mono text-muted-foreground text-sm mb-8">
+          <span className="text-red-500">error:</span> no such file or directory
+        </div>
+
+        <h1 className="text-4xl font-bold mb-3">
+          <span className="font-mono text-[#FB651E]">&gt;</span> Page not found
+        </h1>
+        <p className="text-muted-foreground font-mono mb-8">
+          The page you're looking for doesn't exist on ExploreYC — yet.
+          If you followed a link from somewhere else, it might be stale.
+        </p>
+
+        <div className="flex flex-col gap-2 font-mono text-sm">
+          <div className="text-muted-foreground mb-2">Try one of these:</div>
+          <Link to="/" className="text-[#FB651E] hover:underline">→ Home (the YC company explorer)</Link>
+          <Link to="/hiring" className="text-[#FB651E] hover:underline">→ Hiring board</Link>
+          <Link to="/validator" className="text-[#FB651E] hover:underline">→ Idea validator</Link>
+          <Link to="/analytics/batches" className="text-[#FB651E] hover:underline">→ Batch analytics</Link>
+          <Link to="/founders" className="text-[#FB651E] hover:underline">→ For founders</Link>
+        </div>
+
+        <div className="mt-12 pt-6 border-t border-border">
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 text-sm font-mono text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}