init

frontend/src/routes/ROUTES.md

@@ -0,0 +1,71 @@
+# Routes Folder
+
+This folder contains the route definitions and components used to manage routing in the React application. It includes public and private routes, as well as nested layouts.
+
+## File Structure
+routes/  
+├── PrivateRoute.jsx  
+├── AppRoutes.jsx  
+└── index.js  
+
+
+### `PrivateRoute.jsx`
+
+`PrivateRoute` is a wrapper component that restricts access to certain routes based on the user's authentication status. Only logged-in users can access routes wrapped inside `PrivateRoute`.
+
+#### Example Usage
+
+```jsx
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuth } from "../auth"; // custom hook to get auth status
+
+const PrivateRoute = () => {
+  const { isLoggedIn } = useAuth();
+
+  return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
+};
+
+export default PrivateRoute;
+```
+
+` <Outlet /> ` allows nested routes to be rendered inside the PrivateRoute.
+
+### AppRoutes.jsx
+
+This file contains all the route definitions example of the app. It can use layouts from the layouts folder to wrap sections of the app.
+
+Example Usage
+```jsx
+import { Routes, Route } from "react-router-dom";
+import PrivateRoute from "./PrivateRoute";
+
+// Layouts
+import MainLayout from "../layouts/MainLayout";
+import AuthLayout from "../layouts/AuthLayout";
+
+// Pages
+import Dashboard from "../pages/Dashboard";
+import Profile from "../pages/Profile";
+import Login from "../pages/Login";
+
+const AppRoutes = () => {
+  return (
+    <Routes>
+      {/* Public Routes */}
+      <Route element={<AuthLayout />}>
+        <Route path="/login" element={<Login />} />
+      </Route>
+
+      {/* Private Routes */}
+      <Route element={<PrivateRoute />}>
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/profile" element={<Profile />} />
+        </Route>
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRoutes;
+```