Add 404 Not Found Page with Proper Routing Handling

[Shalini828]

Problem Statement

Currently, navigating to an undefined route may either show a blank screen or default browser behavior. This negatively impacts user experience.

Proposed Solution

• Create a dedicated 404 page component
• Implement wildcard route handling (e.g., * route in React Router)
• Add navigation button to return to home
• Ensure consistent UI styling

Acceptance Criteria

• All unknown routes display the custom 404 page
• Page includes a clear message and navigation option
• No console errors
• Follows project design guidelines

Why This Matters

Improves UX, provides graceful error handling, and makes the application more production-ready.

I would like to work on this issue.
Kindly assign this to me .
Thanks !

[SyedFahad7]

Hi @Shalini828
You can work on this. Thanks for picking it up.
Just one clarification. The custom 404 should be scoped only to the development tools section. For example:
Valid route:
https://www.betterbugs.io/development-tools/text-uppercase-converter
Invalid route:
https://www.betterbugs.io/development-tools/text-uppercase-converterrr
In such cases, we should show the custom 404 page specifically for development tools routes. It does not need to affect other parts of the website.
A few suggestions while implementing:
• Keep it minimal and aligned with our current theming and brand language
• Maintain consistent typography, spacing, and color system
• Add a clear CTA like “Back to Development Tools” or “Go to Home”
• Avoid console errors and unnecessary re renders
Once done, please raise the PR to the develop branch.
Thanks!

[udaykiran243]

hey @rishima17 can I work on this.

[rishima17]

@udaykiran243 please once check the review provided by syed on the shalini's PR and then start working.