feat: migrate to tanstack start (#21)

* feat: migrate to tanstack start

* chore: more changes

* chore: get auth session

* chore: add correct url

* chore: correct auth return

* chore: hono client works now

* chore: add hono with type client

* chore: fix theme provider

* chore: tanstack start updates

* chore: remove deprecated stuff from zod

* chore: remove hardcoded urls

* chore: remove auth fetching from root route

Author: catalinpit

.vscode/settings.json

@@ -29,7 +29,9 @@
     "@tailwindcss/postcss": "^4.1.16",
     "@tailwindcss/vite": "^4.1.16",
     "@tanstack/react-query": "^5.90.5",
-    "@tanstack/react-router": "^1.133.22",
+    "@tanstack/react-router": "^1.134.13",
+    "@tanstack/react-router-ssr-query": "^1.134.13",
+    "@tanstack/react-start": "^1.134.14",
     "@tanstack/react-table": "^8.21.3",
     "@tiptap/extension-code-block-lowlight": "^2.26.4",
     "@tiptap/extension-color": "^2.26.4",
@@ -78,6 +80,7 @@
     "tailwindcss": "^4.1.16",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.46.2",
-    "vite": "^6.4.1"
+    "vite": "^6.4.1",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

apps/client/package.json

@@ -1,6 +1,15 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { ScriptOnce } from "@tanstack/react-router";
+import {
+  createContext,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 type Theme = "dark" | "light" | "system";
+const MEDIA = "(prefers-color-scheme: dark)";
 
 type ThemeProviderProps = {
   children: React.ReactNode;
@@ -20,51 +29,89 @@ const initialState: ThemeProviderState = {
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
+// references:
+// https://ui.shadcn.com/docs/dark-mode/vite
+// https://github.com/pacocoursey/next-themes/blob/main/next-themes/src/index.tsx
 export function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = "vite-ui-theme",
+  storageKey = "theme",
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    () =>
+      (typeof window !== "undefined"
+        ? (localStorage.getItem(storageKey) as Theme)
+        : null) || defaultTheme,
   );
 
+  const handleMediaQuery = useCallback(
+    (e: MediaQueryListEvent | MediaQueryList) => {
+      if (theme !== "system") return;
+      const root = window.document.documentElement;
+      const targetTheme = e.matches ? "dark" : "light";
+      if (!root.classList.contains(targetTheme)) {
+        root.classList.remove("light", "dark");
+        root.classList.add(targetTheme);
+      }
+    },
+    [theme],
+  );
+
+  // Listen for system preference changes
   useEffect(() => {
-    const root = window.document.documentElement;
+    const media = window.matchMedia(MEDIA);
 
-    root.classList.remove("light", "dark");
+    media.addEventListener("change", handleMediaQuery);
+    handleMediaQuery(media);
 
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
+    return () => media.removeEventListener("change", handleMediaQuery);
+  }, [handleMediaQuery]);
 
-      root.classList.add(systemTheme);
-      return;
-    }
+  useEffect(() => {
+    const root = window.document.documentElement;
 
-    root.classList.add(theme);
-  }, [theme]);
+    let targetTheme: string;
 
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
+    if (theme === "system") {
+      localStorage.removeItem(storageKey);
+      targetTheme = window.matchMedia(MEDIA).matches ? "dark" : "light";
+    } else {
       localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
+      targetTheme = theme;
+    }
+
+    // Only update if the target theme is not already applied
+    if (!root.classList.contains(targetTheme)) {
+      root.classList.remove("light", "dark");
+      root.classList.add(targetTheme);
+    }
+  }, [theme, storageKey]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme,
+    }),
+    [theme],
+  );
 
   return (
-    <ThemeProviderContext.Provider {...props} value={value}>
+    <ThemeProviderContext {...props} value={value}>
+      <ScriptOnce>
+        {/* Apply theme early to avoid FOUC */}
+        {`document.documentElement.classList.toggle(
+            'dark',
+            localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+            )`}
+      </ScriptOnce>
       {children}
-    </ThemeProviderContext.Provider>
+    </ThemeProviderContext>
   );
 }
 
 export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
+  const context = use(ThemeProviderContext);
 
   if (context === undefined)
     throw new Error("useTheme must be used within a ThemeProvider");

apps/client/src/components/theme-provider.tsx

@@ -1,6 +1,5 @@
-import { hc } from "hono/client";
+import { hcWithType } from "@server/lib/hc";
 import type {
-  AppType,
   TCreateCheckoutType,
   TCreateLessonType,
   TGetAllCreatorCoursesType,
@@ -16,7 +15,15 @@ import {
   TUpdateChapterType,
 } from "@server/shared/types";
 
-const client = hc<AppType>("/api");
+import env from "@server/env";
+
+// include credentials to send cookies to the server
+// replace hardcoded url
+const client = hcWithType(env.API_URL, {
+  init: {
+    credentials: "include",
+  },
+});
 
 export const getAllCourses = async ({
   query,
@@ -167,7 +174,7 @@ export const updateCourse = async (id: string, data: TUpdateCourseType) => {
 
 export const createCourseChapter = async (
   id: string,
-  data: TCreateChapterType,
+  data: TCreateChapterType
 ) => {
   const res = await client.creator.courses[":id"].chapters.$post({
     param: {
@@ -189,7 +196,7 @@ export const createCourseChapter = async (
 export const createChapterLesson = async (
   id: string,
   chapterId: string,
-  data: TCreateLessonType,
+  data: TCreateLessonType
 ) => {
   const res = await client.creator.courses[":id"].chapters[
     ":chapterId"
@@ -214,7 +221,7 @@ export const createChapterLesson = async (
 export const updateCourseChapter = async (
   id: string,
   chapterId: string,
-  data: TUpdateChapterType,
+  data: TUpdateChapterType
 ) => {
   const res = await client.creator.courses[":id"].chapters[":chapterId"].$patch(
     {
@@ -225,7 +232,7 @@ export const updateCourseChapter = async (
       json: {
         ...data,
       },
-    },
+    }
   );
 
   if (!res.ok) {
@@ -258,7 +265,7 @@ export const updateCourseLesson = async (
   id: string,
   chapterId: string,
   lessonId: string,
-  data: TUpdateLessonType,
+  data: TUpdateLessonType
 ) => {
   const res = await client.creator.courses[":id"].chapters[
     ":chapterId"
@@ -284,7 +291,7 @@ export const updateCourseLesson = async (
 export const deleteCourseLesson = async (
   id: string,
   chapterId: string,
-  lessonId: string,
+  lessonId: string
 ) => {
   const res = await client.creator.courses[":id"].chapters[
     ":chapterId"
@@ -444,7 +451,7 @@ export const createCheckout = async (data: TCreateCheckoutType) => {
   }
 
   const checkout = await res.json();
-  
+
   return checkout;
 };
 

apps/client/src/lib/api.ts

@@ -1,7 +1,9 @@
 import { createAuthClient } from "better-auth/react";
 import { inferAdditionalFields } from "better-auth/client/plugins";
+import env from "@server/env";
 
 export const authClient = createAuthClient({
+  baseURL: env.BETTER_AUTH_URL,
   plugins: [
     inferAdditionalFields({
       user: {
@@ -15,6 +17,7 @@ export const authClient = createAuthClient({
 
 export const {
   useSession,
+  getSession,
   signIn,
   signUp,
   signOut,

apps/client/src/lib/auth-client.ts

@@ -489,3 +489,12 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

apps/client/src/main.tsx

@@ -0,0 +1,33 @@
+import { QueryClient } from "@tanstack/react-query";
+import { createRouter } from "@tanstack/react-router";
+import NotFound from "./components/not-found";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+
+import { routeTree } from "./routeTree.gen";
+import { LoadingSpinner } from "./components/ui/loading-spinner";
+
+export function getRouter() {
+  const queryClient = new QueryClient();
+
+  const router = createRouter({
+    routeTree,
+    context: { auth: undefined, queryClient },
+    defaultPreload: "intent",
+    defaultPendingComponent: () => {
+      return <LoadingSpinner fullScreen />;
+    },
+    defaultNotFoundComponent: () => {
+      return <NotFound />;
+    },
+  });
+
+  setupRouterSsrQueryIntegration({ router, queryClient });
+
+  return router;
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}