From 9010f0d5943fccb7cec51aecbd4c1ee33703f26e Mon Sep 17 00:00:00 2001
From: Alan Alickovic <alan2207@live.com>
Date: Wed, 30 Oct 2024 23:00:34 +0100
Subject: [PATCH] Improvements (#220)

---
 apps/nextjs-app/e2e/tests/auth.setup.ts       |  2 +-
 apps/nextjs-app/src/app/auth/layout.tsx       | 18 +++-
 apps/nextjs-app/src/app/auth/login/page.tsx   |  5 +-
 .../nextjs-app/src/app/auth/register/page.tsx |  5 +-
 apps/nextjs-app/src/app/not-found.tsx         |  3 +-
 apps/nextjs-app/src/app/page.tsx              |  9 +-
 .../src/components/layouts/auth-layout.tsx    | 65 +++++++-------
 .../components/layouts/dashboard-layout.tsx   | 11 +--
 apps/nextjs-app/src/config/paths.ts           | 42 +++++++++
 .../features/auth/components/login-form.tsx   |  3 +-
 .../auth/components/register-form.tsx         |  3 +-
 .../components/discussion-view.tsx            |  3 +-
 .../components/discussions-list.tsx           |  3 +-
 apps/nextjs-app/src/lib/auth.tsx              |  9 +-
 apps/nextjs-app/src/lib/authorization.tsx     |  3 +-
 .../nextjs-pages/src/app/pages/auth/login.tsx |  5 +-
 .../src/app/pages/auth/register.tsx           |  5 +-
 .../src/components/layouts/auth-layout.tsx    |  8 +-
 .../components/layouts/dashboard-layout.tsx   | 11 +--
 apps/nextjs-pages/src/config/paths.ts         | 42 +++++++++
 .../features/auth/components/login-form.tsx   |  3 +-
 .../auth/components/register-form.tsx         |  3 +-
 .../components/discussion-view.tsx            |  3 +-
 .../components/discussions-list.tsx           |  3 +-
 apps/nextjs-pages/src/lib/api-client.ts       | 10 +--
 apps/nextjs-pages/src/lib/auth.tsx            |  5 +-
 apps/nextjs-pages/src/pages/404.tsx           |  3 +-
 apps/nextjs-pages/src/pages/index.tsx         |  5 +-
 apps/react-vite/src/app/router.tsx            | 87 ++++++++++---------
 apps/react-vite/src/app/routes/app/root.tsx   | 25 ++----
 apps/react-vite/src/app/routes/auth/login.tsx | 14 +--
 .../src/app/routes/auth/register.tsx          | 14 +--
 apps/react-vite/src/app/routes/landing.tsx    |  5 +-
 apps/react-vite/src/app/routes/not-found.tsx  |  3 +-
 .../src/components/layouts/auth-layout.tsx    | 14 ++-
 .../components/layouts/dashboard-layout.tsx   | 11 +--
 apps/react-vite/src/config/paths.ts           | 46 ++++++++++
 .../features/auth/components/login-form.tsx   |  3 +-
 .../auth/components/register-form.tsx         |  3 +-
 .../components/discussions-list.tsx           |  3 +-
 apps/react-vite/src/lib/api-client.ts         |  6 +-
 apps/react-vite/src/lib/auth.tsx              | 10 ++-
 42 files changed, 359 insertions(+), 175 deletions(-)
 create mode 100644 apps/nextjs-app/src/config/paths.ts
 create mode 100644 apps/nextjs-pages/src/config/paths.ts
 create mode 100644 apps/react-vite/src/config/paths.ts

diff --git a/apps/nextjs-app/e2e/tests/auth.setup.ts b/apps/nextjs-app/e2e/tests/auth.setup.ts
index 1117cc38..187d10c9 100644
--- a/apps/nextjs-app/e2e/tests/auth.setup.ts
+++ b/apps/nextjs-app/e2e/tests/auth.setup.ts
@@ -28,7 +28,7 @@ setup('authenticate', async ({ page }) => {
   // log out:
   await page.getByRole('button', { name: 'Open user menu' }).click();
   await page.getByRole('menuitem', { name: 'Sign Out' }).click();
-  await page.waitForURL('/auth/login?redirectTo=%2Fapp');
+  await page.waitForURL('/auth/login?redirectTo=%252Fapp');
 
   // log in:
   await page.getByLabel('Email Address').click();
diff --git a/apps/nextjs-app/src/app/auth/layout.tsx b/apps/nextjs-app/src/app/auth/layout.tsx
index 28a5c00f..6ee7609b 100644
--- a/apps/nextjs-app/src/app/auth/layout.tsx
+++ b/apps/nextjs-app/src/app/auth/layout.tsx
@@ -1,6 +1,8 @@
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import { AuthLayout as AuthLayoutComponent } from '@/components/layouts/auth-layout';
+import { Spinner } from '@/components/ui/spinner';
 
 export const metadata = {
   title: 'Bulletproof React',
@@ -8,7 +10,19 @@ export const metadata = {
 };
 
 const AuthLayout = ({ children }: { children: ReactNode }) => {
-  return <AuthLayoutComponent>{children}</AuthLayoutComponent>;
+  return (
+    <Suspense
+      fallback={
+        <div className="flex size-full items-center justify-center">
+          <Spinner size="xl" />
+        </div>
+      }
+    >
+      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
+        <AuthLayoutComponent>{children}</AuthLayoutComponent>
+      </ErrorBoundary>
+    </Suspense>
+  );
 };
 
 export default AuthLayout;
diff --git a/apps/nextjs-app/src/app/auth/login/page.tsx b/apps/nextjs-app/src/app/auth/login/page.tsx
index b779aef0..fcdfff01 100644
--- a/apps/nextjs-app/src/app/auth/login/page.tsx
+++ b/apps/nextjs-app/src/app/auth/login/page.tsx
@@ -2,6 +2,7 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
+import { paths } from '@/config/paths';
 import { LoginForm } from '@/features/auth/components/login-form';
 
 // export const metadata = {
@@ -17,7 +18,9 @@ const LoginPage = () => {
   return (
     <LoginForm
       onSuccess={() =>
-        router.replace(`${redirectTo ? `${redirectTo}` : '/app'}`)
+        router.replace(
+          `${redirectTo ? `${decodeURIComponent(redirectTo)}` : paths.app.dashboard.getHref()}`,
+        )
       }
     />
   );
diff --git a/apps/nextjs-app/src/app/auth/register/page.tsx b/apps/nextjs-app/src/app/auth/register/page.tsx
index 87ca70fd..aed4c1cb 100644
--- a/apps/nextjs-app/src/app/auth/register/page.tsx
+++ b/apps/nextjs-app/src/app/auth/register/page.tsx
@@ -3,6 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 
+import { paths } from '@/config/paths';
 import { RegisterForm } from '@/features/auth/components/register-form';
 import { useTeams } from '@/features/teams/api/get-teams';
 
@@ -28,7 +29,9 @@ const RegisterPage = () => {
   return (
     <RegisterForm
       onSuccess={() =>
-        router.replace(`${redirectTo ? `${redirectTo}` : '/app'}`)
+        router.replace(
+          `${redirectTo ? `${decodeURIComponent(redirectTo)}` : paths.app.dashboard.getHref()}`,
+        )
       }
       chooseTeam={chooseTeam}
       setChooseTeam={() => setChooseTeam(!chooseTeam)}
diff --git a/apps/nextjs-app/src/app/not-found.tsx b/apps/nextjs-app/src/app/not-found.tsx
index 2aa724ad..6f3ae4e6 100644
--- a/apps/nextjs-app/src/app/not-found.tsx
+++ b/apps/nextjs-app/src/app/not-found.tsx
@@ -1,11 +1,12 @@
 import { Link } from '@/components/ui/link';
+import { paths } from '@/config/paths';
 
 const NotFoundPage = () => {
   return (
     <div className="mt-52 flex flex-col items-center font-semibold">
       <h1>404 - Not Found</h1>
       <p>Sorry, the page you are looking for does not exist.</p>
-      <Link href="/" replace>
+      <Link href={paths.home.getHref()} replace>
         Go to Home
       </Link>
     </div>
diff --git a/apps/nextjs-app/src/app/page.tsx b/apps/nextjs-app/src/app/page.tsx
index 3276a41b..2d7d0051 100644
--- a/apps/nextjs-app/src/app/page.tsx
+++ b/apps/nextjs-app/src/app/page.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Link } from '@/components/ui/link';
+import { paths } from '@/config/paths';
 import { checkLoggedIn } from '@/utils/auth';
 
 const HomePage = () => {
@@ -15,7 +16,13 @@ const HomePage = () => {
         <p>Showcasing Best Practices For Building React Applications</p>
         <div className="mt-8 flex justify-center">
           <div className="inline-flex rounded-md shadow">
-            <Link href={isLoggedIn ? '/app' : '/auth/login'}>
+            <Link
+              href={
+                isLoggedIn
+                  ? paths.app.root.getHref()
+                  : paths.auth.login.getHref()
+              }
+            >
               <Button
                 icon={
                   <svg
diff --git a/apps/nextjs-app/src/components/layouts/auth-layout.tsx b/apps/nextjs-app/src/components/layouts/auth-layout.tsx
index 358ab30b..7f341ab4 100644
--- a/apps/nextjs-app/src/components/layouts/auth-layout.tsx
+++ b/apps/nextjs-app/src/components/layouts/auth-layout.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { useRouter, usePathname } from 'next/navigation';
-import { ReactNode, useEffect, Suspense } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { ReactNode, useEffect } from 'react';
 
 import { Link } from '@/components/ui/link';
-import { Spinner } from '@/components/ui/spinner';
+import { paths } from '@/config/paths';
 import { useUser } from '@/lib/auth';
 
 type LayoutProps = {
@@ -16,46 +15,44 @@ export const AuthLayout = ({ children }: LayoutProps) => {
   const user = useUser();
   const router = useRouter();
   const pathname = usePathname();
-  const isLoginPage = pathname === '/auth/login';
+  const isLoginPage = pathname === paths.auth.login.getHref();
   const title = isLoginPage
     ? 'Log in to your account'
     : 'Register your account';
 
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams?.get('redirectTo');
+
   useEffect(() => {
     if (user.data) {
-      router.replace('/app');
+      router.replace(
+        `${redirectTo ? `${decodeURIComponent(redirectTo)}` : paths.app.dashboard.getHref()}`,
+      );
     }
-  }, [user.data, router]);
+  }, [user.data, router, redirectTo]);
 
   return (
-    <Suspense
-      fallback={
-        <div className="flex size-full items-center justify-center">
-          <Spinner size="xl" />
+    <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex justify-center">
+          <Link
+            className="flex items-center text-white"
+            href={paths.home.getHref()}
+          >
+            <img className="h-24 w-auto" src="/logo.svg" alt="Workflow" />
+          </Link>
         </div>
-      }
-    >
-      <ErrorBoundary key={pathname} fallback={<div>Something went wrong!</div>}>
-        <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
-          <div className="sm:mx-auto sm:w-full sm:max-w-md">
-            <div className="flex justify-center">
-              <Link className="flex items-center text-white" href="/">
-                <img className="h-24 w-auto" src="/logo.svg" alt="Workflow" />
-              </Link>
-            </div>
-
-            <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900">
-              {title}
-            </h2>
-          </div>
-
-          <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-            <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
-              {children}
-            </div>
-          </div>
+
+        <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900">
+          {title}
+        </h2>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
+          {children}
         </div>
-      </ErrorBoundary>
-    </Suspense>
+      </div>
+    </div>
   );
 };
diff --git a/apps/nextjs-app/src/components/layouts/dashboard-layout.tsx b/apps/nextjs-app/src/components/layouts/dashboard-layout.tsx
index d5a52468..1c27b906 100644
--- a/apps/nextjs-app/src/components/layouts/dashboard-layout.tsx
+++ b/apps/nextjs-app/src/components/layouts/dashboard-layout.tsx
@@ -9,6 +9,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { Button } from '@/components/ui/button';
 import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
 import { Spinner } from '@/components/ui/spinner';
+import { paths } from '@/config/paths';
 import { AuthLoader, useLogout } from '@/lib/auth';
 import { ROLES, useAuthorization } from '@/lib/authorization';
 import { cn } from '@/utils/cn';
@@ -30,7 +31,7 @@ type SideNavigationItem = {
 
 const Logo = () => {
   return (
-    <Link className="flex items-center text-white" href="/">
+    <Link className="flex items-center text-white" href={paths.home.getHref()}>
       <img className="h-8 w-auto" src="/logo.svg" alt="Workflow" />
       <span className="text-sm font-semibold text-white">
         Bulletproof React
@@ -45,11 +46,11 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname();
   const router = useRouter();
   const navigation = [
-    { name: 'Dashboard', to: '/app', icon: Home },
-    { name: 'Discussions', to: '/app/discussions', icon: Folder },
+    { name: 'Dashboard', to: paths.app.root.getHref(), icon: Home },
+    { name: 'Discussions', to: paths.app.discussions.getHref(), icon: Folder },
     checkAccess({ allowedRoles: [ROLES.ADMIN] }) && {
       name: 'Users',
-      to: '/app/users',
+      to: paths.app.users.getHref(),
       icon: Users,
     },
   ].filter(Boolean) as SideNavigationItem[];
@@ -143,7 +144,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem
-                onClick={() => router.push('/app/profile')}
+                onClick={() => router.push(paths.app.profile.getHref())}
                 className={cn('block px-4 py-2 text-sm text-gray-700')}
               >
                 Your Profile
diff --git a/apps/nextjs-app/src/config/paths.ts b/apps/nextjs-app/src/config/paths.ts
new file mode 100644
index 00000000..fdcec957
--- /dev/null
+++ b/apps/nextjs-app/src/config/paths.ts
@@ -0,0 +1,42 @@
+export const paths = {
+  home: {
+    getHref: () => '/',
+  },
+
+  auth: {
+    register: {
+      getHref: (redirectTo?: string | null | undefined) =>
+        `/auth/register${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`,
+    },
+    login: {
+      getHref: (redirectTo?: string | null | undefined) =>
+        `/auth/login${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`,
+    },
+  },
+
+  app: {
+    root: {
+      getHref: () => '/app',
+    },
+    dashboard: {
+      getHref: () => '/app',
+    },
+    discussions: {
+      getHref: () => '/app/discussions',
+    },
+    discussion: {
+      getHref: (id: string) => `/app/discussions/${id}`,
+    },
+    users: {
+      getHref: () => '/app/users',
+    },
+    profile: {
+      getHref: () => '/app/profile',
+    },
+  },
+  public: {
+    discussion: {
+      getHref: (id: string) => `/public/discussions/${id}`,
+    },
+  },
+} as const;
diff --git a/apps/nextjs-app/src/features/auth/components/login-form.tsx b/apps/nextjs-app/src/features/auth/components/login-form.tsx
index 82dac23f..732662e5 100644
--- a/apps/nextjs-app/src/features/auth/components/login-form.tsx
+++ b/apps/nextjs-app/src/features/auth/components/login-form.tsx
@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input } from '@/components/ui/form';
+import { paths } from '@/config/paths';
 import { useLogin, loginInputSchema } from '@/lib/auth';
 
 type LoginFormProps = {
@@ -55,7 +56,7 @@ export const LoginForm = ({ onSuccess }: LoginFormProps) => {
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
           <NextLink
-            href={`/auth/register${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            href={paths.auth.register.getHref(redirectTo)}
             className="font-medium text-blue-600 hover:text-blue-500"
           >
             Register
diff --git a/apps/nextjs-app/src/features/auth/components/register-form.tsx b/apps/nextjs-app/src/features/auth/components/register-form.tsx
index 6ba0f4d5..81081249 100644
--- a/apps/nextjs-app/src/features/auth/components/register-form.tsx
+++ b/apps/nextjs-app/src/features/auth/components/register-form.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input, Select, Label, Switch } from '@/components/ui/form';
+import { paths } from '@/config/paths';
 import { useRegister, registerInputSchema } from '@/lib/auth';
 import { Team } from '@/types/api';
 
@@ -109,7 +110,7 @@ export const RegisterForm = ({
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
           <NextLink
-            href={`/auth/login${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            href={paths.auth.login.getHref(redirectTo)}
             className="font-medium text-blue-600 hover:text-blue-500"
           >
             Log In
diff --git a/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx b/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx
index af713183..3abf3223 100644
--- a/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx
+++ b/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx
@@ -6,6 +6,7 @@ import { usePathname } from 'next/navigation';
 import { Link } from '@/components/ui/link';
 import { MDPreview } from '@/components/ui/md-preview';
 import { Spinner } from '@/components/ui/spinner';
+import { paths } from '@/config/paths';
 import { formatDate } from '@/utils/format';
 
 import { useDiscussion } from '../api/get-discussion';
@@ -47,7 +48,7 @@ export const DiscussionView = ({ discussionId }: { discussionId: string }) => {
         {!isPublicView && discussion.public && (
           <Link
             className="ml-2 flex items-center gap-2 text-sm font-bold"
-            href={`/public/discussions/${discussionId}`}
+            href={paths.public.discussion.getHref(discussionId)}
             target="_blank"
           >
             View Public Version <LinkIcon size={16} />
diff --git a/apps/nextjs-app/src/features/discussions/components/discussions-list.tsx b/apps/nextjs-app/src/features/discussions/components/discussions-list.tsx
index 0c586bb0..411d9f6b 100644
--- a/apps/nextjs-app/src/features/discussions/components/discussions-list.tsx
+++ b/apps/nextjs-app/src/features/discussions/components/discussions-list.tsx
@@ -6,6 +6,7 @@ import { useSearchParams } from 'next/navigation';
 import { Link } from '@/components/ui/link';
 import { Spinner } from '@/components/ui/spinner';
 import { Table } from '@/components/ui/table';
+import { paths } from '@/config/paths';
 import { formatDate } from '@/utils/format';
 
 import { getDiscussionQueryOptions } from '../api/get-discussion';
@@ -67,7 +68,7 @@ export const DiscussionsList = ({
                   queryClient.prefetchQuery(getDiscussionQueryOptions(id));
                   onDiscussionPrefetch?.(id);
                 }}
-                href={`/app/discussions/${id}`}
+                href={paths.app.discussion.getHref(id)}
               >
                 View
               </Link>
diff --git a/apps/nextjs-app/src/lib/auth.tsx b/apps/nextjs-app/src/lib/auth.tsx
index 1d0ffa0f..ac798516 100644
--- a/apps/nextjs-app/src/lib/auth.tsx
+++ b/apps/nextjs-app/src/lib/auth.tsx
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { configureAuth } from 'react-query-auth';
 import { z } from 'zod';
 
+import { paths } from '@/config/paths';
 import { AuthResponse, User } from '@/types/api';
 
 import { api } from './api-client';
@@ -84,13 +85,7 @@ export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
 
   useEffect(() => {
     if (!user.data) {
-      if (pathname) {
-        router.replace(
-          `/auth/login?redirectTo=${encodeURIComponent(pathname)}`,
-        );
-      } else {
-        router.replace('/auth/login');
-      }
+      router.replace(paths.auth.login.getHref(pathname));
     }
   }, [user.data, router, pathname]);
 
diff --git a/apps/nextjs-app/src/lib/authorization.tsx b/apps/nextjs-app/src/lib/authorization.tsx
index 72297b75..15625d80 100644
--- a/apps/nextjs-app/src/lib/authorization.tsx
+++ b/apps/nextjs-app/src/lib/authorization.tsx
@@ -3,6 +3,7 @@
 import { usePathname, useRouter } from 'next/navigation';
 import * as React from 'react';
 
+import { paths } from '@/config/paths';
 import { Comment, User } from '@/types/api';
 
 import { useUser } from './auth';
@@ -35,7 +36,7 @@ export const useAuthorization = () => {
 
   if (!user.data && !user.isLoading) {
     const redirectTo = encodeURIComponent(pathname);
-    router.push(`/auth/login?redirectTo=${redirectTo}`);
+    router.push(paths.auth.login.getHref(redirectTo));
   }
 
   const checkAccess = React.useCallback(
diff --git a/apps/nextjs-pages/src/app/pages/auth/login.tsx b/apps/nextjs-pages/src/app/pages/auth/login.tsx
index 69e9d238..76d0edd3 100644
--- a/apps/nextjs-pages/src/app/pages/auth/login.tsx
+++ b/apps/nextjs-pages/src/app/pages/auth/login.tsx
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import { ReactElement } from 'react';
 
 import { AuthLayout } from '@/components/layouts/auth-layout';
+import { paths } from '@/config/paths';
 import { LoginForm } from '@/features/auth/components/login-form';
 
 export const LoginPage = () => {
@@ -11,7 +12,9 @@ export const LoginPage = () => {
   return (
     <LoginForm
       onSuccess={() =>
-        router.replace(`${redirectTo ? `${redirectTo}` : '/app'}`)
+        router.replace(
+          `${redirectTo ? `${redirectTo}` : paths.app.dashboard.getHref()}`,
+        )
       }
     />
   );
diff --git a/apps/nextjs-pages/src/app/pages/auth/register.tsx b/apps/nextjs-pages/src/app/pages/auth/register.tsx
index d3858967..4ed55d6c 100644
--- a/apps/nextjs-pages/src/app/pages/auth/register.tsx
+++ b/apps/nextjs-pages/src/app/pages/auth/register.tsx
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import { ReactElement, useState } from 'react';
 
 import { AuthLayout } from '@/components/layouts/auth-layout';
+import { paths } from '@/config/paths';
 import { RegisterForm } from '@/features/auth/components/register-form';
 import { useTeams } from '@/features/teams/api/get-teams';
 
@@ -21,7 +22,9 @@ export const RegisterPage = () => {
   return (
     <RegisterForm
       onSuccess={() =>
-        router.replace(`${redirectTo ? `${redirectTo}` : '/app'}`)
+        router.replace(
+          `${redirectTo ? `${redirectTo}` : paths.app.dashboard.getHref()}`,
+        )
       }
       chooseTeam={chooseTeam}
       setChooseTeam={() => setChooseTeam(!chooseTeam)}
diff --git a/apps/nextjs-pages/src/components/layouts/auth-layout.tsx b/apps/nextjs-pages/src/components/layouts/auth-layout.tsx
index 30369771..336ba5f5 100644
--- a/apps/nextjs-pages/src/components/layouts/auth-layout.tsx
+++ b/apps/nextjs-pages/src/components/layouts/auth-layout.tsx
@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 
 import { Head } from '@/components/seo';
 import { Link } from '@/components/ui/link';
+import { paths } from '@/config/paths';
 import { useUser } from '@/lib/auth';
 
 type LayoutProps = {
@@ -18,7 +19,7 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
 
   useEffect(() => {
     if (user.data) {
-      router.replace('/app');
+      router.replace(paths.app.dashboard.getHref());
     }
   }, [user.data, router]);
 
@@ -28,7 +29,10 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
       <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <div className="flex justify-center">
-            <Link className="flex items-center text-white" href="/">
+            <Link
+              className="flex items-center text-white"
+              href={paths.home.getHref()}
+            >
               <img className="h-24 w-auto" src="/logo.svg" alt="Workflow" />
             </Link>
           </div>
diff --git a/apps/nextjs-pages/src/components/layouts/dashboard-layout.tsx b/apps/nextjs-pages/src/components/layouts/dashboard-layout.tsx
index c4c07cb9..a9f472b1 100644
--- a/apps/nextjs-pages/src/components/layouts/dashboard-layout.tsx
+++ b/apps/nextjs-pages/src/components/layouts/dashboard-layout.tsx
@@ -7,6 +7,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { Button } from '@/components/ui/button';
 import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
 import { Spinner } from '@/components/ui/spinner';
+import { paths } from '@/config/paths';
 import { AuthLoader, useLogout } from '@/lib/auth';
 import { ROLES, useAuthorization } from '@/lib/authorization';
 import { cn } from '@/utils/cn';
@@ -28,7 +29,7 @@ type SideNavigationItem = {
 
 const Logo = () => {
   return (
-    <Link className="flex items-center text-white" href="/">
+    <Link className="flex items-center text-white" href={paths.home.getHref()}>
       <img className="h-8 w-auto" src="/logo.svg" alt="Workflow" />
       <span className="text-sm font-semibold text-white">
         Bulletproof React
@@ -95,11 +96,11 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   const { checkAccess } = useAuthorization();
   const router = useRouter();
   const navigation = [
-    { name: 'Dashboard', to: '/app', icon: Home },
-    { name: 'Discussions', to: '/app/discussions', icon: Folder },
+    { name: 'Dashboard', to: paths.app.dashboard.getHref(), icon: Home },
+    { name: 'Discussions', to: paths.app.discussions.getHref(), icon: Folder },
     checkAccess({ allowedRoles: [ROLES.ADMIN] }) && {
       name: 'Users',
-      to: '/app/users',
+      to: paths.app.users.getHref(),
       icon: Users,
     },
   ].filter(Boolean) as SideNavigationItem[];
@@ -193,7 +194,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem
-                onClick={() => router.push('/app/profile')}
+                onClick={() => router.push(paths.app.profile.getHref())}
                 className={cn('block px-4 py-2 text-sm text-gray-700')}
               >
                 Your Profile
diff --git a/apps/nextjs-pages/src/config/paths.ts b/apps/nextjs-pages/src/config/paths.ts
new file mode 100644
index 00000000..fdcec957
--- /dev/null
+++ b/apps/nextjs-pages/src/config/paths.ts
@@ -0,0 +1,42 @@
+export const paths = {
+  home: {
+    getHref: () => '/',
+  },
+
+  auth: {
+    register: {
+      getHref: (redirectTo?: string | null | undefined) =>
+        `/auth/register${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`,
+    },
+    login: {
+      getHref: (redirectTo?: string | null | undefined) =>
+        `/auth/login${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`,
+    },
+  },
+
+  app: {
+    root: {
+      getHref: () => '/app',
+    },
+    dashboard: {
+      getHref: () => '/app',
+    },
+    discussions: {
+      getHref: () => '/app/discussions',
+    },
+    discussion: {
+      getHref: (id: string) => `/app/discussions/${id}`,
+    },
+    users: {
+      getHref: () => '/app/users',
+    },
+    profile: {
+      getHref: () => '/app/profile',
+    },
+  },
+  public: {
+    discussion: {
+      getHref: (id: string) => `/public/discussions/${id}`,
+    },
+  },
+} as const;
diff --git a/apps/nextjs-pages/src/features/auth/components/login-form.tsx b/apps/nextjs-pages/src/features/auth/components/login-form.tsx
index a038647d..f89bb313 100644
--- a/apps/nextjs-pages/src/features/auth/components/login-form.tsx
+++ b/apps/nextjs-pages/src/features/auth/components/login-form.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input } from '@/components/ui/form';
+import { paths } from '@/config/paths';
 import { useLogin, loginInputSchema } from '@/lib/auth';
 
 type LoginFormProps = {
@@ -53,7 +54,7 @@ export const LoginForm = ({ onSuccess }: LoginFormProps) => {
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
           <NextLink
-            href={`/auth/register${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            href={paths.auth.register.getHref(redirectTo)}
             className="font-medium text-blue-600 hover:text-blue-500"
           >
             Register
diff --git a/apps/nextjs-pages/src/features/auth/components/register-form.tsx b/apps/nextjs-pages/src/features/auth/components/register-form.tsx
index cfeca3e5..0a680657 100644
--- a/apps/nextjs-pages/src/features/auth/components/register-form.tsx
+++ b/apps/nextjs-pages/src/features/auth/components/register-form.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input, Select, Label, Switch } from '@/components/ui/form';
+import { paths } from '@/config/paths';
 import { useRegister, registerInputSchema } from '@/lib/auth';
 import { Team } from '@/types/api';
 
@@ -107,7 +108,7 @@ export const RegisterForm = ({
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
           <NextLink
-            href={`/auth/login${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            href={paths.auth.login.getHref(redirectTo)}
             className="font-medium text-blue-600 hover:text-blue-500"
           >
             Log In
diff --git a/apps/nextjs-pages/src/features/discussions/components/discussion-view.tsx b/apps/nextjs-pages/src/features/discussions/components/discussion-view.tsx
index 7c9b6299..59ca5600 100644
--- a/apps/nextjs-pages/src/features/discussions/components/discussion-view.tsx
+++ b/apps/nextjs-pages/src/features/discussions/components/discussion-view.tsx
@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
 import { Link } from '@/components/ui/link';
 import { MDPreview } from '@/components/ui/md-preview';
 import { Spinner } from '@/components/ui/spinner';
+import { paths } from '@/config/paths';
 import { formatDate } from '@/utils/format';
 
 import { useDiscussion } from '../api/get-discussion';
@@ -45,7 +46,7 @@ export const DiscussionView = ({ discussionId }: { discussionId: string }) => {
         {!isPublicView && discussion.public && (
           <Link
             className="ml-2 flex items-center gap-2 text-sm font-bold"
-            href={`/public/discussions/${discussionId}`}
+            href={paths.public.discussion.getHref(discussionId)}
             target="_blank"
           >
             View Public Version <LinkIcon size={16} />
diff --git a/apps/nextjs-pages/src/features/discussions/components/discussions-list.tsx b/apps/nextjs-pages/src/features/discussions/components/discussions-list.tsx
index d532d5c7..0f9e5fd1 100644
--- a/apps/nextjs-pages/src/features/discussions/components/discussions-list.tsx
+++ b/apps/nextjs-pages/src/features/discussions/components/discussions-list.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import { Link } from '@/components/ui/link';
 import { Spinner } from '@/components/ui/spinner';
 import { Table } from '@/components/ui/table';
+import { paths } from '@/config/paths';
 import { formatDate } from '@/utils/format';
 
 import { getDiscussionQueryOptions } from '../api/get-discussion';
@@ -65,7 +66,7 @@ export const DiscussionsList = ({
                   queryClient.prefetchQuery(getDiscussionQueryOptions(id));
                   onDiscussionPrefetch?.(id);
                 }}
-                href={`/app/discussions/${id}`}
+                href={paths.app.discussion.getHref(id)}
               >
                 View
               </Link>
diff --git a/apps/nextjs-pages/src/lib/api-client.ts b/apps/nextjs-pages/src/lib/api-client.ts
index 5261d34d..3130c5f9 100644
--- a/apps/nextjs-pages/src/lib/api-client.ts
+++ b/apps/nextjs-pages/src/lib/api-client.ts
@@ -2,6 +2,7 @@ import Axios, { InternalAxiosRequestConfig } from 'axios';
 
 import { useNotifications } from '@/components/ui/notifications';
 import { env } from '@/config/env';
+import { paths } from '@/config/paths';
 
 function authRequestInterceptor(config: InternalAxiosRequestConfig) {
   if (config.headers) {
@@ -32,12 +33,9 @@ api.interceptors.response.use(
     if (error.response?.status === 401) {
       if (typeof window !== 'undefined') {
         const searchParams = new URLSearchParams();
-        const redirectTo = searchParams.get('redirectTo');
-        if (redirectTo) {
-          window.location.href = `/auth/login?redirectTo=${redirectTo}`;
-        } else {
-          window.location.href = '/auth/login';
-        }
+        const redirectTo =
+          searchParams.get('redirectTo') || window.location.pathname;
+        window.location.href = paths.auth.login.getHref(redirectTo);
       }
     }
 
diff --git a/apps/nextjs-pages/src/lib/auth.tsx b/apps/nextjs-pages/src/lib/auth.tsx
index c3288274..ca7d00de 100644
--- a/apps/nextjs-pages/src/lib/auth.tsx
+++ b/apps/nextjs-pages/src/lib/auth.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { configureAuth } from 'react-query-auth';
 import { z } from 'zod';
 
+import { paths } from '@/config/paths';
 import { AuthResponse, User } from '@/types/api';
 
 import { api } from './api-client';
@@ -81,9 +82,7 @@ export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
 
   useEffect(() => {
     if (!user.data) {
-      router.replace(
-        `/auth/login?redirectTo=${encodeURIComponent(router.pathname)}`,
-      );
+      router.replace(paths.auth.login.getHref(router.pathname));
     }
   }, [user.data, router]);
 
diff --git a/apps/nextjs-pages/src/pages/404.tsx b/apps/nextjs-pages/src/pages/404.tsx
index 2aa724ad..6f3ae4e6 100644
--- a/apps/nextjs-pages/src/pages/404.tsx
+++ b/apps/nextjs-pages/src/pages/404.tsx
@@ -1,11 +1,12 @@
 import { Link } from '@/components/ui/link';
+import { paths } from '@/config/paths';
 
 const NotFoundPage = () => {
   return (
     <div className="mt-52 flex flex-col items-center font-semibold">
       <h1>404 - Not Found</h1>
       <p>Sorry, the page you are looking for does not exist.</p>
-      <Link href="/" replace>
+      <Link href={paths.home.getHref()} replace>
         Go to Home
       </Link>
     </div>
diff --git a/apps/nextjs-pages/src/pages/index.tsx b/apps/nextjs-pages/src/pages/index.tsx
index dbe1e60b..4413649a 100644
--- a/apps/nextjs-pages/src/pages/index.tsx
+++ b/apps/nextjs-pages/src/pages/index.tsx
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 
 import { Head } from '@/components/seo';
 import { Button } from '@/components/ui/button';
+import { paths } from '@/config/paths';
 import { useUser } from '@/lib/auth';
 
 export const HomePage = () => {
@@ -10,9 +11,9 @@ export const HomePage = () => {
 
   const handleStart = () => {
     if (user.data) {
-      router.push('/app');
+      router.push(paths.app.dashboard.getHref());
     } else {
-      router.push('/auth/login');
+      router.push(paths.auth.login.getHref());
     }
   };
 
diff --git a/apps/react-vite/src/app/router.tsx b/apps/react-vite/src/app/router.tsx
index 2434612a..b37cb5e8 100644
--- a/apps/react-vite/src/app/router.tsx
+++ b/apps/react-vite/src/app/router.tsx
@@ -1,102 +1,102 @@
 import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import {
-  LoaderFunctionArgs,
-  RouterProvider,
-  createBrowserRouter,
-} from 'react-router-dom';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
+import { paths } from '@/config/paths';
 import { ProtectedRoute } from '@/lib/auth';
 
-import { AppRoot } from './routes/app/root';
+import { AppRoot, AppRootErrorBoundary } from './routes/app/root';
 
 export const createAppRouter = (queryClient: QueryClient) =>
   createBrowserRouter([
     {
-      path: '/',
+      path: paths.home.path,
       lazy: async () => {
         const { LandingRoute } = await import('./routes/landing');
         return { Component: LandingRoute };
       },
     },
     {
-      path: '/auth/register',
+      path: paths.auth.register.path,
       lazy: async () => {
         const { RegisterRoute } = await import('./routes/auth/register');
         return { Component: RegisterRoute };
       },
     },
     {
-      path: '/auth/login',
+      path: paths.auth.login.path,
       lazy: async () => {
         const { LoginRoute } = await import('./routes/auth/login');
         return { Component: LoginRoute };
       },
     },
     {
-      path: '/app',
+      path: paths.app.root.path,
       element: (
         <ProtectedRoute>
           <AppRoot />
         </ProtectedRoute>
       ),
+      ErrorBoundary: AppRootErrorBoundary,
       children: [
         {
-          path: 'discussions',
+          path: paths.app.discussions.path,
           lazy: async () => {
-            const { DiscussionsRoute } = await import(
+            const { DiscussionsRoute, discussionsLoader } = await import(
               './routes/app/discussions/discussions'
             );
-            return { Component: DiscussionsRoute };
-          },
-          loader: async (args: LoaderFunctionArgs) => {
-            const { discussionsLoader } = await import(
-              './routes/app/discussions/discussions'
-            );
-            return discussionsLoader(queryClient)(args);
+            return {
+              Component: DiscussionsRoute,
+              loader: discussionsLoader(queryClient),
+            };
           },
+          ErrorBoundary: AppRootErrorBoundary,
         },
         {
-          path: 'discussions/:discussionId',
+          path: paths.app.discussion.path,
           lazy: async () => {
-            const { DiscussionRoute } = await import(
-              './routes/app/discussions/discussion'
-            );
-            return { Component: DiscussionRoute };
-          },
-
-          loader: async (args: LoaderFunctionArgs) => {
-            const { discussionLoader } = await import(
+            const { DiscussionRoute, discussionLoader } = await import(
               './routes/app/discussions/discussion'
             );
-            return discussionLoader(queryClient)(args);
+            return {
+              Component: DiscussionRoute,
+              loader: discussionLoader(queryClient),
+            };
           },
+          ErrorBoundary: AppRootErrorBoundary,
         },
         {
-          path: 'users',
+          path: paths.app.users.path,
           lazy: async () => {
-            const { UsersRoute } = await import('./routes/app/users');
-            return { Component: UsersRoute };
-          },
-
-          loader: async () => {
-            const { usersLoader } = await import('./routes/app/users');
-            return usersLoader(queryClient)();
+            const { UsersRoute, usersLoader } = await import(
+              './routes/app/users'
+            );
+            return {
+              Component: UsersRoute,
+              loader: usersLoader(queryClient),
+            };
           },
+          ErrorBoundary: AppRootErrorBoundary,
         },
         {
-          path: 'profile',
+          path: paths.app.profile.path,
           lazy: async () => {
             const { ProfileRoute } = await import('./routes/app/profile');
-            return { Component: ProfileRoute };
+            return {
+              Component: ProfileRoute,
+            };
           },
+          ErrorBoundary: AppRootErrorBoundary,
         },
         {
-          path: '',
+          path: paths.app.dashboard.path,
           lazy: async () => {
             const { DashboardRoute } = await import('./routes/app/dashboard');
-            return { Component: DashboardRoute };
+            return {
+              Component: DashboardRoute,
+            };
           },
+          ErrorBoundary: AppRootErrorBoundary,
         },
       ],
     },
@@ -104,8 +104,11 @@ export const createAppRouter = (queryClient: QueryClient) =>
       path: '*',
       lazy: async () => {
         const { NotFoundRoute } = await import('./routes/not-found');
-        return { Component: NotFoundRoute };
+        return {
+          Component: NotFoundRoute,
+        };
       },
+      ErrorBoundary: AppRootErrorBoundary,
     },
   ]);
 
diff --git a/apps/react-vite/src/app/routes/app/root.tsx b/apps/react-vite/src/app/routes/app/root.tsx
index a2f799ef..740f4499 100644
--- a/apps/react-vite/src/app/routes/app/root.tsx
+++ b/apps/react-vite/src/app/routes/app/root.tsx
@@ -1,28 +1,15 @@
-import { Suspense } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 import { DashboardLayout } from '@/components/layouts';
-import { Spinner } from '@/components/ui/spinner';
 
 export const AppRoot = () => {
-  const location = useLocation();
   return (
     <DashboardLayout>
-      <Suspense
-        fallback={
-          <div className="flex size-full items-center justify-center">
-            <Spinner size="xl" />
-          </div>
-        }
-      >
-        <ErrorBoundary
-          key={location.pathname}
-          fallback={<div>Something went wrong!</div>}
-        >
-          <Outlet />
-        </ErrorBoundary>
-      </Suspense>
+      <Outlet />
     </DashboardLayout>
   );
 };
+
+export const AppRootErrorBoundary = () => {
+  return <div>Something went wrong!</div>;
+};
diff --git a/apps/react-vite/src/app/routes/auth/login.tsx b/apps/react-vite/src/app/routes/auth/login.tsx
index 15fb7d9a..dc01f50d 100644
--- a/apps/react-vite/src/app/routes/auth/login.tsx
+++ b/apps/react-vite/src/app/routes/auth/login.tsx
@@ -1,6 +1,7 @@
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { AuthLayout } from '@/components/layouts/auth-layout';
+import { paths } from '@/config/paths';
 import { LoginForm } from '@/features/auth/components/login-form';
 
 export const LoginRoute = () => {
@@ -11,11 +12,14 @@ export const LoginRoute = () => {
   return (
     <AuthLayout title="Log in to your account">
       <LoginForm
-        onSuccess={() =>
-          navigate(`${redirectTo ? `${redirectTo}` : '/app'}`, {
-            replace: true,
-          })
-        }
+        onSuccess={() => {
+          navigate(
+            `${redirectTo ? `${redirectTo}` : paths.app.dashboard.getHref()}`,
+            {
+              replace: true,
+            },
+          );
+        }}
       />
     </AuthLayout>
   );
diff --git a/apps/react-vite/src/app/routes/auth/register.tsx b/apps/react-vite/src/app/routes/auth/register.tsx
index 74cd7bb2..f9eeb26d 100644
--- a/apps/react-vite/src/app/routes/auth/register.tsx
+++ b/apps/react-vite/src/app/routes/auth/register.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { AuthLayout } from '@/components/layouts/auth-layout';
+import { paths } from '@/config/paths';
 import { RegisterForm } from '@/features/auth/components/register-form';
 import { useTeams } from '@/features/teams/api/get-teams';
 
@@ -20,11 +21,14 @@ export const RegisterRoute = () => {
   return (
     <AuthLayout title="Register your account">
       <RegisterForm
-        onSuccess={() =>
-          navigate(`${redirectTo ? `${redirectTo}` : '/app'}`, {
-            replace: true,
-          })
-        }
+        onSuccess={() => {
+          navigate(
+            `${redirectTo ? `${redirectTo}` : paths.app.dashboard.getHref()}`,
+            {
+              replace: true,
+            },
+          );
+        }}
         chooseTeam={chooseTeam}
         setChooseTeam={() => setChooseTeam(!chooseTeam)}
         teams={teamsQuery.data?.data}
diff --git a/apps/react-vite/src/app/routes/landing.tsx b/apps/react-vite/src/app/routes/landing.tsx
index 1a0e5737..2b1dce28 100644
--- a/apps/react-vite/src/app/routes/landing.tsx
+++ b/apps/react-vite/src/app/routes/landing.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import logo from '@/assets/logo.svg';
 import { Head } from '@/components/seo';
 import { Button } from '@/components/ui/button';
+import { paths } from '@/config/paths';
 import { useUser } from '@/lib/auth';
 
 export const LandingRoute = () => {
@@ -11,9 +12,9 @@ export const LandingRoute = () => {
 
   const handleStart = () => {
     if (user.data) {
-      navigate('/app');
+      navigate(paths.app.dashboard.getHref());
     } else {
-      navigate('/auth/login');
+      navigate(paths.auth.login.getHref());
     }
   };
 
diff --git a/apps/react-vite/src/app/routes/not-found.tsx b/apps/react-vite/src/app/routes/not-found.tsx
index 6adbff51..055a18ac 100644
--- a/apps/react-vite/src/app/routes/not-found.tsx
+++ b/apps/react-vite/src/app/routes/not-found.tsx
@@ -1,11 +1,12 @@
 import { Link } from '@/components/ui/link';
+import { paths } from '@/config/paths';
 
 export const NotFoundRoute = () => {
   return (
     <div className="mt-52 flex flex-col items-center font-semibold">
       <h1>404 - Not Found</h1>
       <p>Sorry, the page you are looking for does not exist.</p>
-      <Link to="/" replace>
+      <Link to={paths.home.getHref()} replace>
         Go to Home
       </Link>
     </div>
diff --git a/apps/react-vite/src/components/layouts/auth-layout.tsx b/apps/react-vite/src/components/layouts/auth-layout.tsx
index a83375d6..785bbba7 100644
--- a/apps/react-vite/src/components/layouts/auth-layout.tsx
+++ b/apps/react-vite/src/components/layouts/auth-layout.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import logo from '@/assets/logo.svg';
 import { Head } from '@/components/seo';
 import { Link } from '@/components/ui/link';
+import { paths } from '@/config/paths';
 import { useUser } from '@/lib/auth';
 
 type LayoutProps = {
@@ -14,16 +15,18 @@ type LayoutProps = {
 
 export const AuthLayout = ({ children, title }: LayoutProps) => {
   const user = useUser();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get('redirectTo');
 
   const navigate = useNavigate();
 
   useEffect(() => {
     if (user.data) {
-      navigate('/app', {
+      navigate(redirectTo ? redirectTo : paths.app.dashboard.getHref(), {
         replace: true,
       });
     }
-  }, [user.data, navigate]);
+  }, [user.data, navigate, redirectTo]);
 
   return (
     <>
@@ -31,7 +34,10 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
       <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <div className="flex justify-center">
-            <Link className="flex items-center text-white" to="/">
+            <Link
+              className="flex items-center text-white"
+              to={paths.home.getHref()}
+            >
               <img className="h-24 w-auto" src={logo} alt="Workflow" />
             </Link>
           </div>
diff --git a/apps/react-vite/src/components/layouts/dashboard-layout.tsx b/apps/react-vite/src/components/layouts/dashboard-layout.tsx
index de1949cd..f95cdab5 100644
--- a/apps/react-vite/src/components/layouts/dashboard-layout.tsx
+++ b/apps/react-vite/src/components/layouts/dashboard-layout.tsx
@@ -5,6 +5,7 @@ import { NavLink, useNavigate, useNavigation } from 'react-router-dom';
 import logo from '@/assets/logo.svg';
 import { Button } from '@/components/ui/button';
 import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
+import { paths } from '@/config/paths';
 import { useLogout } from '@/lib/auth';
 import { ROLES, useAuthorization } from '@/lib/authorization';
 import { cn } from '@/utils/cn';
@@ -26,7 +27,7 @@ type SideNavigationItem = {
 
 const Logo = () => {
   return (
-    <Link className="flex items-center text-white" to="/">
+    <Link className="flex items-center text-white" to={paths.home.getHref()}>
       <img className="h-8 w-auto" src={logo} alt="Workflow" />
       <span className="text-sm font-semibold text-white">
         Bulletproof React
@@ -80,11 +81,11 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
   const { checkAccess } = useAuthorization();
   const navigate = useNavigate();
   const navigation = [
-    { name: 'Dashboard', to: '.', icon: Home },
-    { name: 'Discussions', to: './discussions', icon: Folder },
+    { name: 'Dashboard', to: paths.app.dashboard.getHref(), icon: Home },
+    { name: 'Discussions', to: paths.app.discussions.getHref(), icon: Folder },
     checkAccess({ allowedRoles: [ROLES.ADMIN] }) && {
       name: 'Users',
-      to: './users',
+      to: paths.app.users.getHref(),
       icon: Users,
     },
   ].filter(Boolean) as SideNavigationItem[];
@@ -178,7 +179,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem
-                onClick={() => navigate('./profile')}
+                onClick={() => navigate(paths.app.profile.getHref())}
                 className={cn('block px-4 py-2 text-sm text-gray-700')}
               >
                 Your Profile
diff --git a/apps/react-vite/src/config/paths.ts b/apps/react-vite/src/config/paths.ts
new file mode 100644
index 00000000..965512b0
--- /dev/null
+++ b/apps/react-vite/src/config/paths.ts
@@ -0,0 +1,46 @@
+export const paths = {
+  home: {
+    path: '/',
+    getHref: () => '/',
+  },
+
+  auth: {
+    register: {
+      path: '/auth/register',
+      getHref: (redirectTo?: string | null | undefined) =>
+        `/auth/register${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`,
+    },
+    login: {
+      path: '/auth/login',
+      getHref: (redirectTo?: string | null | undefined) =>
+        `/auth/login${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`,
+    },
+  },
+
+  app: {
+    root: {
+      path: '/app',
+      getHref: () => '/app',
+    },
+    dashboard: {
+      path: '',
+      getHref: () => '/app',
+    },
+    discussions: {
+      path: 'discussions',
+      getHref: () => '/app/discussions',
+    },
+    discussion: {
+      path: 'discussions/:discussionId',
+      getHref: (id: string) => `/app/discussions/${id}`,
+    },
+    users: {
+      path: 'users',
+      getHref: () => '/app/users',
+    },
+    profile: {
+      path: 'profile',
+      getHref: () => '/app/profile',
+    },
+  },
+} as const;
diff --git a/apps/react-vite/src/features/auth/components/login-form.tsx b/apps/react-vite/src/features/auth/components/login-form.tsx
index f4026363..0a2e14dc 100644
--- a/apps/react-vite/src/features/auth/components/login-form.tsx
+++ b/apps/react-vite/src/features/auth/components/login-form.tsx
@@ -2,6 +2,7 @@ import { Link, useSearchParams } from 'react-router-dom';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input } from '@/components/ui/form';
+import { paths } from '@/config/paths';
 import { useLogin, loginInputSchema } from '@/lib/auth';
 
 type LoginFormProps = {
@@ -52,7 +53,7 @@ export const LoginForm = ({ onSuccess }: LoginFormProps) => {
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
           <Link
-            to={`/auth/register${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            to={paths.auth.register.getHref(redirectTo)}
             className="font-medium text-blue-600 hover:text-blue-500"
           >
             Register
diff --git a/apps/react-vite/src/features/auth/components/register-form.tsx b/apps/react-vite/src/features/auth/components/register-form.tsx
index 7529d7d2..caa1c7fe 100644
--- a/apps/react-vite/src/features/auth/components/register-form.tsx
+++ b/apps/react-vite/src/features/auth/components/register-form.tsx
@@ -3,6 +3,7 @@ import { Link, useSearchParams } from 'react-router-dom';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input, Select, Label, Switch } from '@/components/ui/form';
+import { paths } from '@/config/paths';
 import { useRegister, registerInputSchema } from '@/lib/auth';
 import { Team } from '@/types/api';
 
@@ -106,7 +107,7 @@ export const RegisterForm = ({
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
           <Link
-            to={`/auth/login${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            to={paths.auth.login.getHref(redirectTo)}
             className="font-medium text-blue-600 hover:text-blue-500"
           >
             Log In
diff --git a/apps/react-vite/src/features/discussions/components/discussions-list.tsx b/apps/react-vite/src/features/discussions/components/discussions-list.tsx
index 3c63e6f0..41d2c733 100644
--- a/apps/react-vite/src/features/discussions/components/discussions-list.tsx
+++ b/apps/react-vite/src/features/discussions/components/discussions-list.tsx
@@ -4,6 +4,7 @@ import { useSearchParams } from 'react-router-dom';
 import { Link } from '@/components/ui/link';
 import { Spinner } from '@/components/ui/spinner';
 import { Table } from '@/components/ui/table';
+import { paths } from '@/config/paths';
 import { formatDate } from '@/utils/format';
 
 import { getDiscussionQueryOptions } from '../api/get-discussion';
@@ -64,7 +65,7 @@ export const DiscussionsList = ({
                   queryClient.prefetchQuery(getDiscussionQueryOptions(id));
                   onDiscussionPrefetch?.(id);
                 }}
-                to={`./${id}`}
+                to={paths.app.discussion.getHref(id)}
               >
                 View
               </Link>
diff --git a/apps/react-vite/src/lib/api-client.ts b/apps/react-vite/src/lib/api-client.ts
index aa0ecf73..86a60a27 100644
--- a/apps/react-vite/src/lib/api-client.ts
+++ b/apps/react-vite/src/lib/api-client.ts
@@ -2,6 +2,7 @@ import Axios, { InternalAxiosRequestConfig } from 'axios';
 
 import { useNotifications } from '@/components/ui/notifications';
 import { env } from '@/config/env';
+import { paths } from '@/config/paths';
 
 function authRequestInterceptor(config: InternalAxiosRequestConfig) {
   if (config.headers) {
@@ -31,8 +32,9 @@ api.interceptors.response.use(
 
     if (error.response?.status === 401) {
       const searchParams = new URLSearchParams();
-      const redirectTo = searchParams.get('redirectTo');
-      window.location.href = `/auth/login?redirectTo=${redirectTo}`;
+      const redirectTo =
+        searchParams.get('redirectTo') || window.location.pathname;
+      window.location.href = paths.auth.login.getHref(redirectTo);
     }
 
     return Promise.reject(error);
diff --git a/apps/react-vite/src/lib/auth.tsx b/apps/react-vite/src/lib/auth.tsx
index dfaec9a1..108e6728 100644
--- a/apps/react-vite/src/lib/auth.tsx
+++ b/apps/react-vite/src/lib/auth.tsx
@@ -2,6 +2,7 @@ import { configureAuth } from 'react-query-auth';
 import { Navigate, useLocation } from 'react-router-dom';
 import { z } from 'zod';
 
+import { paths } from '@/config/paths';
 import { AuthResponse, User } from '@/types/api';
 
 import { api } from './api-client';
@@ -79,11 +80,12 @@ export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   const location = useLocation();
 
   if (!user.data) {
+    console.log({
+      pathname: location.pathname,
+      redirectTo: paths.auth.login.getHref(location.pathname),
+    });
     return (
-      <Navigate
-        to={`/auth/login?redirectTo=${encodeURIComponent(location.pathname)}`}
-        replace
-      />
+      <Navigate to={paths.auth.login.getHref(location.pathname)} replace />
     );
   }