Feat Error 404 page

[dev129]

Pull Request: Fix for 404 Error Page Issue (#144) - PenCraft Full Stack

Hi @AkshitLakhera

Description:

This PR addresses issue #144 regarding the missing or incorrectly rendered 404 error page in the PenCraft Full Stack application. The 404 page is now designed to be more user-friendly, providing a clear and consistent error message when users navigate to a non-existent page.

Changes Made:

• 404 Error Page Design: Improved the layout and styling of the 404 error page located in frontend/src/not-found.tsx.
• Error Handling: Updated routing and error handling to ensure that invalid routes correctly lead to the custom 404 page instead of a default server error page.
• Image Update: Included a relevant error image stored in frontend/public/Error404.png to enhance the user experience.

Files Modified:

• frontend/src/not-found.tsx – Updated the 404 error page component with the new design and routing.
• frontend/public/Error404.png – Added a custom error image for the 404 page.

New Features:

• Custom error message: "Oops! The page you're looking for doesn't exist."
• A navigation link back to the homepage for better user experience.
• A clean, modern layout that aligns with the overall PenCraft theme.
• The image Error404.png has been integrated into the page for visual appeal.

Screenshot:

Here is a screenshot of the newly designed 404 error page:

Desktop View:

Mobile View :

Testing:

• Tested by manually navigating to random non-existent URLs within the app.
• Ensured that invalid URLs are correctly captured by the routing logic and redirected to the custom 404 page.
• Verified the error page's responsiveness across both desktop and mobile devices.

Impact:

• The app will now display a user-friendly 404 error page with an informative message and visually cohesive design.
• The app's overall user experience is improved by providing clear guidance when users land on non-existent pages.

To Do:

• Review and merge the PR after testing on staging.
• Update any related documentation regarding custom error pages.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pen-craft	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 8, 2024 5:11am

[gitguardian[bot]]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard. Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secret in your pull request

| GitGuardian id | GitGuardian status | Secret | Commit | Filename | | | -------------- | ------------------ | ------------------------------ | ---------------- | --------------- | -------------------- | | [9682237](https://dashboard.gitguardian.com/workspace/489709/incidents/9682237) | Triggered | Base64 Generic High Entropy Secret | 1cb15ff08fdb1c1ee26899b4ad0da3005998d0f1 | backend/wrangler.toml | [View secret](https://github.com/AkshitLakhera/PenCraft-Full-Stack-Blogging-Application/commit/1cb15ff08fdb1c1ee26899b4ad0da3005998d0f1#diff-172ff0ba6896e66da9f26b13d71f5d76de93cc5fa10e301d4490e14d884da354L5) |

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code. 2. Replace and store your secret safely. [Learn here](https://blog.gitguardian.com/secrets-api-management?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) the best practices. 3. Revoke and [rotate this secret](https://docs.gitguardian.com/secrets-detection/secrets-detection-engine/detectors/generics/base64_generic_high_entropy_secret#revoke-the-secret?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). 4. If possible, [rewrite git history](https://blog.gitguardian.com/rewriting-git-history-cheatsheet?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data. To avoid such incidents in the future consider - following these [best practices](https://blog.gitguardian.com/secrets-api-management/?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) for managing and storing secrets including API keys and other credentials - install [secret detection on pre-commit](https://docs.gitguardian.com/ggshield-docs/integrations/git-hooks/pre-commit?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[AkshitLakhera]

@dev129 pull the latest changes then push the code

[dev129]

Hi @AkshitLakhera , I ahve update the page now please look into it and let me know.

[dev129]

Hi @AkshitLakhera , please review my PR.

[aslams2020]

This PR has been merged by the GSSoC team here - https://github.com/sanjay-kv/Open-source-Practice/pull/1413

Don't add labels to it now. You'll get the points in the leaderboard update.