Error boundary and 404 page added (#27)

Fixes #

# Description

Added a catch-all route as the 404 page
Added a root error boundary
Changed i18next backended to the more popular alternative

## Type of change

Please mark relevant options with an `x` in the brackets.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update
- [ ] Algorithm update - updates algorithm
documentation/questions/answers etc.
- [ ] Other (please describe):

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also
list any relevant details for your test configuration

- [ ] Integration tests
- [ ] Unit tests
- [x] Manual tests
- [ ] No tests required

# Reviewer checklist

Mark everything that needs to be checked before merging the PR.

- [ ] Check if the UI is working as expected and is satisfactory
- [ ] Check if the code is well documented
- [ ] Check if the behavior is what is expected
- [ ] Check if the code is well tested
- [ ] Check if the code is readable and well formatted
- [ ] Additional checks (document below if any)

# Screenshots (if appropriate):

# Questions (if appropriate):

.vscode/settings.json

@@ -39,5 +39,8 @@
 		"Readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
 		"README*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
 		"Dockerfile": "*.dockerfile, .devcontainer.*, .dockerignore, captain-definition, compose.*, docker-compose.*, dockerfile*"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
 	}
 }

app/entry.client.tsx

@@ -1,6 +1,6 @@
 import i18next from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
-import Fetch from "i18next-fetch-backend"
+import Backend from "i18next-http-backend"
 import { StrictMode, startTransition } from "react"
 import { hydrateRoot } from "react-dom/client"
 import { I18nextProvider, initReactI18next } from "react-i18next"
@@ -13,7 +13,7 @@ async function hydrate() {
 	await i18next
 		.use(initReactI18next) // Tell i18next to use the react-i18next plugin
 		.use(LanguageDetector) // Setup a client-side language detector
-		.use(Fetch) // Setup your backend
+		.use(Backend) // Setup your backend
 		.init({
 			...i18n, // spread the configuration
 			// This function detects the namespaces your routes rendered while SSR use

app/library/icon/icons/types.ts

@@ -1,7 +1,7 @@
 // This file is generated by icon spritesheet generator
 
 export const iconNames = [
-  "ShoppingCart",
+  "Ghost",
 ] as const
 
 export type IconName = typeof iconNames[number]

app/root.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next"
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse, useRouteError } from "react-router"
 import type { LinksFunction } from "react-router"
 import { useChangeLanguage } from "remix-i18next/react"
 import type { Route } from "./+types/root"
@@ -49,3 +49,21 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 		</html>
 	)
 }
+
+export const ErrorBoundary = () => {
+	const error = useRouteError()
+	const { t } = useTranslation()
+
+	const errorStatusCode = isRouteErrorResponse(error) ? error.status : "500"
+
+	return (
+		<div className="placeholder-index relative h-full min-h-screen w-screen flex items-center justify-center dark:bg-white sm:pb-16 sm:pt-8">
+			<div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8">
+				<div className="relative  min-h-72 flex flex-col justify-center sm:overflow-hidden sm:rounded-2xl p-1 md:p-4 lg:p-6">
+					<h1 className="text-center w-full text-red-600 text-2xl pb-2">{t(`error.${errorStatusCode}.title`)}</h1>
+					<p className="text-lg text-center w-full">{t(`error.${errorStatusCode}.description`)}</p>
+				</div>
+			</div>
+		</div>
+	)
+}

app/routes/$.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router"
+import { Icon } from "~/library/icon/Icon"
+
+export default function Route404() {
+	const navigate = useNavigate()
+	const { t } = useTranslation()
+
+	return (
+		<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 flex items-center justify-center p-4">
+			<div className="max-w-2xl w-full text-center">
+				<div className="mb-8 flex justify-center">
+					<Icon name="Ghost" className="h-24 w-24 text-indigo-600 animate-float" />
+				</div>
+
+				<h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
+				<h2 className="text-3xl font-semibold text-gray-800 mb-4">{t("error.404.title")}</h2>
+				<p className="text-gray-600 mb-8 text-lg">{t("error.404.description")}</p>
+
+				<div className="flex flex-col sm:flex-row gap-4 justify-center">
+					<button
+						type="button"
+						onClick={() => navigate(-1)}
+						className="inline-flex cursor-pointer items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors duration-300"
+					>
+						{t("navigation.back")}
+					</button>
+					<Link
+						to="/"
+						className="inline-flex cursor-pointer items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-300"
+					>
+						{t("navigation.home")}
+					</Link>
+				</div>
+			</div>
+		</div>
+	)
+}

app/tailwind.css

@@ -2,4 +2,15 @@
 
 @theme {
 	/* Your theme styles go here */
+	--animate-float: float 3s ease-in-out infinite;
+
+	@keyframes float {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(-10px);
+		}
+	}
 }

package.json

@@ -33,7 +33,7 @@
 		"hono": "4.6.12",
 		"i18next": "24.2.1",
 		"i18next-browser-languagedetector": "8.0.0",
-		"i18next-fetch-backend": "6.0.0",
+		"i18next-http-backend": "3.0.2",
 		"isbot": "5.1.17",
 		"pretty-cache-header": "1.0.0",
 		"react": "19.0.0",
@@ -68,7 +68,7 @@
 		"lefthook": "1.8.4",
 		"playwright": "1.49.0",
 		"prompt": "1.3.0",
-		"react-router-devtools": "1.1.0",
+		"react-router-devtools": "1.1.3",
 		"tailwindcss": "4.0.0",
 		"tsx": "4.19.2",
 		"typescript": "5.6.3",