feat: add authentication in native

2025-10-12 23:52:15 +00:00 · 2025-04-04 19:06:08 +05:30
parent ccc3ff2aa5
commit 81dc240e7b
24 changed files with 1119 additions and 717 deletions
--- a/.changeset/few-walls-prove.md
+++ b/.changeset/few-walls-prove.md
@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": minor
+---
+
+Add Better Auth in Native
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -7,10 +7,7 @@
 	"bin": {
 		"create-better-t-stack": "dist/index.js"
 	},
-	"files": [
-		"template",
-		"dist"
-	],
+	"files": ["template", "dist"],
 	"keywords": [
 		"typescript",
 		"scaffold",
--- a/apps/cli/src/constants.ts
+++ b/apps/cli/src/constants.ts
@@ -26,6 +26,7 @@ export const DEFAULT_CONFIG: ProjectConfig = {

 export const dependencyVersionMap = {
 	"better-auth": "^1.2.4",
+	"@better-auth/expo": "^1.2.5",

 	"drizzle-orm": "^0.38.4",
 	"drizzle-kit": "^0.30.5",
--- a/apps/cli/src/helpers/auth-setup.ts
+++ b/apps/cli/src/helpers/auth-setup.ts
@@ -1,6 +1,7 @@
 import path from "node:path";
 import { log } from "@clack/prompts";
 import pc from "picocolors";
+import type { ProjectFrontend } from "../types";
 import { addPackageDependency } from "../utils/add-package-deps";

 export function generateAuthSecret(length = 32): string {
@@ -17,6 +18,7 @@ export function generateAuthSecret(length = 32): string {
 export async function setupAuth(
 	projectDir: string,
 	enableAuth: boolean,
+	frontends: ProjectFrontend[] = [],
 ): Promise<void> {
 	if (!enableAuth) {
 		return;
@@ -24,16 +26,33 @@ export async function setupAuth(

 	const serverDir = path.join(projectDir, "apps/server");
 	const clientDir = path.join(projectDir, "apps/web");
+	const nativeDir = path.join(projectDir, "apps/native");

 	try {
-		addPackageDependency({
-			dependencies: ["better-auth"],
-			projectDir: serverDir,
-		});
-		addPackageDependency({
-			dependencies: ["better-auth"],
-			projectDir: clientDir,
-		});
+		if (
+			frontends.includes("react-router") ||
+			frontends.includes("tanstack-router")
+		) {
+			addPackageDependency({
+				dependencies: ["better-auth"],
+				projectDir: serverDir,
+			});
+			addPackageDependency({
+				dependencies: ["better-auth"],
+				projectDir: clientDir,
+			});
+		}
+
+		if (frontends.includes("native")) {
+			addPackageDependency({
+				dependencies: ["better-auth", "@better-auth/expo"],
+				projectDir: nativeDir,
+			});
+			addPackageDependency({
+				dependencies: ["better-auth", "@better-auth/expo"],
+				projectDir: serverDir,
+			});
+		}
 	} catch (error) {
 		log.error(pc.red("Failed to configure authentication"));
 		if (error instanceof Error) {
--- a/apps/cli/src/helpers/create-project.ts
+++ b/apps/cli/src/helpers/create-project.ts
@@ -66,7 +66,7 @@ export async function createProject(options: ProjectConfig): Promise<string> {
 			options.database,
 			options.frontend,
 		);
-		await setupAuth(projectDir, options.auth);
+		await setupAuth(projectDir, options.auth, options.frontend);

 		await setupRuntime(projectDir, options.runtime, options.backend);

--- a/apps/cli/src/helpers/template-manager.ts
+++ b/apps/cli/src/helpers/template-manager.ts
@@ -7,6 +7,7 @@ import type {
 	ProjectFrontend,
 	ProjectOrm,
 } from "../types";
+import { addPackageDependency } from "../utils/add-package-deps";

 /**
 * Copy base template structure but exclude app-specific folders that will be added based on options
@@ -233,10 +234,83 @@ export async function setupAuthTemplate(
 			if (await fs.pathExists(nativeAuthDir)) {
 				await fs.copy(nativeAuthDir, projectNativeDir, { overwrite: true });
 			}
+
+			addPackageDependency({
+				dependencies: ["@better-auth/expo"],
+				projectDir: path.join(projectDir, "apps/server"),
+			});
+
+			await updateAuthConfigWithExpoPlugin(projectDir, orm, database);
 		}
 	}
 }

+// Need to find a better way to handle this
+async function updateAuthConfigWithExpoPlugin(
+	projectDir: string,
+	orm: ProjectOrm,
+	database: ProjectDatabase,
+): Promise<void> {
+	const serverDir = path.join(projectDir, "apps/server");
+
+	let authFilePath: string | undefined;
+	if (orm === "drizzle") {
+		if (database === "sqlite") {
+			authFilePath = path.join(serverDir, "src/lib/auth.ts");
+		} else if (database === "postgres") {
+			authFilePath = path.join(serverDir, "src/lib/auth.ts");
+		}
+	} else if (orm === "prisma") {
+		if (database === "sqlite") {
+			authFilePath = path.join(serverDir, "src/lib/auth.ts");
+		} else if (database === "postgres") {
+			authFilePath = path.join(serverDir, "src/lib/auth.ts");
+		}
+	}
+
+	if (authFilePath && (await fs.pathExists(authFilePath))) {
+		let authFileContent = await fs.readFile(authFilePath, "utf8");
+
+		if (!authFileContent.includes("@better-auth/expo")) {
+			const importLine = 'import { expo } from "@better-auth/expo";\n';
+
+			const lastImportIndex = authFileContent.lastIndexOf("import");
+			const afterLastImport =
+				authFileContent.indexOf("\n", lastImportIndex) + 1;
+
+			authFileContent =
+				authFileContent.substring(0, afterLastImport) +
+				importLine +
+				authFileContent.substring(afterLastImport);
+		}
+
+		if (!authFileContent.includes("plugins:")) {
+			authFileContent = authFileContent.replace(
+				/}\);/,
+				"  plugins: [expo()],\n});",
+			);
+		} else if (!authFileContent.includes("expo()")) {
+			authFileContent = authFileContent.replace(
+				/plugins: \[(.*?)\]/s,
+				(match, plugins) => {
+					return `plugins: [${plugins}${plugins.trim() ? ", " : ""}expo()]`;
+				},
+			);
+		}
+
+		if (!authFileContent.includes("my-better-t-app://")) {
+			authFileContent = authFileContent.replace(
+				/trustedOrigins: \[(.*?)\]/s,
+				(match, origins) => {
+					return `trustedOrigins: [${origins}${origins.trim() ? ", " : ""}"my-better-t-app://"]`;
+				},
+			);
+		}
+
+		await fs.writeFile(authFilePath, authFileContent);
+	}
+}
+
 export async function fixGitignoreFiles(projectDir: string): Promise<void> {
 	const gitignorePaths = await findGitignoreFiles(projectDir);

--- a/apps/cli/src/prompts/auth.ts
+++ b/apps/cli/src/prompts/auth.ts
@@ -10,19 +10,6 @@ export async function getAuthChoice(
 ): Promise<boolean> {
 	if (!hasDatabase) return false;

-	const hasNative = frontends?.includes("native");
-	const hasWeb =
-		frontends?.includes("tanstack-router") ||
-		frontends?.includes("react-router");
-
-	if (hasNative) {
-		log.warn(
-			pc.yellow("Note: Authentication is not yet available with native"),
-		);
-	}
-
-	if (!hasWeb) return false;
-
 	if (auth !== undefined) return auth;

 	const response = await confirm({
--- a/apps/cli/src/prompts/package-manager.ts
+++ b/apps/cli/src/prompts/package-manager.ts
@@ -14,16 +14,16 @@ export async function getPackageManagerChoice(
 		message: "Choose package manager",
 		options: [
 			{ value: "npm", label: "npm", hint: "Node Package Manager" },
-			{
-				value: "bun",
-				label: "bun",
-				hint: "All-in-one JavaScript runtime & toolkit",
-			},
 			{
 				value: "pnpm",
 				label: "pnpm",
 				hint: "Fast, disk space efficient package manager",
 			},
+			{
+				value: "bun",
+				label: "bun",
+				hint: "All-in-one JavaScript runtime & toolkit",
+			},
 		],
 		initialValue: detectedPackageManager,
 	});
--- a/apps/cli/template/base/apps/native/app.json
+++ b/apps/cli/template/base/apps/native/app.json
@@ -9,7 +9,10 @@
      "output": "static",
      "favicon": "./assets/favicon.png"
    },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router",
+      "expo-secure-store"
+    ],
    "experiments": {
      "typedRoutes": true,
      "tsconfigPaths": true
--- a/apps/cli/template/base/apps/native/app/(drawer)/(tabs)/index.tsx
+++ b/apps/cli/template/base/apps/native/app/(drawer)/(tabs)/index.tsx
@@ -1,9 +1,17 @@
-import { View, Text } from "react-native";
+import { Container } from "@/components/container";
+import { Text, View } from "react-native";

-export default function App() {
-  return (
-    <View>
-      <Text>Hello, World!</Text>
-    </View>
-  );
+export default function TabOne() {
+	return (
+		<Container>
+			<View className="p-6 flex-1 justify-center">
+				<Text className="text-2xl font-bold text-foreground text-center mb-4">
+					Tab One
+				</Text>
+				<Text className="text-foreground text-center">
+					This is the first tab of the application.
+				</Text>
+			</View>
+		</Container>
+	);
 }
--- a/apps/cli/template/base/apps/native/app/(drawer)/(tabs)/two.tsx
+++ b/apps/cli/template/base/apps/native/app/(drawer)/(tabs)/two.tsx
@@ -1,16 +1,17 @@
-import { Stack } from "expo-router";
-import { View, Text } from "react-native";
-
 import { Container } from "@/components/container";
+import { Text, View } from "react-native";

-export default function Home() {
-  return (
-    <>
-      <Container>
-        <View>
-          <Text>Tab Two</Text>
-        </View>
-      </Container>
-    </>
-  );
+export default function TabTwo() {
+	return (
+		<Container>
+			<View className="p-6 flex-1 justify-center">
+				<Text className="text-2xl font-bold text-foreground text-center mb-4">
+					Tab Two
+				</Text>
+				<Text className="text-foreground text-center">
+					This is the second tab of the application.
+				</Text>
+			</View>
+		</Container>
+	);
 }
--- a/apps/cli/template/base/apps/native/app/modal.tsx
+++ b/apps/cli/template/base/apps/native/app/modal.tsx
@@ -1,15 +1,12 @@
+import { Container } from "@/components/container";
 import { Text, View } from "react-native";

-import { Container } from "@/components/container";
-
 export default function Modal() {
-  return (
-    <>
-      <Container>
-        <View>
-          <Text>HI MODAL</Text>
-        </View>
-      </Container>
-    </>
-  );
+	return (
+		<Container>
+			<View className="flex-1 justify-center items-center">
+				<Text className="text-xl font-bold text-foreground">Modal View</Text>
+			</View>
+		</Container>
+	);
 }
--- a/apps/cli/template/base/apps/native/metro.config.js
+++ b/apps/cli/template/base/apps/native/metro.config.js
@@ -15,6 +15,8 @@ const config = withTurborepoManagedCache(

 config.resolver.unstable_enablePackageExports = true;

+config.resolver.disableHierarchicalLookup = true;
+
 module.exports = config;

 /**
--- a/apps/cli/template/base/apps/native/package.json
+++ b/apps/cli/template/base/apps/native/package.json
@@ -3,7 +3,7 @@
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
-    "dev": "expo start",
+    "dev": "expo start --clear",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "prebuild": "expo prebuild",
@@ -19,18 +19,19 @@
    "@trpc/client": "^11.0.0",
    "@trpc/server": "^11.0.0",
    "@trpc/tanstack-react-query": "^11.0.0",
-    "expo": "^52.0.41",
+    "expo": "^52.0.44",
    "expo-constants": "~17.0.8",
    "expo-linking": "~7.0.5",
    "expo-navigation-bar": "~4.0.8",
    "expo-router": "~4.0.19",
+    "expo-secure-store": "~14.0.1",
    "expo-status-bar": "~2.0.1",
    "expo-system-ui": "~4.0.8",
    "expo-web-browser": "~14.0.2",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
-    "react-native": "0.76.7",
+    "react-native": "0.76.9",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "3.16.2",
    "react-native-safe-area-context": "4.12.0",
--- a/apps/cli/template/base/apps/web-tanstack-router/src/main.tsx
+++ b/apps/cli/template/base/apps/web-tanstack-router/src/main.tsx
@@ -3,13 +3,13 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import ReactDOM from "react-dom/client";
 import Loader from "./components/loader";
 import { routeTree } from "./routeTree.gen";
-import { queryClient, trpcClient } from "./utils/trpc";
+import { queryClient, trpc } from "./utils/trpc";

 const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPendingComponent: () => <Loader />,
-  context: { trpcClient },
+  context: { trpc, queryClient },
  Wrap: function WrapComponent({ children }) {
    return (
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
--- a/apps/cli/template/base/apps/web-tanstack-router/src/routes/__root.tsx
+++ b/apps/cli/template/base/apps/web-tanstack-router/src/routes/__root.tsx
@@ -2,7 +2,8 @@ import Header from "@/components/header";
 import Loader from "@/components/loader";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-import type { trpcClient } from "@/utils/trpc";
+import type { trpc } from "@/utils/trpc";
+import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
  HeadContent,
@@ -14,7 +15,8 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import "../index.css";

 export interface RouterAppContext {
-  trpcClient: typeof trpcClient;
+  trpc: typeof trpc;
+  queryClient: QueryClient;
 }

 export const Route = createRootRouteWithContext<RouterAppContext>()({
--- a/apps/cli/template/with-auth/apps/native/app/(drawer)/index.tsx
+++ b/apps/cli/template/with-auth/apps/native/app/(drawer)/index.tsx
@@ -0,0 +1,84 @@
+import { authClient } from "@/lib/auth-client";
+import { useQuery } from "@tanstack/react-query";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
+
+import { Container } from "@/components/container";
+import { SignIn } from "@/components/sign-in";
+import { SignUp } from "@/components/sign-up";
+import { queryClient, trpc } from "@/utils/trpc";
+
+export default function Home() {
+	const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+	const privateData = useQuery(trpc.privateData.queryOptions());
+	const { data: session } = authClient.useSession();
+
+	return (
+		<Container>
+			<ScrollView className="flex-1">
+				<View className="px-4">
+					<Text className="font-mono text-foreground text-3xl font-bold mb-4">
+						BETTER T STACK
+					</Text>
+					{session?.user ? (
+						<View className="mb-6 p-4 bg-card rounded-lg border border-border">
+							<View className="flex-row justify-between items-center mb-2">
+								<Text className="text-foreground text-base">
+									Welcome,{" "}
+									<Text className="font-medium">{session.user.name}</Text>
+								</Text>
+							</View>
+							<Text className="text-muted-foreground text-sm mb-4">
+								{session.user.email}
+							</Text>
+
+							<TouchableOpacity
+								className="bg-destructive py-2 px-4 rounded-md self-start"
+								onPress={() => {
+									authClient.signOut();
+									queryClient.invalidateQueries();
+								}}
+							>
+								<Text className="text-white font-medium">Sign Out</Text>
+							</TouchableOpacity>
+						</View>
+					) : null}
+					<View className="mb-6 rounded-lg border border-border p-4">
+						<Text className="mb-3 font-medium text-foreground">API Status</Text>
+						<View className="flex-row items-center gap-2">
+							<View
+								className={`h-3 w-3 rounded-full ${
+									healthCheck.data ? "bg-green-500" : "bg-red-500"
+								}`}
+							/>
+							<Text className="text-muted-foreground">
+								{healthCheck.isLoading
+									? "Checking..."
+									: healthCheck.data
+										? "Connected to API"
+										: "API Disconnected"}
+							</Text>
+						</View>
+					</View>
+					<View className="mb-6 rounded-lg border border-border p-4">
+						<Text className="mb-3 font-medium text-foreground">
+							Private Data
+						</Text>
+						{privateData && (
+							<View>
+								<Text className="text-muted-foreground">
+									{privateData.data?.message}
+								</Text>
+							</View>
+						)}
+					</View>
+					{!session?.user && (
+						<>
+							<SignIn />
+							<SignUp />
+						</>
+					)}
+				</View>
+			</ScrollView>
+		</Container>
+	);
+}
--- a/apps/cli/template/with-auth/apps/native/components/sign-in.tsx
+++ b/apps/cli/template/with-auth/apps/native/components/sign-in.tsx
@@ -0,0 +1,88 @@
+import { authClient } from "@/lib/auth-client";
+import { queryClient } from "@/utils/trpc";
+import { useState } from "react";
+import {
+	ActivityIndicator,
+	Text,
+	TextInput,
+	TouchableOpacity,
+	View,
+} from "react-native";
+
+export function SignIn() {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleLogin = async () => {
+		setIsLoading(true);
+		setError(null);
+
+		await authClient.signIn.email(
+			{
+				email,
+				password,
+			},
+			{
+				onError: (error) => {
+					setError(error.error?.message || "Failed to sign in");
+					setIsLoading(false);
+				},
+				onSuccess: () => {
+					setEmail("");
+					setPassword("");
+					queryClient.refetchQueries();
+				},
+				onFinished: () => {
+					setIsLoading(false);
+				},
+			},
+		);
+	};
+
+	return (
+		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
+			<Text className="text-lg font-semibold text-foreground mb-4">
+				Sign In
+			</Text>
+
+			{error && (
+				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
+					<Text className="text-destructive text-sm">{error}</Text>
+				</View>
+			)}
+
+			<TextInput
+				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				placeholderTextColor="#9CA3AF"
+				keyboardType="email-address"
+				autoCapitalize="none"
+			/>
+
+			<TextInput
+				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Password"
+				value={password}
+				onChangeText={setPassword}
+				placeholderTextColor="#9CA3AF"
+				secureTextEntry
+			/>
+
+			<TouchableOpacity
+				onPress={handleLogin}
+				disabled={isLoading}
+				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
+			>
+				{isLoading ? (
+					<ActivityIndicator size="small" color="#fff" />
+				) : (
+					<Text className="text-primary-foreground font-medium">Sign In</Text>
+				)}
+			</TouchableOpacity>
+		</View>
+	);
+}
--- a/apps/cli/template/with-auth/apps/native/components/sign-up.tsx
+++ b/apps/cli/template/with-auth/apps/native/components/sign-up.tsx
@@ -0,0 +1,99 @@
+import { authClient } from "@/lib/auth-client";
+import { queryClient } from "@/utils/trpc";
+import { useState } from "react";
+import {
+	ActivityIndicator,
+	Text,
+	TextInput,
+	TouchableOpacity,
+	View,
+} from "react-native";
+
+export function SignUp() {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleSignUp = async () => {
+		setIsLoading(true);
+		setError(null);
+
+		await authClient.signUp.email(
+			{
+				name,
+				email,
+				password,
+			},
+			{
+				onError: (error) => {
+					setError(error.error?.message || "Failed to sign up");
+					setIsLoading(false);
+				},
+				onSuccess: () => {
+					setName("");
+					setEmail("");
+					setPassword("");
+					queryClient.refetchQueries();
+				},
+				onFinished: () => {
+					setIsLoading(false);
+				},
+			},
+		);
+	};
+
+	return (
+		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
+			<Text className="text-lg font-semibold text-foreground mb-4">
+				Create Account
+			</Text>
+
+			{error && (
+				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
+					<Text className="text-destructive text-sm">{error}</Text>
+				</View>
+			)}
+
+			<TextInput
+				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Name"
+				value={name}
+				onChangeText={setName}
+				placeholderTextColor="#9CA3AF"
+			/>
+
+			<TextInput
+				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				placeholderTextColor="#9CA3AF"
+				keyboardType="email-address"
+				autoCapitalize="none"
+			/>
+
+			<TextInput
+				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Password"
+				value={password}
+				onChangeText={setPassword}
+				placeholderTextColor="#9CA3AF"
+				secureTextEntry
+			/>
+
+			<TouchableOpacity
+				onPress={handleSignUp}
+				disabled={isLoading}
+				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
+			>
+				{isLoading ? (
+					<ActivityIndicator size="small" color="#fff" />
+				) : (
+					<Text className="text-primary-foreground font-medium">Sign Up</Text>
+				)}
+			</TouchableOpacity>
+		</View>
+	);
+}
--- a/apps/cli/template/with-auth/apps/native/lib/auth-client.ts
+++ b/apps/cli/template/with-auth/apps/native/lib/auth-client.ts
@@ -0,0 +1,13 @@
+import { createAuthClient } from "better-auth/react";
+import { expoClient } from "@better-auth/expo/client";
+import * as SecureStore from "expo-secure-store";
+
+export const authClient = createAuthClient({
+  baseURL: process.env.EXPO_PUBLIC_SERVER_URL,
+  plugins: [
+    expoClient({
+      storagePrefix: "my-better-t-app",
+      storage: SecureStore,
+    }),
+  ],
+});
--- a/apps/cli/template/with-auth/apps/native/utils/trpc.ts
+++ b/apps/cli/template/with-auth/apps/native/utils/trpc.ts
@@ -0,0 +1,28 @@
+import { authClient } from "@/lib/auth-client";
+import { QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import type { AppRouter } from "../../server/src/routers";
+
+export const queryClient = new QueryClient();
+
+const trpcClient = createTRPCClient<AppRouter>({
+	links: [
+		httpBatchLink({
+			url: `${process.env.EXPO_PUBLIC_SERVER_URL}/trpc`,
+			headers() {
+				const headers = new Map<string, string>();
+				const cookies = authClient.getCookie();
+				if (cookies) {
+					headers.set("Cookie", cookies);
+				}
+				return Object.fromEntries(headers);
+			},
+		}),
+	],
+});
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+	client: trpcClient,
+	queryClient,
+});
--- a/apps/web/src/app/(home)/_components/Navbar.tsx
+++ b/apps/web/src/app/(home)/_components/Navbar.tsx
@@ -82,7 +82,7 @@ const Navbar = () => {
 								linkRefs.current.home = ref;
 							}}
 							onMouseOver={() => setActiveLink("home")}
-							className="relative rounded-md px-4 py-2 font-mono text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-300 flex gap-1 items-center"
+							className="relative flex items-center gap-1 rounded-md px-4 py-2 font-mono text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-300"
 						>
 							<span className="text-blue-600 dark:text-blue-400">~/</span>
 							home
@@ -131,7 +131,7 @@ const Navbar = () => {
 						>
 							<Github className="mr-1 size-4">
 								<title>GitHub</title>
-							</Github>{" "}
+							</Github>
 							Github
 						</Link>
 					</div>
--- a/apps/web/src/app/(home)/_components/StackArchitech.tsx
+++ b/apps/web/src/app/(home)/_components/StackArchitech.tsx
@@ -1,12 +1,22 @@
 "use client";

+import {
+	DEFAULT_STACK,
+	PRESET_TEMPLATES,
+	type StackState,
+	TECH_OPTIONS,
+} from "@/lib/constant";
 import { motion } from "framer-motion";
 import {
 	Check,
 	Circle,
 	CircleCheck,
 	ClipboardCopy,
+	HelpCircle,
 	InfoIcon,
+	RefreshCw,
+	Settings,
+	Star,
 	Terminal,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
@@ -36,315 +46,6 @@ const validateProjectName = (name: string): string | undefined => {
 	return undefined;
 };

-const TECH_OPTIONS = {
-	frontend: [
-		{
-			id: "tanstack-router",
-			name: "TanStack Router",
-			description: "Modern type-safe router for React",
-			icon: "🌐",
-			color: "from-blue-400 to-blue-600",
-			default: true,
-		},
-		{
-			id: "react-router",
-			name: "React Router",
-			description: "Declarative routing for React",
-			icon: "🧭",
-			color: "from-cyan-400 to-cyan-600",
-			default: false,
-		},
-		{
-			id: "native",
-			name: "React Native",
-			description: "Expo with NativeWind",
-			icon: "📱",
-			color: "from-purple-400 to-purple-600",
-			default: false,
-		},
-		{
-			id: "none",
-			name: "No Frontend",
-			description: "API-only backend",
-			icon: "⚙️",
-			color: "from-gray-400 to-gray-600",
-			default: false,
-		},
-	],
-	runtime: [
-		{
-			id: "bun",
-			name: "Bun",
-			description: "Fast JavaScript runtime & toolkit",
-			icon: "🥟",
-			color: "from-amber-400 to-amber-600",
-			default: true,
-		},
-		{
-			id: "node",
-			name: "Node.js",
-			description: "JavaScript runtime environment",
-			icon: "🟩",
-			color: "from-green-400 to-green-600",
-		},
-	],
-	backendFramework: [
-		{
-			id: "hono",
-			name: "Hono",
-			description: "Ultrafast web framework",
-			icon: "⚡",
-			color: "from-blue-500 to-blue-700",
-			default: true,
-		},
-		{
-			id: "elysia",
-			name: "Elysia",
-			description: "TypeScript web framework",
-			icon: "🦊",
-			color: "from-purple-500 to-purple-700",
-		},
-	],
-	database: [
-		{
-			id: "sqlite",
-			name: "SQLite",
-			description: "File-based SQL database",
-			icon: "🗃️",
-			color: "from-blue-400 to-cyan-500",
-			default: true,
-		},
-		{
-			id: "postgres",
-			name: "PostgreSQL",
-			description: "Advanced SQL database",
-			icon: "🐘",
-			color: "from-indigo-400 to-indigo-600",
-		},
-		{
-			id: "none",
-			name: "No Database",
-			description: "Skip database integration",
-			icon: "🚫",
-			color: "from-gray-400 to-gray-600",
-		},
-	],
-	orm: [
-		{
-			id: "drizzle",
-			name: "Drizzle",
-			description: "TypeScript ORM",
-			icon: "💧",
-			color: "from-cyan-400 to-cyan-600",
-			default: true,
-		},
-		{
-			id: "prisma",
-			name: "Prisma",
-			description: "Next-gen ORM",
-			icon: "◮",
-			color: "from-purple-400 to-purple-600",
-		},
-	],
-	auth: [
-		{
-			id: "true",
-			name: "Better Auth",
-			description: "Simple authentication",
-			icon: "🔐",
-			color: "from-green-400 to-green-600",
-			default: true,
-		},
-		{
-			id: "false",
-			name: "No Auth",
-			description: "Skip authentication",
-			icon: "🔓",
-			color: "from-red-400 to-red-600",
-		},
-	],
-	turso: [
-		{
-			id: "true",
-			name: "Turso",
-			description: "SQLite cloud database",
-			icon: "☁️",
-			color: "from-pink-400 to-pink-600",
-			default: false,
-		},
-		{
-			id: "false",
-			name: "No Turso",
-			description: "Skip Turso integration",
-			icon: "🚫",
-			color: "from-gray-400 to-gray-600",
-			default: true,
-		},
-	],
-	prismaPostgres: [
-		{
-			id: "true",
-			name: "Prisma PostgreSQL",
-			description: "Set up PostgreSQL with Prisma",
-			icon: "🐘",
-			color: "from-indigo-400 to-indigo-600",
-			default: false,
-		},
-		{
-			id: "false",
-			name: "Skip Prisma PostgreSQL",
-			description: "Basic Prisma setup",
-			icon: "🚫",
-			color: "from-gray-400 to-gray-600",
-			default: true,
-		},
-	],
-	packageManager: [
-		{
-			id: "npm",
-			name: "npm",
-			description: "Default package manager",
-			icon: "📦",
-			color: "from-red-500 to-red-700",
-		},
-		{
-			id: "pnpm",
-			name: "pnpm",
-			description: "Fast, disk space efficient",
-			icon: "🚀",
-			color: "from-orange-500 to-orange-700",
-		},
-		{
-			id: "bun",
-			name: "bun",
-			description: "All-in-one toolkit",
-			icon: "🥟",
-			color: "from-amber-500 to-amber-700",
-			default: true,
-		},
-	],
-	addons: [
-		{
-			id: "pwa",
-			name: "PWA",
-			description: "Progressive Web App",
-			icon: "📱",
-			color: "from-blue-500 to-blue-700",
-			default: false,
-		},
-		{
-			id: "tauri",
-			name: "Tauri",
-			description: "Desktop app support",
-			icon: "🖥️",
-			color: "from-amber-500 to-amber-700",
-			default: false,
-		},
-		{
-			id: "biome",
-			name: "Biome",
-			description: "Linting & formatting",
-			icon: "🌿",
-			color: "from-green-500 to-green-700",
-			default: false,
-		},
-		{
-			id: "husky",
-			name: "Husky",
-			description: "Git hooks & lint-staged",
-			icon: "🐶",
-			color: "from-purple-500 to-purple-700",
-			default: false,
-		},
-	],
-	examples: [
-		{
-			id: "todo",
-			name: "Todo Example",
-			description: "Simple todo application",
-			icon: "✅",
-			color: "from-indigo-500 to-indigo-700",
-			default: false,
-		},
-		{
-			id: "ai",
-			name: "AI Example",
-			description: "AI integration example using AI SDK",
-			icon: "🤖",
-			color: "from-purple-500 to-purple-700",
-			default: false,
-		},
-	],
-	git: [
-		{
-			id: "true",
-			name: "Git",
-			description: "Initialize Git repository",
-			icon: "📝",
-			color: "from-gray-500 to-gray-700",
-			default: true,
-		},
-		{
-			id: "false",
-			name: "No Git",
-			description: "Skip Git initialization",
-			icon: "🚫",
-			color: "from-red-400 to-red-600",
-		},
-	],
-	install: [
-		{
-			id: "true",
-			name: "Install Dependencies",
-			description: "Install packages automatically",
-			icon: "📥",
-			color: "from-green-400 to-green-600",
-			default: true,
-		},
-		{
-			id: "false",
-			name: "Skip Install",
-			description: "Skip dependency installation",
-			icon: "⏭️",
-			color: "from-yellow-400 to-yellow-600",
-		},
-	],
-};
-
-interface StackState {
-	projectName: string;
-	frontend: string[];
-	runtime: string;
-	backendFramework: string;
-	database: string;
-	orm: string | null;
-	auth: string;
-	turso: string;
-	prismaPostgres: string;
-	packageManager: string;
-	addons: string[];
-	examples: string[];
-	git: string;
-	install: string;
-}
-
-const DEFAULT_STACK: StackState = {
-	projectName: "my-better-t-app",
-	frontend: ["tanstack-router"],
-	runtime: "bun",
-	backendFramework: "hono",
-	database: "sqlite",
-	orm: "drizzle",
-	auth: "true",
-	turso: "false",
-	prismaPostgres: "false",
-	packageManager: "bun",
-	addons: [],
-	examples: [],
-	git: "true",
-	install: "true",
-};
-
 const StackArchitect = () => {
 	const [stack, setStack] = useState<StackState>(DEFAULT_STACK);
 	const [command, setCommand] = useState(
@@ -356,18 +57,21 @@ const StackArchitect = () => {
 	const [projectNameError, setProjectNameError] = useState<string | undefined>(
 		undefined,
 	);
+	const [showPresets, setShowPresets] = useState(false);
+	const [showHelp, setShowHelp] = useState(false);
+	const [lastSavedStack, setLastSavedStack] = useState<StackState | null>(null);

 	useEffect(() => {
-		const hasWebFrontend =
-			stack.frontend.includes("tanstack-router") ||
-			stack.frontend.includes("react-router");
-		if (!hasWebFrontend && stack.auth === "true") {
-			setStack((prev) => ({
-				...prev,
-				auth: "false",
-			}));
+		const savedStack = localStorage.getItem("betterTStackPreference");
+		if (savedStack) {
+			try {
+				const parsedStack = JSON.parse(savedStack);
+				setLastSavedStack(parsedStack);
+			} catch (e) {
+				console.error("Failed to parse saved stack", e);
+			}
 		}
-	}, [stack.frontend, stack.auth]);
+	}, []);

 	useEffect(() => {
 		if (stack.database === "none" && stack.orm !== "none") {
@@ -385,7 +89,17 @@ const StackArchitect = () => {
 				setStack((prev) => ({ ...prev, turso: "false" }));
 			}
 		}
-	}, [stack.database, stack.orm, stack.prismaPostgres, stack.turso]);
+
+		if (stack.database === "none" && stack.auth === "true") {
+			setStack((prev) => ({ ...prev, auth: "false" }));
+		}
+	}, [
+		stack.database,
+		stack.orm,
+		stack.prismaPostgres,
+		stack.turso,
+		stack.auth,
+	]);

 	useEffect(() => {
 		const cmd = generateCommand(stack);
@@ -398,13 +112,6 @@ const StackArchitect = () => {

 		notes.frontend = [];

-		notes.auth = [];
-		if (!hasWebFrontend && stack.auth === "true") {
-			notes.auth.push(
-				"Authentication is only available with React Web (TanStack Router or React Router).",
-			);
-		}
-
 		notes.addons = [];
 		if (!hasWebFrontend) {
 			notes.addons.push("PWA and Tauri are only available with React Web.");
@@ -419,6 +126,11 @@ const StackArchitect = () => {
 			);
 		}

+		notes.auth = [];
+		if (stack.database === "none") {
+			notes.auth.push("Authentication requires a database.");
+		}
+
 		notes.turso = [];
 		if (stack.database !== "sqlite") {
 			notes.turso.push(
@@ -535,7 +247,6 @@ const StackArchitect = () => {
 						return {
 							...prev,
 							frontend: ["none"],
-							auth: "false",
 							examples: [],
 							addons: prev.addons.filter(
 								(addon) => addon !== "pwa" && addon !== "tauri",
@@ -543,68 +254,33 @@ const StackArchitect = () => {
 						};
 					}

-					if (webTypes.includes(techId)) {
-						if (
-							currentSelection.includes(techId) &&
-							currentSelection.length === 1
-						) {
+					if (currentSelection.includes(techId)) {
+						if (currentSelection.length === 1) {
 							return prev;
 						}

-						if (currentSelection.some((id) => webTypes.includes(id))) {
-							const nonWebSelections = currentSelection.filter(
-								(id) => !webTypes.includes(id),
-							);
-							return {
-								...prev,
-								frontend: [...nonWebSelections, techId],
-								auth: prev.auth,
-							};
-						}
-
-						if (currentSelection.includes("none")) {
-							return {
-								...prev,
-								frontend: [techId],
-								auth: "true",
-							};
-						}
-
 						return {
 							...prev,
-							frontend: [
-								...currentSelection.filter((id) => id !== "none"),
-								techId,
-							],
-							auth: "true",
+							frontend: currentSelection.filter((id) => id !== techId),
 						};
 					}

-					if (techId === "native") {
-						if (currentSelection.includes(techId)) {
-							if (currentSelection.length === 1) {
-								return prev;
-							}
-							return {
-								...prev,
-								frontend: currentSelection.filter((id) => id !== techId),
-							};
-						}
+					let newSelection = [...currentSelection];

-						if (currentSelection.includes("none")) {
-							return {
-								...prev,
-								frontend: [techId],
-							};
-						}
-
-						return {
-							...prev,
-							frontend: [...currentSelection, techId],
-						};
+					if (newSelection.includes("none")) {
+						newSelection = [];
 					}

-					return prev;
+					if (webTypes.includes(techId)) {
+						newSelection = newSelection.filter((id) => !webTypes.includes(id));
+					}
+
+					newSelection.push(techId);
+
+					return {
+						...prev,
+						frontend: newSelection,
+					};
 				}

 				if (category === "addons" || category === "examples") {
@@ -666,7 +342,7 @@ const StackArchitect = () => {
 							orm: "none",
 							turso: "false",
 							prismaPostgres: "false",
-							auth: hasWebFrontend(prev.frontend) ? prev.auth : "false",
+							auth: "false",
 						};
 					}

@@ -680,6 +356,11 @@ const StackArchitect = () => {
 								techId === "postgres" && prev.orm === "prisma"
 									? prev.prismaPostgres
 									: "false",
+							auth:
+								hasWebFrontend(prev.frontend) ||
+								prev.frontend.includes("native")
+									? "true"
+									: "false",
 						};
 					}

@@ -735,6 +416,14 @@ const StackArchitect = () => {
 					return prev;
 				}

+				if (
+					category === "auth" &&
+					prev.database === "none" &&
+					techId === "true"
+				) {
+					return prev;
+				}
+
 				return {
 					...prev,
 					[category]: techId,
@@ -747,7 +436,8 @@ const StackArchitect = () => {
 	const hasWebFrontend = useCallback((frontendOptions: string[]) => {
 		return (
 			frontendOptions.includes("tanstack-router") ||
-			frontendOptions.includes("react-router")
+			frontendOptions.includes("react-router") ||
+			frontendOptions.includes("native")
 		);
 	}, []);

@@ -757,6 +447,40 @@ const StackArchitect = () => {
 		setTimeout(() => setCopied(false), 2000);
 	}, [command]);

+	const resetStack = useCallback(() => {
+		setStack(DEFAULT_STACK);
+		setActiveTab("frontend");
+	}, []);
+
+	const saveCurrentStack = useCallback(() => {
+		localStorage.setItem("betterTStackPreference", JSON.stringify(stack));
+		setLastSavedStack(stack);
+		const saveMessage = document.createElement("div");
+		saveMessage.textContent = "Stack preferences saved!";
+		saveMessage.className =
+			"fixed bottom-4 right-4 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg z-50";
+		document.body.appendChild(saveMessage);
+		setTimeout(() => {
+			document.body.removeChild(saveMessage);
+		}, 3000);
+	}, [stack]);
+
+	const loadSavedStack = useCallback(() => {
+		if (lastSavedStack) {
+			setStack(lastSavedStack);
+		}
+	}, [lastSavedStack]);
+
+	const applyPreset = useCallback((presetId: string) => {
+		const preset = PRESET_TEMPLATES.find(
+			(template) => template.id === presetId,
+		);
+		if (preset) {
+			setStack(preset.stack);
+			setShowPresets(false);
+		}
+	}, []);
+
 	return (
 		<div className="mx-auto w-full">
 			<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 text-gray-800 shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-white">
@@ -769,7 +493,23 @@ const StackArchitect = () => {
 					<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
 						Stack Architect Terminal
 					</div>
-					<div>
+					<div className="flex space-x-2">
+						<button
+							type="button"
+							onClick={() => setShowHelp(!showHelp)}
+							className="text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
+							title="Help"
+						>
+							<HelpCircle className="h-4 w-4" />
+						</button>
+						<button
+							type="button"
+							onClick={() => setShowPresets(!showPresets)}
+							className="text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
+							title="Presets"
+						>
+							<Star className="h-4 w-4" />
+						</button>
 						<button
 							type="button"
 							onClick={copyToClipboard}
@@ -784,9 +524,59 @@ const StackArchitect = () => {
 						</button>
 					</div>
 				</div>
+
+				{showHelp && (
+					<div className="border-gray-300 border-b bg-blue-50 p-4 dark:border-gray-700 dark:bg-blue-900/20">
+						<h3 className="mb-2 font-medium text-blue-800 dark:text-blue-300">
+							How to Use Stack Architect
+						</h3>
+						<ul className="list-disc space-y-1 pl-5 text-blue-700 text-sm dark:text-blue-400">
+							<li>
+								Select your preferred technologies from each category using the
+								tabs below
+							</li>
+							<li>
+								The command will automatically update based on your selections
+							</li>
+							<li>
+								Click the copy button to copy the command to your clipboard
+							</li>
+							<li>
+								You can reset to defaults or choose from presets for quick setup
+							</li>
+							<li>Save your preferences to load them later when you return</li>
+						</ul>
+					</div>
+				)}
+
+				{showPresets && (
+					<div className="border-gray-300 border-b bg-amber-50 p-4 dark:border-gray-700 dark:bg-amber-900/20">
+						<h3 className="mb-2 font-medium text-amber-800 dark:text-amber-300">
+							Quick Start Presets
+						</h3>
+						<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+							{PRESET_TEMPLATES.map((preset) => (
+								<button
+									type="button"
+									key={preset.id}
+									onClick={() => applyPreset(preset.id)}
+									className="rounded border border-amber-200 p-2 text-left transition-colors hover:bg-amber-100 dark:border-amber-700 dark:hover:bg-amber-800/30"
+								>
+									<div className="font-medium text-amber-700 dark:text-amber-300">
+										{preset.name}
+									</div>
+									<div className="text-amber-600 text-xs dark:text-amber-400">
+										{preset.description}
+									</div>
+								</button>
+							))}
+						</div>
+					</div>
+				)}
+
 				<div className="p-4 font-mono">
-					<div className="mb-4">
-						<label className="mb-2 flex flex-col">
+					<div className="mb-4 flex items-start justify-between">
+						<label className="flex flex-col">
 							<span className="mb-1 text-gray-600 text-xs dark:text-gray-400">
 								Project Name:
 							</span>
@@ -811,6 +601,40 @@ const StackArchitect = () => {
 								<p className="mt-1 text-red-500 text-xs">{projectNameError}</p>
 							)}
 						</label>
+
+						<div className="flex gap-2">
+							<button
+								type="button"
+								onClick={resetStack}
+								className="flex items-center gap-1 rounded border border-gray-300 bg-gray-200 px-2 py-1 text-gray-700 text-xs hover:bg-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+								title="Reset to defaults"
+							>
+								<RefreshCw className="h-3 w-3" />
+								Reset
+							</button>
+
+							{lastSavedStack && (
+								<button
+									type="button"
+									onClick={loadSavedStack}
+									className="flex items-center gap-1 rounded border border-blue-300 bg-blue-100 px-2 py-1 text-blue-700 text-xs hover:bg-blue-200 dark:border-blue-700 dark:bg-blue-900/50 dark:text-blue-300 dark:hover:bg-blue-800/50"
+									title="Load saved preferences"
+								>
+									<Settings className="h-3 w-3" />
+									Load Saved
+								</button>
+							)}
+
+							<button
+								type="button"
+								onClick={saveCurrentStack}
+								className="flex items-center gap-1 rounded border border-green-300 bg-green-100 px-2 py-1 text-green-700 text-xs hover:bg-green-200 dark:border-green-700 dark:bg-green-900/50 dark:text-green-300 dark:hover:bg-green-800/50"
+								title="Save current preferences"
+							>
+								<Star className="h-3 w-3" />
+								Save
+							</button>
+						</div>
 					</div>
 					<div className="mb-4">
 						<div className="flex">
@@ -833,7 +657,7 @@ const StackArchitect = () => {
 							</ul>
 						</div>
 					)}
-					<div className="mt-4 border-gray-300 border-t pt-4 dark:border-gray-700">
+					<div className="border-gray-300 border-t pt-4 dark:border-gray-700">
 						<div className="mb-3 flex items-center text-gray-600 dark:text-gray-400">
 							<Terminal className="mr-2 h-4 w-4" />
 							<span>
@@ -867,7 +691,6 @@ const StackArchitect = () => {
 										(activeTab === "prismaPostgres" &&
 											(stack.database !== "postgres" ||
 												stack.orm !== "prisma")) ||
-										(activeTab === "auth" && !hasWebFrontendSelected) ||
 										(activeTab === "examples" &&
 											(((tech.id === "todo" || tech.id === "ai") &&
 												!hasWebFrontendSelected) ||
@@ -875,18 +698,37 @@ const StackArchitect = () => {
 													stack.backendFramework === "elysia"))) ||
 										(activeTab === "addons" &&
 											(tech.id === "pwa" || tech.id === "tauri") &&
-											!hasWebFrontendSelected);
+											!hasWebFrontendSelected) ||
+										(activeTab === "auth" &&
+											tech.id === "true" &&
+											stack.database === "none");
+
+									const compatNote = isDisabled
+										? compatNotes[activeTab]?.find((note) =>
+												note.toLowerCase().includes(tech.name.toLowerCase()),
+											)
+										: null;

 									return (
 										<motion.div
 											key={tech.id}
-											className={`p-2 px-3 rounded${isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
-												${
+											className={`rounded p-2 px-3${
+												isDisabled
+													? " cursor-not-allowed opacity-50"
+													: " cursor-pointer"
+											}
+                        ${
 													isSelected
 														? "border border-blue-300 bg-blue-100 dark:border-blue-500/50 dark:bg-blue-900/40"
 														: "border border-gray-300 hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
 												}
-											`}
+                      `}
+											title={
+												isDisabled
+													? compatNote ||
+														"Option not available with current selection"
+													: tech.description
+											}
 											whileHover={!isDisabled ? { scale: 1.02 } : undefined}
 											whileTap={!isDisabled ? { scale: 0.98 } : undefined}
 											onClick={() =>
@@ -935,8 +777,30 @@ const StackArchitect = () => {
 						</div>

 						<div className="mb-3 border-gray-300 border-t pt-3 dark:border-gray-700">
-							<div className="mb-2 text-gray-600 text-xs dark:text-gray-400">
-								Selected Stack
+							<div className="mb-2 flex items-center justify-between">
+								<div className="text-gray-600 text-xs dark:text-gray-400">
+									Selected Stack
+								</div>
+								<button
+									type="button"
+									onClick={() => {
+										alert(
+											// biome-ignore lint/style/useTemplate: <explanation>
+											"Stack Summary:\n\n" +
+												Object.entries(stack)
+													.map(([key, value]) => {
+														if (Array.isArray(value)) {
+															return `${key}: ${value.join(", ") || "none"}`;
+														}
+														return `${key}: ${value || "none"}`;
+													})
+													.join("\n"),
+										);
+									}}
+									className="text-blue-600 text-xs hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+								>
+									Full Summary
+								</button>
 							</div>
 							<div className="flex flex-wrap gap-1">
 								{stack.frontend.map((frontendId) => {
@@ -994,12 +858,14 @@ const StackArchitect = () => {
 									</span>
 								)}

-								{hasWebFrontend(stack.frontend) && (
-									<span className="inline-flex items-center rounded border border-green-300 bg-green-100 px-1.5 py-0.5 text-green-800 text-xs dark:border-green-700/30 dark:bg-green-900/30 dark:text-green-300">
-										{TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.icon}{" "}
-										{TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.name}
-									</span>
-								)}
+								{stack.frontend[0] !== "none" &&
+									stack.database !== "none" &&
+									stack.auth === "true" && (
+										<span className="inline-flex items-center rounded border border-green-300 bg-green-100 px-1.5 py-0.5 text-green-800 text-xs dark:border-green-700/30 dark:bg-green-900/30 dark:text-green-300">
+											{TECH_OPTIONS.auth.find((t) => t.id === "true")?.icon}{" "}
+											{TECH_OPTIONS.auth.find((t) => t.id === "true")?.name}
+										</span>
+									)}

 								{stack.turso === "true" &&
 									stack.database === "sqlite" &&
@@ -1072,10 +938,10 @@ const StackArchitect = () => {
 							key={category}
 							className={`whitespace-nowrap px-4 py-2 font-mono text-xs transition-colors${
 								activeTab === category
-									? "border-blue-500 border-t-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
-									: "text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+									? " border-blue-500 border-t-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
+									: " text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 							}
-							`}
+              `}
 							onClick={() => setActiveTab(category)}
 						>
 							{category}
--- a/apps/web/src/lib/constant.ts
+++ b/apps/web/src/lib/constant.ts
@@ -1,268 +1,395 @@
-import {
-	AppWindow,
-	Boxes,
-	Component,
-	Database,
-	FastForward,
-	Lock,
-	Palette,
-	ServerCog,
-	Workflow,
-} from "lucide-react";
-import type { TechNode } from "./types";
-
-export const technologies = [
-	{
-		name: "Bun",
-		category: "core",
-		angle: -25,
-		icon: FastForward,
-		color: "bg-yellow-100",
-		textColor: "text-black",
-		description: "Fast all-in-one JavaScript runtime",
-		top: "top-[2px]",
-		left: "left-[11rem]",
-	},
-	{
-		name: "tRPC",
-		category: "core",
-		angle: 25,
-		icon: Workflow,
-		color: "bg-blue-600",
-		textColor: "text-white",
-		description: "End-to-end type-safe APIs",
-		left: "left-[5rem]",
-	},
-
-	{
-		name: "TanStack Router",
-		category: "frontend",
-		angle: 30,
-		icon: AppWindow,
-		color: "bg-red-500",
-		textColor: "text-white",
-		description: "Type-safe routing",
-		top: "top-[2px]",
-		left: "left-[8.5rem]",
-	},
-	{
-		name: "Tailwind CSS",
-		category: "frontend",
-		angle: 90,
-		icon: Palette,
-		color: "bg-sky-400",
-		textColor: "text-white",
-		description: "Utility-first CSS framework",
-	},
-	{
-		name: "shadcn/ui",
-		category: "frontend",
-		angle: 150,
-		icon: Component,
-		color: "bg-gray-900",
-		textColor: "text-white",
-		description: "Re-usable components",
-		left: "-left-[2rem]",
-	},
-
-	{
-		name: "Hono",
-		category: "backend",
-		angle: -150,
-		icon: ServerCog,
-		color: "bg-orange-500",
-		textColor: "text-white",
-		description: "Ultrafast web framework",
-		left: "left-[0rem]",
-	},
-	{
-		name: "Better-Auth",
-		category: "backend",
-		angle: -110,
-		icon: Lock,
-		color: "bg-indigo-600",
-		textColor: "text-white",
-		description: "Modern authentication solution",
-	},
-	{
-		name: "Drizzle ORM",
-		category: "backend",
-		angle: -70,
-		icon: Database,
-		color: "bg-green-400",
-		textColor: "text-black",
-		description: "TypeScript ORM",
-		left: "left-[4rem]",
-	},
-	{
-		name: "Sqlite",
-		category: "backend",
-		angle: -30,
-		icon: Boxes,
-		color: "bg-gray-600",
-		textColor: "text-white",
-		description: "SQLite-compatible database engine",
-		left: "left-[6rem]",
-	},
-];
-
-export const initialNodes: TechNode[] = [
-	{
-		id: "bun",
-		type: "techNode",
-		position: { x: 536, y: 204 },
-		data: {
-			label: "Bun",
-			category: "core",
-			description: "Fast all-in-one JavaScript runtime",
-			isDefault: true,
-			isActive: true,
-			isStatic: true,
+export const TECH_OPTIONS = {
+	frontend: [
+		{
+			id: "tanstack-router",
+			name: "TanStack Router",
+			description: "Modern type-safe router for React",
+			icon: "🌐",
+			color: "from-blue-400 to-blue-600",
+			default: true,
 		},
-	},
-	{
-		id: "tanstack",
-		type: "techNode",
-		position: { x: 362, y: 296 },
-		data: {
-			label: "TanStack Router",
-			category: "frontend",
-			description: "Type-safe routing",
-			isDefault: true,
-			isActive: true,
-			isStatic: true,
-			group: "router",
+		{
+			id: "react-router",
+			name: "React Router",
+			description: "Declarative routing for React",
+			icon: "🧭",
+			color: "from-cyan-400 to-cyan-600",
+			default: false,
 		},
-	},
-	{
-		id: "tailwind",
-		type: "techNode",
-		position: { x: 494, y: 379 },
-		data: {
-			label: "Tailwind CSS",
-			category: "frontend",
-			description: "Utility-first CSS framework",
-			isDefault: true,
-			isActive: true,
-			isStatic: true,
+		{
+			id: "native",
+			name: "React Native",
+			description: "Expo with NativeWind",
+			icon: "📱",
+			color: "from-purple-400 to-purple-600",
+			default: false,
 		},
-	},
-	{
-		id: "shadcn",
-		type: "techNode",
-		position: { x: 358, y: 486 },
-		data: {
-			label: "shadcn/ui",
-			category: "frontend",
-			description: "Re-usable components",
-			isDefault: true,
-			isActive: true,
-			isStatic: true,
+		{
+			id: "none",
+			name: "No Frontend",
+			description: "API-only backend",
+			icon: "⚙️",
+			color: "from-gray-400 to-gray-600",
+			default: false,
 		},
-	},
-	{
-		id: "hono",
-		type: "techNode",
-		position: { x: 700, y: 325 },
-		data: {
-			label: "Hono",
-			category: "backend",
+	],
+	runtime: [
+		{
+			id: "bun",
+			name: "Bun",
+			description: "Fast JavaScript runtime & toolkit",
+			icon: "🥟",
+			color: "from-amber-400 to-amber-600",
+			default: true,
+		},
+		{
+			id: "node",
+			name: "Node.js",
+			description: "JavaScript runtime environment",
+			icon: "🟩",
+			color: "from-green-400 to-green-600",
+		},
+	],
+	backendFramework: [
+		{
+			id: "hono",
+			name: "Hono",
 			description: "Ultrafast web framework",
-			isDefault: true,
-			isActive: true,
-			isStatic: true,
-			group: "backend",
+			icon: "⚡",
+			color: "from-blue-500 to-blue-700",
+			default: true,
 		},
-	},
-	{
-		id: "sqlite",
-		type: "techNode",
-		position: { x: 544, y: 532 },
-		data: {
-			label: "SQLite",
-			category: "database",
-			description: "SQLite-compatible database",
-			isDefault: true,
-			isActive: true,
-			group: "database",
+		{
+			id: "elysia",
+			name: "Elysia",
+			description: "TypeScript web framework",
+			icon: "🦊",
+			color: "from-purple-500 to-purple-700",
 		},
-	},
-	{
-		id: "postgres",
-		type: "techNode",
-		position: { x: 318, y: 579 },
-		data: {
-			label: "PostgreSQL",
-			category: "database",
+	],
+	database: [
+		{
+			id: "sqlite",
+			name: "SQLite",
+			description: "File-based SQL database",
+			icon: "🗃️",
+			color: "from-blue-400 to-cyan-500",
+			default: true,
+		},
+		{
+			id: "postgres",
+			name: "PostgreSQL",
 			description: "Advanced SQL database",
-			isDefault: false,
-			isActive: false,
-			group: "database",
+			icon: "🐘",
+			color: "from-indigo-400 to-indigo-600",
 		},
-	},
-	{
-		id: "no-database",
-		type: "techNode",
-		position: { x: 420, y: 710 },
-		data: {
-			label: "No Database",
-			category: "database",
-			description: "Skip database setup",
-			isDefault: false,
-			isActive: false,
-			group: "database",
+		{
+			id: "none",
+			name: "No Database",
+			description: "Skip database integration",
+			icon: "🚫",
+			color: "from-gray-400 to-gray-600",
 		},
-	},
-	{
-		id: "drizzle",
-		type: "techNode",
-		position: { x: 559, y: 651 },
-		data: {
-			label: "Drizzle",
-			category: "orm",
+	],
+	orm: [
+		{
+			id: "drizzle",
+			name: "Drizzle",
 			description: "TypeScript ORM",
-			isDefault: true,
-			isActive: true,
-			group: "orm",
+			icon: "💧",
+			color: "from-cyan-400 to-cyan-600",
+			default: true,
+		},
+		{
+			id: "prisma",
+			name: "Prisma",
+			description: "Next-gen ORM",
+			icon: "◮",
+			color: "from-purple-400 to-purple-600",
+		},
+	],
+	auth: [
+		{
+			id: "true",
+			name: "Better Auth",
+			description: "Simple authentication",
+			icon: "🔐",
+			color: "from-green-400 to-green-600",
+			default: true,
+		},
+		{
+			id: "false",
+			name: "No Auth",
+			description: "Skip authentication",
+			icon: "🔓",
+			color: "from-red-400 to-red-600",
+		},
+	],
+	turso: [
+		{
+			id: "true",
+			name: "Turso",
+			description: "SQLite cloud database",
+			icon: "☁️",
+			color: "from-pink-400 to-pink-600",
+			default: false,
+		},
+		{
+			id: "false",
+			name: "No Turso",
+			description: "Skip Turso integration",
+			icon: "🚫",
+			color: "from-gray-400 to-gray-600",
+			default: true,
+		},
+	],
+	prismaPostgres: [
+		{
+			id: "true",
+			name: "Prisma PostgreSQL",
+			description: "Set up PostgreSQL with Prisma",
+			icon: "🐘",
+			color: "from-indigo-400 to-indigo-600",
+			default: false,
+		},
+		{
+			id: "false",
+			name: "Skip Prisma PostgreSQL",
+			description: "Basic Prisma setup",
+			icon: "🚫",
+			color: "from-gray-400 to-gray-600",
+			default: true,
+		},
+	],
+	packageManager: [
+		{
+			id: "npm",
+			name: "npm",
+			description: "Default package manager",
+			icon: "📦",
+			color: "from-red-500 to-red-700",
+		},
+		{
+			id: "pnpm",
+			name: "pnpm",
+			description: "Fast, disk space efficient",
+			icon: "🚀",
+			color: "from-orange-500 to-orange-700",
+		},
+		{
+			id: "bun",
+			name: "bun",
+			description: "All-in-one toolkit",
+			icon: "🥟",
+			color: "from-amber-500 to-amber-700",
+			default: true,
+		},
+	],
+	addons: [
+		{
+			id: "pwa",
+			name: "PWA",
+			description: "Progressive Web App",
+			icon: "📱",
+			color: "from-blue-500 to-blue-700",
+			default: false,
+		},
+		{
+			id: "tauri",
+			name: "Tauri",
+			description: "Desktop app support",
+			icon: "🖥️",
+			color: "from-amber-500 to-amber-700",
+			default: false,
+		},
+		{
+			id: "biome",
+			name: "Biome",
+			description: "Linting & formatting",
+			icon: "🌿",
+			color: "from-green-500 to-green-700",
+			default: false,
+		},
+		{
+			id: "husky",
+			name: "Husky",
+			description: "Git hooks & lint-staged",
+			icon: "🐶",
+			color: "from-purple-500 to-purple-700",
+			default: false,
+		},
+	],
+	examples: [
+		{
+			id: "todo",
+			name: "Todo Example",
+			description: "Simple todo application",
+			icon: "✅",
+			color: "from-indigo-500 to-indigo-700",
+			default: false,
+		},
+		{
+			id: "ai",
+			name: "AI Example",
+			description: "AI integration example using AI SDK",
+			icon: "🤖",
+			color: "from-purple-500 to-purple-700",
+			default: false,
+		},
+	],
+	git: [
+		{
+			id: "true",
+			name: "Git",
+			description: "Initialize Git repository",
+			icon: "📝",
+			color: "from-gray-500 to-gray-700",
+			default: true,
+		},
+		{
+			id: "false",
+			name: "No Git",
+			description: "Skip Git initialization",
+			icon: "🚫",
+			color: "from-red-400 to-red-600",
+		},
+	],
+	install: [
+		{
+			id: "true",
+			name: "Install Dependencies",
+			description: "Install packages automatically",
+			icon: "📥",
+			color: "from-green-400 to-green-600",
+			default: true,
+		},
+		{
+			id: "false",
+			name: "Skip Install",
+			description: "Skip dependency installation",
+			icon: "⏭️",
+			color: "from-yellow-400 to-yellow-600",
+		},
+	],
+};
+
+export const PRESET_TEMPLATES = [
+	{
+		id: "default",
+		name: "Default Stack",
+		description: "Standard web app with TanStack Router, Bun, Hono and SQLite",
+		stack: {
+			projectName: "my-better-t-app",
+			frontend: ["tanstack-router"],
+			runtime: "bun",
+			backendFramework: "hono",
+			database: "sqlite",
+			orm: "drizzle",
+			auth: "true",
+			turso: "false",
+			prismaPostgres: "false",
+			packageManager: "bun",
+			addons: [],
+			examples: [],
+			git: "true",
+			install: "true",
 		},
 	},
 	{
-		id: "prisma",
-		type: "techNode",
-		position: { x: 707, y: 675 },
-		data: {
-			label: "Prisma",
-			category: "orm",
-			description: "Next-generation ORM",
-			isDefault: false,
-			isActive: false,
-			group: "orm",
+		id: "native-app",
+		name: "Mobile App",
+		description: "React Native with Expo and SQLite database",
+		stack: {
+			projectName: "my-better-t-app",
+			frontend: ["native"],
+			runtime: "bun",
+			backendFramework: "hono",
+			database: "sqlite",
+			orm: "drizzle",
+			auth: "true",
+			turso: "false",
+			prismaPostgres: "false",
+			packageManager: "bun",
+			addons: [],
+			examples: [],
+			git: "true",
+			install: "true",
 		},
 	},
 	{
-		id: "better-auth",
-		type: "techNode",
-		position: { x: 770, y: 502 },
-		data: {
-			label: "Better-Auth",
-			category: "auth",
-			description: "Modern authentication",
-			isDefault: true,
-			isActive: true,
-			group: "auth",
+		id: "api-only",
+		name: "API Only",
+		description: "Backend API with Hono and PostgreSQL",
+		stack: {
+			projectName: "my-better-t-app",
+			frontend: ["none"],
+			runtime: "bun",
+			backendFramework: "hono",
+			database: "postgres",
+			orm: "drizzle",
+			auth: "false",
+			turso: "false",
+			prismaPostgres: "false",
+			packageManager: "bun",
+			addons: [],
+			examples: [],
+			git: "true",
+			install: "true",
 		},
 	},
 	{
-		id: "no-auth",
-		type: "techNode",
-		position: { x: 950, y: 621 },
-		data: {
-			label: "No Auth",
-			category: "auth",
-			description: "No authentication needed",
-			isDefault: false,
-			isActive: false,
-			group: "auth",
+		id: "full-featured",
+		name: "Full Featured",
+		description: "Complete setup with all the bells and whistles",
+		stack: {
+			projectName: "my-better-t-app",
+			frontend: ["tanstack-router", "native"],
+			runtime: "bun",
+			backendFramework: "hono",
+			database: "sqlite",
+			orm: "drizzle",
+			auth: "true",
+			turso: "true",
+			prismaPostgres: "false",
+			packageManager: "bun",
+			addons: ["pwa", "biome", "husky", "tauri"],
+			examples: ["todo", "ai"],
+			git: "true",
+			install: "true",
 		},
 	},
 ];
+
+export type StackState = {
+	projectName: string;
+	frontend: string[];
+	runtime: string;
+	backendFramework: string;
+	database: string;
+	orm: string | null;
+	auth: string;
+	turso: string;
+	prismaPostgres: string;
+	packageManager: string;
+	addons: string[];
+	examples: string[];
+	git: string;
+	install: string;
+};
+
+export const DEFAULT_STACK: StackState = {
+	projectName: "my-better-t-app",
+	frontend: ["tanstack-router"],
+	runtime: "bun",
+	backendFramework: "hono",
+	database: "sqlite",
+	orm: "drizzle",
+	auth: "true",
+	turso: "false",
+	prismaPostgres: "false",
+	packageManager: "bun",
+	addons: [],
+	examples: [],
+	git: "true",
+	install: "true",
+};