chore: add tanstack start example app (#1431)

Author: juliusmarminge

.gitignore

@@ -50,3 +50,6 @@ dist/
 
 # turbo
 .turbo
+
+# tanstack
+.tanstack

.vscode/settings.json

@@ -17,6 +17,12 @@
   "files.associations": {
     "*.css": "tailwindcss"
   },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
   "prettier.ignorePath": ".gitignore",
   "tailwindCSS.classFunctions": ["cva", "cx", "cn"],
   "typescript.enablePromptUseWorkspaceTsdk": true,

README.md

@@ -2,10 +2,7 @@
 
 > [!NOTE]
 >
-> create-t3-turbo now uses better-auth for authentication!
-> Look out for bugs as we're working through the last issues,
-> especially, the oauth proxy might not play very nice with Expo
-> so you might need to disable that in [`@acme/auth`](./packages/auth/src/index.ts)
+> create-t3-turbo now includes the option to use Tanstack Start for the web app!
 
 ## Installation
 
@@ -42,8 +39,13 @@ apps
   │   ├─ Navigation using Expo Router
   │   ├─ Tailwind CSS v4 using NativeWind v5
   │   └─ Typesafe API calls using tRPC
-  └─ next.js
-      ├─ Next.js 15
+  ├─ nextjs
+  │   ├─ Next.js 15
+  │   ├─ React 19
+  │   ├─ Tailwind CSS v4
+  │   └─ E2E Typesafe API Server & Client
+  └─ tanstack-start
+      ├─ Tanstack Start v1 (rc)
       ├─ React 19
       ├─ Tailwind CSS v4
       └─ E2E Typesafe API Server & Client
@@ -78,6 +80,10 @@ To get it running, follow the steps below:
 
 ### 1. Setup dependencies
 
+> [!NOTE]
+>
+> While the repo does contain both a Next.js and Tanstack Start version of a web app, you can pick which one you like to use and delete the other folder before starting the setup.
+
 ```bash
 # Install dependencies
 pnpm i

apps/nextjs/package.json

@@ -36,7 +36,7 @@
     "@acme/prettier-config": "workspace:*",
     "@acme/tailwind-config": "workspace:*",
     "@acme/tsconfig": "workspace:*",
-    "@types/node": "^22.18.10",
+    "@types/node": "catalog:",
     "@types/react": "catalog:react19",
     "@types/react-dom": "catalog:react19",
     "eslint": "catalog:",

apps/nextjs/src/app/layout.tsx

@@ -8,7 +8,7 @@ import { Toaster } from "@acme/ui/toast";
 import { env } from "~/env";
 import { TRPCReactProvider } from "~/trpc/react";
 
-import "~/app/globals.css";
+import "~/app/styles.css";
 
 export const metadata: Metadata = {
   metadataBase: new URL(
@@ -57,7 +57,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
           geistMono.variable,
         )}
       >
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeProvider>
           <TRPCReactProvider>{props.children}</TRPCReactProvider>
           <div className="absolute right-4 bottom-4">
             <ThemeToggle />

apps/nextjs/src/app/globals.css renamed to apps/nextjs/src/app/styles.css

@@ -5,6 +5,8 @@
 @source "../../../../packages/ui/src/*.{ts,tsx}";
 
 @custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (&:where(.light, .light *));
+@custom-variant auto (&:where(.auto, .auto *));
 
 @utility container {
   margin-inline: auto;

apps/tanstack-start/.prettierignore

@@ -0,0 +1 @@
+routeTree.gen.ts

apps/tanstack-start/eslint.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "eslint/config";
+
+import { baseConfig, restrictEnvAccess } from "@acme/eslint-config/base";
+import { reactConfig } from "@acme/eslint-config/react";
+
+export default defineConfig(
+  {
+    ignores: [".nitro/**", ".output/**", ".tanstack/**"],
+  },
+  baseConfig,
+  reactConfig,
+  restrictEnvAccess,
+);

apps/tanstack-start/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@acme/tanstack-start",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm with-env vite dev",
+    "build": "vite build",
+    "start": "vite start",
+    "format": "prettier --check . --ignore-path ../../.gitignore --ignore-path .prettierignore",
+    "lint": "eslint --flag unstable_native_nodejs_ts_config",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env --"
+  },
+  "dependencies": {
+    "@acme/api": "workspace:*",
+    "@acme/auth": "workspace:*",
+    "@acme/db": "workspace:*",
+    "@acme/ui": "workspace:*",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/geist-mono": "^5.2.7",
+    "@t3-oss/env-core": "^0.13.8",
+    "@tanstack/react-form": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@tanstack/react-router": "^1.132.47",
+    "@tanstack/react-router-devtools": "^1.132.51",
+    "@tanstack/react-router-ssr-query": "^1.132.47",
+    "@tanstack/react-start": "^1.132.52",
+    "@trpc/client": "catalog:",
+    "@trpc/server": "catalog:",
+    "@trpc/tanstack-react-query": "catalog:",
+    "better-auth": "catalog:",
+    "nitro": "npm:nitro-nightly@latest",
+    "react": "catalog:react19",
+    "react-dom": "catalog:react19",
+    "superjson": "2.2.3",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@acme/eslint-config": "workspace:*",
+    "@acme/prettier-config": "workspace:*",
+    "@acme/tailwind-config": "workspace:*",
+    "@acme/tsconfig": "workspace:*",
+    "@tailwindcss/vite": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:react19",
+    "@types/react-dom": "catalog:react19",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "catalog:",
+    "prettier": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "prettier": "@acme/prettier-config"
+}