KevinVandy · KevinVandy · Jul 19, 2025 · Jul 19, 2025 · Jul 19, 2025 · Jul 19, 2025
diff --git a/apps/1-6-vite-tanstack-router/.gitignore b/apps/1-6-vite-tanstack-router/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/1-6-vite-tanstack-router/index.html b/apps/1-6-vite-tanstack-router/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React Query Hooks Refactor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/1-6-vite-tanstack-router/package.json b/apps/1-6-vite-tanstack-router/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "1-6-vite-tanstack-router",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3316",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview --port 3316"
+  },
+  "dependencies": {
+    "@mantine/core": "8.1.3",
+    "@mantine/hooks": "8.1.3",
+    "@tabler/icons-react": "3.34.0",
+    "@tanstack/react-query": "^5.83.0",
+    "@tanstack/react-query-devtools": "^5.83.0",
+    "@tanstack/react-router": "^1.106.2",
+    "@tanstack/router-devtools": "^1.106.2",
+    "mantine-react-table": "^2.0.0-beta.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-error-boundary": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "1.18.0",
+    "postcss-simple-vars": "^7.0.1",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
+  }
+}
diff --git a/apps/1-6-vite-tanstack-router/postcss.config.cjs b/apps/1-6-vite-tanstack-router/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};
diff --git a/apps/1-6-vite-tanstack-router/public/vite.svg b/apps/1-6-vite-tanstack-router/public/vite.svg
diff --git a/apps/1-6-vite-tanstack-router/src/App.tsx b/apps/1-6-vite-tanstack-router/src/App.tsx
@@ -0,0 +1,7 @@
+import { AppProviders } from "./AppProviders";
+import "@mantine/core/styles.css";
+import "mantine-react-table/styles.css";
+
+export const App = () => {
+  return <AppProviders />;
+};
diff --git a/apps/1-6-vite-tanstack-router/src/AppLayout.tsx b/apps/1-6-vite-tanstack-router/src/AppLayout.tsx
@@ -0,0 +1,110 @@
+import {
+  Anchor,
+  AppShell,
+  Breadcrumbs,
+  Burger,
+  Group,
+  Stack,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconHome, IconUsersGroup } from "@tabler/icons-react";
+import { useMemo } from "react";
+import { Link, useRouter } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { usersQueryOptions } from "./queries/users";
+import { postsQueryOptions } from "./queries/posts";
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  const router = useRouter();
+  const pathname = router.state.location.pathname;
+  const queryClient = useQueryClient();
+
+  const links = [
+    {
+      icon: <IconHome size="1rem" />,
+      color: "blue",
+      label: "Home Feed",
+      href: "/",
+      prefetch: () => queryClient.prefetchQuery(postsQueryOptions),
+    },
+    {
+      icon: <IconUsersGroup size="1rem" />,
+      color: "teal",
+      label: "Users",
+      href: "/users",
+      prefetch: () => queryClient.prefetchQuery(usersQueryOptions),
+    },
+  ];
+
+  const breadCrumbLinks = useMemo(() => {
+    const routes = pathname.split("/");
+    routes.shift();
+    const links: string[] = [];
+    for (let i = 0; i < routes.length + 1; i++) {
+      if (routes[i] && routes[i] !== "/")
+        if (routes[i] === "posts") {
+          links.push(`/`);
+        } else links.push(`/${routes.slice(0, i + 1).join("/")}`);
+    }
+    return links;
+  }, [pathname]);
+
+  if (breadCrumbLinks.length === 1) {
+    breadCrumbLinks.unshift("/");
+  }
+
+  const [opened, { toggle }] = useDisclosure();
+
+  return (
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{ width: 200, breakpoint: "sm", collapsed: { mobile: !opened } }}
+      padding="xl"
+    >
+      <AppShell.Header>
+        <Group h="100%" px="md">
+          <Burger opened={opened} onClick={toggle} size="sm" />
+          Vite with React Query Hooks Refactor
+        </Group>
+      </AppShell.Header>
+      <AppShell.Navbar p="md">
+        {links.map((link) => (
+          <Anchor
+            onMouseEnter={link.prefetch}
+            component={Link}
+            key={link.label}
+            to={link.href}
+          >
+            {link.label}
+          </Anchor>
+        ))}
+      </AppShell.Navbar>
+      <AppShell.Main mb="xl">
+        <Stack gap="md" mt="lg">
+          <Breadcrumbs aria-label="breadcrumb" pb="md">
+            {breadCrumbLinks.map((link, index) => (
+              <Anchor
+                c="inherit"
+                component={Link}
+                key={index}
+                td="none"
+                to={link}
+                tt="capitalize"
+                style={{
+                  cursor: "pointer",
+                }}
+              >
+                {link === "/" ? "Home Feed" : link.split("/").pop()}
+              </Anchor>
+            ))}
+          </Breadcrumbs>
+          {children}
+        </Stack>
+      </AppShell.Main>
+    </AppShell>
+  );
+}
diff --git a/apps/1-6-vite-tanstack-router/src/AppProviders.tsx b/apps/1-6-vite-tanstack-router/src/AppProviders.tsx
@@ -0,0 +1,111 @@
+import { lazy, Suspense } from "react";
+import { MantineProvider } from "@mantine/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { 
+  createRouter, 
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  Outlet
+} from "@tanstack/react-router";
+import { theme } from "./theme";
+import { AppLayout } from "./AppLayout";
+import { HomePage } from "./pages/HomePage";
+import { UsersPage } from "./pages/UsersPage";
+import { UserPage } from "./pages/UserPage";
+import { PostPage } from "./pages/PostPage";
+
+const ReactQueryDevtoolsProduction = lazy(() =>
+  import("@tanstack/react-query-devtools/production").then((d) => ({
+    default: d.ReactQueryDevtools,
+  })),
+);
+
+const TanStackRouterDevtools =
+  typeof window !== "undefined" 
+    ? lazy(() =>
+        // Lazy load in development
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      )
+    : () => null; // Render nothing on server side
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 10, // 10 seconds
+    },
+  },
+});
+
+// Create routes
+const rootRoute = createRootRoute({
+  component: () => (
+    <AppLayout>
+      <Outlet />
+    </AppLayout>
+  ),
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: HomePage,
+});
+
+const usersRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/users',
+  component: UsersPage,
+});
+
+const userRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/users/$id',
+  component: UserPage,
+});
+
+const postRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/posts/$id',
+  component: PostPage,
+});
+
+// Create the route tree
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  usersRoute,
+  userRoute,
+  postRoute,
+]);
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+interface Props {
+  // children prop is not needed since router handles all rendering
+}
+
+export const AppProviders = ({}: Props) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MantineProvider theme={theme}>
+        <RouterProvider router={router} />
+        <Suspense fallback={null}>
+          <ReactQueryDevtoolsProduction />
+        </Suspense>
+        <Suspense fallback={null}>
+          <TanStackRouterDevtools />
+        </Suspense>
+      </MantineProvider>
+    </QueryClientProvider>
+  );
+};
diff --git a/apps/1-6-vite-tanstack-router/src/api-types.ts b/apps/1-6-vite-tanstack-router/src/api-types.ts
@@ -0,0 +1,38 @@
+export interface IUser {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+  address: {
+    street: string;
+    suite: string;
+    city: string;
+    zipcode: string;
+    geo: {
+      lat: string;
+      lng: string;
+    };
+  };
+  phone: string;
+  website: string;
+  company: {
+    name: string;
+    catchPhrase: string;
+    bs: string;
+  };
+}
+
+export interface IPost {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
+
+export interface IComment {
+  postId: number;
+  id: number;
+  name: string;
+  email: string;
+  body: string;
+}
diff --git a/apps/1-6-vite-tanstack-router/src/main.tsx b/apps/1-6-vite-tanstack-router/src/main.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App.tsx";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);