Description
Currently, navigating to any undefined route (e.g. codepvg.onrender.com/xyz) serves the browser's default 404 response or a blank Express fallback. This breaks the visual continuity of the site and gives no actionable path back to the app — a poor experience especially for first-time visitors who might mistype a URL.
solution
Add a custom 404.html page served by the Express server for all unmatched routes, consistent with the existing terminal/CLI aesthetic of the site.
Suggested content:
A terminal-style error output, e.g.:
guest@codepvg:~$ cd /that-page
bash: /that-page: No such file or directory
Clear, visible links back to /leaderboard and /registration
Optionally, a fun LeetCode-flavored message (e.g. "This route doesn't exist. Unlike your rank, which does.")
Implementation
In server.js, add a catch-all route after all other route definitions:
js// 404 handler — must be last
app.use((req, res) => {
res.status(404).sendFile(path.join(__dirname, 'frontend', '404.html'));
});
Then create frontend/404.html matching the existing design system (fonts, color palette, terminal prompt style from index.html).
Alternatives considered
- Redirecting all 404s to / — discards intent signal, hurts UX
- Inline error message without a dedicated file — harder to style and maintain
Additional context
Stack: Express + static HTML/CSS/JS (no framework), so no router config needed beyond the catch-all middleware
The fix is entirely frontend + one server.js line — a good good first issue candidate
Should be tested against both direct URL access and broken internal links
i'm a gssoc'26 contributor kindly assign this issue to me.
Description
Currently, navigating to any undefined route (e.g. codepvg.onrender.com/xyz) serves the browser's default 404 response or a blank Express fallback. This breaks the visual continuity of the site and gives no actionable path back to the app — a poor experience especially for first-time visitors who might mistype a URL.
solution
Add a custom 404.html page served by the Express server for all unmatched routes, consistent with the existing terminal/CLI aesthetic of the site.
Suggested content:
A terminal-style error output, e.g.:
guest@codepvg:~$ cd /that-page
bash: /that-page: No such file or directory
Clear, visible links back to /leaderboard and /registration
Optionally, a fun LeetCode-flavored message (e.g. "This route doesn't exist. Unlike your rank, which does.")
Implementation
In server.js, add a catch-all route after all other route definitions:
js// 404 handler — must be last
app.use((req, res) => {
res.status(404).sendFile(path.join(__dirname, 'frontend', '404.html'));
});
Then create frontend/404.html matching the existing design system (fonts, color palette, terminal prompt style from index.html).
Alternatives considered
Additional context
Stack: Express + static HTML/CSS/JS (no framework), so no router config needed beyond the catch-all middleware
The fix is entirely frontend + one server.js line — a good good first issue candidate
Should be tested against both direct URL access and broken internal links
i'm a gssoc'26 contributor kindly assign this issue to me.