feat: Add Playful Custom 404 Page Not Found Component

[manishworkss]

• Created a new NotFound component in src/pages/NotFound/NotFound.tsx
• Used framer-motion to add animated ghost illustration and pulsating shadow
• Designed the page using Tailwind CSS for a playful and modern aesthetic
• Imported and configured the NotFound component as a wildcard catch-all route (*) in Router.tsx to handle all invalid URLs

Related Issue

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

---

Description

Previously, if a user navigated to an invalid or broken URL, the application lacked a fallback route, resulting in a poor user experience. This PR introduces a dedicated, fully responsive 404 component to gracefully handle these edge cases. To make it more engaging for users, I utilized framer-motion for a subtle ghost animation and designed the layout with Tailwind CSS to match the project's overall aesthetic, complete with dark mode support. A "Teleport Back Home" button was also added to seamlessly route users back to the dashboard.

---

How Has This Been Tested?

• Spun up the local dev server using npm run dev.
• Navigated manually to multiple invalid URLs (e.g., http://127.0.0.1:5173/ghost-town).
• Verified that the animated 404 component renders flawlessly on both desktop and mobile viewports.
• Clicked the "Teleport Back Home" button and confirmed that react-router-dom correctly redirects back to the root / path.

---

Screenshots (if applicable)

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

Summary by CodeRabbit

• New Features
  • Added a 404 error page that displays when users navigate to non-existent URLs, featuring animated visual elements and a quick navigation option to return to the home page.

[netlify]

❌ Deploy Preview for github-spy failed.

Name	Link
🔨 Latest commit	ced38dd
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a1c111f6af9670008f8ad98

[coderabbitai]

Warning

Review limit reached

@mehul-m-prajapati, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 28 minutes and 18 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7b4d4d87-87a5-4c6a-b0d2-00f07c021a88

📥 Commits

Reviewing files that changed from the base of the PR and between 027290b and ced38dd.

📒 Files selected for processing (1)

• src/Routes/Router.tsx

📝 Walkthrough

Walkthrough

This PR implements a custom 404 page for the application. A new NotFound component is created with animated visuals (framer-motion ghost icon with floating effects) and dark-mode-aware styling. The Router is updated to import this component and register a catch-all route (path="*") that renders the NotFound page for any unmatched URL.

Changes

404 Page with Router Integration

Layer / File(s)	Summary
NotFound page component and router integration src/pages/NotFound/NotFound.tsx, src/Routes/Router.tsx	New NotFound component renders a 404 page with animated ghost illustration, gradient text, and a styled home link; Router imports the component and registers a path="*" catch-all route to display it when no other route matches.

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly Related PRs

• GitMetricsLab/github_tracker#334: Both PRs wire a React Router wildcard (path="*") to a dedicated custom 404 component in the router.

Suggested Labels

quality:clean, level:beginner

Poem

🐰 A ghost floats free through missing pages,
With shimmer-steps through the ether stages,
"Teleport back home!" the phantom calls,
No broken links, no shattered halls,
Four-oh-four finds its graceful sprawl! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a custom 404 NotFound component with playful features.
Description check	✅ Passed	The description comprehensively covers all required sections including related issue, detailed description, testing verification, screenshots, and type of change selection.
Linked Issues check	✅ Passed	All requirements from issue #630 are met: NotFound component created with Tailwind CSS, dark mode support, Back Home button with react-router-dom, and wildcard route added to Router.tsx.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue #630 objectives; no out-of-scope modifications detected beyond the scope of implementing the 404 page feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉 Thank you @manishworkss for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #632 has been merged! 🎉🎉