Skip to content

Render a real 404 page for unknown routes #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KonstantinMB wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Render a real 404 page for unknown routes #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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>
);
Expand Down
51 changes: 51 additions & 0 deletions frontend/src/pages/NotFoundPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}