feat: add guide page

src/App.tsx

@@ -0,0 +1,64 @@
+import { Outlet, Link } from "react-router-dom"
+import { useMemo, useState } from "react"
+import moment from "moment"
+
+/**
+ * Main application component that serves as the root layout.
+ * Uses React Router's Outlet to render child routes.
+ */
+export default function App() {
+  const today = useMemo(() => moment(), [])
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Navigation Header */}
+      <header className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center">
+              <h1 className="text-xl font-semibold text-gray-900">
+                OnixByte React Template
+              </h1>
+            </div>
+            <nav className="flex space-x-8">
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                Home
+              </Link>
+              <Link
+                to="/about"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                About
+              </Link>
+              <Link
+                to="/contact"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                Contact
+              </Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content Area */}
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-6 sm:px-0">
+          <Outlet />
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-white border-t mt-auto">
+        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
+          <p className="text-center text-sm text-gray-500">
+            © 2024-{today.year()} OnixByte. Built with React & TypeScript.
+          </p>
+        </div>
+      </footer>
+    </div>
+  )
+}

src/components/error-page/index.tsx

@@ -0,0 +1,69 @@
+import { useRouteError, Link } from "react-router-dom"
+
+/**
+ * Error page component that displays when routing errors occur.
+ * Uses React Router's useRouteError hook to get error information.
+ */
+export default function ErrorPage() {
+  const error = useRouteError() as Error & { statusText?: string; status?: number }
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <div className="text-center">
+            {/* Error Icon */}
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
+              <svg
+                className="h-6 w-6 text-red-600"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                />
+              </svg>
+            </div>
+
+            {/* Error Title */}
+            <h1 className="mt-4 text-2xl font-bold text-gray-900">
+              Oops! Something went wrong
+            </h1>
+
+            {/* Error Message */}
+            <div className="mt-4">
+              <p className="text-sm text-gray-600">
+                {error?.statusText ?? error?.message ?? "An unexpected error occurred"}
+              </p>
+              {error?.status && (
+                <p className="text-xs text-gray-500 mt-1">
+                  Error Code: {error.status}
+                </p>
+              )}
+            </div>
+
+            {/* Action Buttons */}
+            <div className="mt-6 flex flex-col space-y-3">
+              <Link
+                to="/"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Go back home
+              </Link>
+              <button
+                onClick={() => window.history.back()}
+                className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Go back
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/layout/empty-layout/index.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom"
+
+/**
+ * Empty layout component that provides minimal structure.
+ * Useful for pages that need full control over their layout.
+ */
+export default function EmptyLayout() {
+  return (
+    <div className="min-h-screen">
+      <Outlet />
+    </div>
+  )
+}

src/main.tsx

@@ -1,21 +1,19 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { Provider } from "react-redux"
-import { BrowserRouter, Route, Routes } from "react-router"
+import { RouterProvider } from "react-router-dom"
 import store from "@/store"
+import router from "@/router"
 import "./index.css"
-import ProtectedRoute from "@/components/protected-route"
 
+/**
+ * Main application entry point.
+ * Sets up the React app with Redux store and React Router.
+ */
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Provider store={store}>
-      <BrowserRouter>
+      <RouterProvider router={router} />
-        <Routes>
-          <Route element={<ProtectedRoute />}>
-            <Route path="/" element={null}></Route>
-          </Route>
-        </Routes>
-      </BrowserRouter>
     </Provider>
   </StrictMode>,
 )

src/page/about/index.tsx

@@ -0,0 +1,110 @@
+/**
+ * About page component that displays information about the application.
+ */
+export default function About() {
+  return (
+    <div className="space-y-8">
+      {/* Page Header */}
+      <div className="text-center">
+        <h1 className="text-3xl font-bold text-gray-900 sm:text-4xl">
+          About This Template
+        </h1>
+        <p className="mt-4 text-lg text-gray-600">
+          Learn more about the technologies and architecture behind this React Router template.
+        </p>
+      </div>
+
+      {/* Content Sections */}
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        {/* Technology Stack */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            Technology Stack
+          </h2>
+          <ul className="space-y-3">
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
+              <span className="text-gray-700"><strong>React 19</strong> - Latest version with modern features</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
+              <span className="text-gray-700"><strong>TypeScript</strong> - Type-safe development</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
+              <span className="text-gray-700"><strong>React Router v7</strong> - Client-side routing</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
+              <span className="text-gray-700"><strong>Tailwind CSS</strong> - Utility-first styling</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
+              <span className="text-gray-700"><strong>Redux Toolkit</strong> - State management</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
+              <span className="text-gray-700"><strong>Vite</strong> - Fast build tool and dev server</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* Features */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            Key Features
+          </h2>
+          <ul className="space-y-3">
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
+              <span className="text-gray-700">Modern React Router implementation</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
+              <span className="text-gray-700">Protected routes with authentication</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
+              <span className="text-gray-700">Error boundary and error pages</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
+              <span className="text-gray-700">Responsive design with Tailwind</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
+              <span className="text-gray-700">TypeScript for type safety</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
+              <span className="text-gray-700">ESLint and Prettier configuration</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      {/* Architecture Overview */}
+      <div className="bg-white shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold text-gray-900 mb-4">
+          Architecture Overview
+        </h2>
+        <div className="prose max-w-none text-gray-700">
+          <p className="mb-4">
+            This template follows modern React development practices with a clear separation of concerns:
+          </p>
+          <ul className="list-disc list-inside space-y-2 mb-4">
+            <li><strong>Components:</strong> Reusable UI components organised by feature</li>
+            <li><strong>Pages:</strong> Route-level components that represent different views</li>
+            <li><strong>Layouts:</strong> Wrapper components that provide consistent structure</li>
+            <li><strong>Store:</strong> Redux Toolkit slices for state management</li>
+            <li><strong>Router:</strong> Centralised routing configuration</li>
+          </ul>
+          <p>
+            The routing system uses React Router&apos;s latest data router approach with <code>createBrowserRouter</code>,
+            providing better performance and developer experience compared to the legacy BrowserRouter approach.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/page/contact/index.tsx

@@ -0,0 +1,171 @@
+import React from "react"
+
+/**
+ * Contact page component that displays contact information and a contact form.
+ */
+export default function Contact() {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    // Handle form submission logic here
+    alert("Thank you for your message! This is a demo form.")
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Page Header */}
+      <div className="text-center">
+        <h1 className="text-3xl font-bold text-gray-900 sm:text-4xl">
+          Get in Touch
+        </h1>
+        <p className="mt-4 text-lg text-gray-600">
+          Have questions about this template? We&apos;d love to hear from you.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Contact Information */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-6">
+            Contact Information
+          </h2>
+          
+          <div className="space-y-4">
+            {/* Email */}
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm font-medium text-gray-900">Email</p>
+                <p className="text-sm text-gray-600">zihlu.wang@outlook.com</p>
+              </div>
+            </div>
+
+            {/* GitHub */}
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <svg className="h-6 w-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm font-medium text-gray-900"><a href="https://github.com/onixbyte/react-template">GitHub</a></p>
+                <p className="text-sm text-gray-600">github.com/onixbyte/react-template</p>
+              </div>
+            </div>
+
+            {/* Documentation */}
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm font-medium text-gray-900">Documentation</p>
+                <p className="text-sm text-gray-600">Check the README.md file</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div className="mt-8">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">Quick Links</h3>
+            <div className="space-y-2">
+              <a href="https://reactrouter.com" target="_blank" rel="noopener noreferrer" className="block text-blue-600 hover:text-blue-800 text-sm">
+                React Router Documentation →
+              </a>
+              <a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer" className="block text-blue-600 hover:text-blue-800 text-sm">
+                Tailwind CSS Documentation →
+              </a>
+              <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer" className="block text-blue-600 hover:text-blue-800 text-sm">
+                Vite Documentation →
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Contact Form */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-6">
+            Send us a Message
+          </h2>
+          
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Name */}
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+                Name
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="Your full name"
+              />
+            </div>
+
+            {/* Email */}
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="your.email@example.com"
+              />
+            </div>
+
+            {/* Subject */}
+            <div>
+              <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-1">
+                Subject
+              </label>
+              <input
+                type="text"
+                id="subject"
+                name="subject"
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="What is this about?"
+              />
+            </div>
+
+            {/* Message */}
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
+                Message
+              </label>
+              <textarea
+                id="message"
+                name="message"
+                rows={4}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="Tell us more about your question or feedback..."
+              />
+            </div>
+
+            {/* Submit Button */}
+            <div>
+              <button
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Send Message
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

src/page/home/index.tsx

@@ -0,0 +1,140 @@
+import { Link } from "react-router-dom"
+
+/**
+ * Home page component that displays the main landing content.
+ */
+export default function Home() {
+  return (
+    <div className="space-y-8">
+      {/* Hero Section */}
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl md:text-6xl">
+          Welcome to OnixByte React Template
+        </h1>
+        <p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+          A modern React application template with <b>TypeScript</b>, <b>Tailwind CSS</b>,{" "}
+          <b>Redux</b>, and <b>React Router</b> for seamless navigation.
+        </p>
+      </div>
+
+      {/* Features Grid */}
+      <div className="mt-12">
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {/* Feature 1 */}
+          <div className="bg-white overflow-hidden shadow rounded-lg">
+            <div className="p-6">
+              <div className="flex items-center">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-8 w-8 text-blue-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 10V3L4 14h7v7l9-11h-7z"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-4">
+                  <h3 className="text-lg font-medium text-gray-900">Fast Development</h3>
+                </div>
+              </div>
+              <div className="mt-4">
+                <p className="text-sm text-gray-500">
+                  Built with Vite for lightning-fast development experience and hot module
+                  replacement.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature 2 */}
+          <div className="bg-white overflow-hidden shadow rounded-lg">
+            <div className="p-6">
+              <div className="flex items-center">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-8 w-8 text-green-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-4">
+                  <h3 className="text-lg font-medium text-gray-900">Type Safety</h3>
+                </div>
+              </div>
+              <div className="mt-4">
+                <p className="text-sm text-gray-500">
+                  Full TypeScript support with strict type checking for better code quality and
+                  developer experience.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature 3 */}
+          <div className="bg-white overflow-hidden shadow rounded-lg">
+            <div className="p-6">
+              <div className="flex items-center">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-8 w-8 text-purple-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-4">
+                  <h3 className="text-lg font-medium text-gray-900">Modern Styling</h3>
+                </div>
+              </div>
+              <div className="mt-4">
+                <p className="text-sm text-gray-500">
+                  Tailwind CSS for utility-first styling with responsive design and modern UI
+                  components.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Call to Action */}
+      <div className="bg-blue-50 rounded-lg p-6 text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Ready to start building?</h2>
+        <p className="text-gray-600 mb-6">
+          Explore the navigation above to see React Router in action, or check out the source code
+          to understand the implementation.
+        </p>
+        <div className="flex justify-center space-x-4">
+          <Link
+            to="/about"
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+            Learn More
+          </Link>
+          <Link
+            to="/contact"
+            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+            Get in Touch
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

src/router/index.tsx

@@ -0,0 +1,34 @@
+import { createBrowserRouter } from "react-router-dom"
+import App from "@/App"
+import ErrorPage from "@/components/error-page"
+import HomePage from "@/page/home"
+import AboutPage from "@/page/about"
+import ContactPage from "@/page/contact"
+
+/**
+ * Main application router configuration using React Router v6.
+ * Defines all routes and their corresponding components.
+ */
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: "about",
+        element: <AboutPage />,
+      },
+      {
+        path: "contact",
+        element: <ContactPage />,
+      },
+    ],
+  },
+])
+
+export default router