Skip to content

[Enhancement]: Add a Custom 404 "Page Not Found" Route & Component #630

@manishworkss

Description

@manishworkss

🔖 Feature description

Currently, the application does not have a fallback/wildcard route in src/Routes/Router.tsx. If a user accidentally navigates to an invalid URL (e.g., /random-path), the app fails to show a proper error page and results in a poor user experience (often a blank page or broken layout).

Proposed Solution:

  1. Create a new NotFound.tsx page component in the src/pages directory.
  2. Design the page using Tailwind CSS to match the app's current theme (including dark mode support), featuring a friendly "404 - Page Not Found" message.
  3. Add a "Back to Home" button utilizing react-router-dom to safely redirect the user.
  4. Add the wildcard route <Route path="*" element={<NotFound />} /> to Router.tsx.

🎤 Screenshot

N/A - This is a proposal for a new feature, so there are no screenshots yet. I will make sure to include screenshots of the new 404 page in the Pull Request once it is implemented!

🔄️ Additional Information

This enhancement will significantly improve the overall UI/UX by preventing users from getting stuck on broken links.

Mentorship / GSSoC'26
I am a GSSoC '26 contributor and I would love to work on this enhancement! Please assign this to me with the gssoc26 label so I can start working on it. 🚀

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions