[Feature] Create a custom 404 "Page Not Found" component for invalid routes

[udhayavaran]

Description

If a user manually types an invalid URL (e.g., /dashboard/typo) or clicks a broken link, React Router will likely render a blank page or a generic error because no fallback route is defined in the router configuration.

Proposed Solution

1. Create a NotFound.jsx component displaying a friendly 404 message (e.g., "Oops! Looks like you forged the wrong path.").
2. Add a Call-to-Action (CTA) button in the component that navigates the user back to the / or /dashboard route.
3. Add the catch-all route (path="*") to the main router configuration to render this component.

Impact

• Prevents users from getting stuck on a blank/broken screen.
• Adds professional polish to the client-side routing architecture.

I have experience with React Router and Tailwind CSS. Kindly assign this issue to me under GSSoC 2026.

[github-actions]

Hi @udhayavaran, please wait 6h before claiming this issue again (cooldown active).

[udhayavaran]

/assign gssoc

[github-actions]

Hi @udhayavaran, please wait 6h before claiming this issue again (cooldown active).

[khalidsaifullah-ks]

Hi! I am a GSSoC '26 contributor. I would love to work on this issue. Could you please assign it to me? Thank you!

[karrisanthoshigayatri]

Hi @aryandas2911,

I'd like to work on this issue under GSSoC'26.

I understand that the application currently doesn't have a dedicated fallback route for invalid URLs, which can result in a blank page or a generic error. I'd like to implement a user-friendly 404 page that aligns with the application's design and improves the overall navigation experience.

My approach will be:

• Create a reusable NotFound.jsx component with a clean and responsive UI using the project's existing styling (Tailwind CSS).
• Display a friendly 404 message such as "Oops! Looks like you forged the wrong path." along with a brief explanation.
• Add a prominent CTA button that redirects users to the Home or Dashboard using React Router's useNavigate.
• Register a catch-all route (path="*") in the main router so that all invalid URLs render the NotFound component.
• Ensure the page is responsive, consistent with the application's theme, and verify that valid routes continue to function without any regressions.

I'll keep the implementation modular, lightweight, and consistent with the existing project structure while enhancing the overall user experience.

Could you please assign this issue to me? Thank you!

[surya0904shankar]

Hi! I am a GSSoC '26 contributor. I would like to work on this issue. I have experience with React Router and Tailwind CSS, and I'd like to implement the custom 404 component and the catch-all route as proposed. Could you please assign this to me? Thank you!