create-better-t-stack 1.12.3 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-better-t-stack",
-	"version": "1.12.3",
+	"version": "1.13.0",
 	"description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
 	"type": "module",
 	"license": "MIT",
@@ -53,15 +53,16 @@
 	},
 	"dependencies": {
 		"@clack/prompts": "^0.10.1",
-		"commander": "^13.1.0",
 		"execa": "^8.0.1",
 		"fs-extra": "^11.3.0",
 		"gradient-string": "^3.0.0",
-		"picocolors": "^1.1.1"
+		"picocolors": "^1.1.1",
+		"yargs": "^17.7.2"
 	},
 	"devDependencies": {
 		"@types/fs-extra": "^11.0.4",
 		"@types/node": "^20.17.30",
+		"@types/yargs": "^17.0.33",
 		"tsup": "^8.4.0",
 		"typescript": "^5.8.3"
 	}

package/template/base/apps/server/_gitignore

@@ -1,22 +1,32 @@
 # prod
 dist/
+/build
+/out/
 
 # dev
 .yarn/
+!.yarn/patches
+!.yarn/plugins
 !.yarn/releases
+!.yarn/versions
 .vscode/*
 !.vscode/launch.json
 !.vscode/*.code-snippets
 .idea/workspace.xml
 .idea/usage.statistics.xml
 .idea/shelf
+.wrangler
+/.next/
+.vercel
 
 # deps
 node_modules/
-.wrangler
+/node_modules
+/.pnp
+.pnp.*
 
 # env
-.env
+.env*
 .env.production
 .dev.vars
 
@@ -31,6 +41,11 @@ lerna-debug.log*
 
 # misc
 .DS_Store
+*.pem
 
 # local db
 *.db*
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/template/base/apps/web-base/_gitignore

@@ -1,26 +1,52 @@
-# Local
-.DS_Store
-*.local
-*.log*
+# Dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
-# Dist
-node_modules
-dist/
+# Testing
+/coverage
+
+# Build outputs
+/.next/
+/out/
+/build/
+/dist/
 .vinxi
 .output
+.react-router/
+
+# Deployment
 .vercel
 .netlify
 .wrangler
 
+# Environment & local files
+.env*
+!.env.example
+.DS_Store
+*.pem
+*.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+*.log*
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
 # IDE
 .vscode/*
 !.vscode/extensions.json
 .idea
 
-*.env*
-!.env.example
-
+# Other
 dev-dist
-
-/.react-router/
-/build/

package/template/base/apps/web-base/src/index.css

@@ -4,7 +4,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 

package/template/base/apps/web-next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/base/apps/web-next/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "export"
+};
+
+export default nextConfig;

package/template/base/apps/web-next/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack --port=3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@tanstack/react-form": "^1.3.2",
+    "@tanstack/react-query": "^5.72.2",
+    "@trpc/client": "^11.1.0",
+    "@trpc/tanstack-react-query": "^11.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.487.0",
+    "next": "15.3.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "tw-animate-css": "^1.2.5",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@tanstack/react-query-devtools": "^5.72.2",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/template/base/apps/web-next/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/template/base/apps/web-next/src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../index.css";
+import Providers from "@/components/providers";
+import Header from "@/components/header";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Providers>
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            {children}
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/template/base/apps/web-next/src/app/page.tsx

@@ -0,0 +1,83 @@
+"use client"
+import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+
+const TITLE_TEXT = `
+ ██████╗ ███████╗████████╗████████╗███████╗██████╗
+ ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
+ ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
+ ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
+ ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
+ ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
+
+ ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
+ ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+    ██║       ███████╗   ██║   ███████║██║     █████╔╝
+    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+ `;
+
+export default function Home() {
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+
+  return (
+    <div className="container mx-auto max-w-3xl px-4 py-2">
+      <pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
+      <div className="grid gap-6">
+        <section className="rounded-lg border p-4">
+          <h2 className="mb-2 font-medium">API Status</h2>
+          <div className="flex items-center gap-2">
+            <div
+              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+            />
+            <span className="text-sm text-muted-foreground">
+              {healthCheck.isLoading
+                ? "Checking..."
+                : healthCheck.data
+                  ? "Connected"
+                  : "Disconnected"}
+            </span>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="mb-3 font-medium">Core Features</h2>
+          <ul className="grid grid-cols-2 gap-3">
+            <FeatureItem
+              title="Type-Safe API"
+              description="End-to-end type safety with tRPC"
+            />
+            <FeatureItem
+              title="Modern React"
+              description="TanStack Router + TanStack Query"
+            />
+            <FeatureItem
+              title="Fast Backend"
+              description="Lightweight Hono server"
+            />
+            <FeatureItem
+              title="Beautiful UI"
+              description="TailwindCSS + shadcn/ui components"
+            />
+          </ul>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function FeatureItem({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <li className="border-l-2 border-primary py-1 pl-3">
+      <h3 className="font-medium">{title}</h3>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </li>
+  );
+}

package/template/base/apps/web-next/src/components/header.tsx

@@ -0,0 +1,30 @@
+"use client"
+import Link from "next/link";
+import { ModeToggle } from "./mode-toggle";
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+  ];
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => (
+            <Link
+              key={to}
+              href={to}
+            >
+              {label}
+            </Link>
+          ))}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

package/template/base/apps/web-next/src/components/mode-toggle.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/template/base/apps/web-next/src/components/providers.tsx

@@ -0,0 +1,25 @@
+"use client"
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "@/utils/trpc";
+import { ThemeProvider } from "./theme-provider";
+import { Toaster } from "./ui/sonner";
+
+export default function Providers({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+      <Toaster richColors />
+    </ThemeProvider>
+  )
+}

package/template/base/apps/web-next/src/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/template/base/apps/web-next/src/utils/trpc.ts

@@ -0,0 +1,33 @@
+import { QueryCache, 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';
+import { toast } from 'sonner';
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${process.env.NEXT_PUBLIC_SERVER_URL}/api/trpc`,
+    }),
+  ],
+})
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

package/template/base/apps/web-next/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./next-env.d.ts", "./**/*.ts", "./**/*.tsx", "./.next/types/**/*.ts"],
+  "exclude": ["./node_modules"]
+}

package/template/with-auth/apps/server/src/lib/with-next-context.ts

@@ -0,0 +1,14 @@
+import type { NextRequest } from "next/server";
+import { auth } from "./auth";
+
+export async function createContext(req: NextRequest) {
+  const session = await auth.api.getSession({
+    headers: req.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

package/template/with-auth/apps/server/src/with-next-app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth.handler);

package/template/with-auth/apps/web-next/src/app/dashboard/page.tsx

@@ -0,0 +1,31 @@
+"use client"
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function Dashboard() {
+  const router = useRouter()
+  const { data: session, isPending } = authClient.useSession();
+
+  const privateData = useQuery(trpc.privateData.queryOptions());
+
+  useEffect(() => {
+    if (!session && !isPending) {
+      router.push("/login");
+    }
+  }, [session, isPending]);
+
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Welcome {session?.user.name}</p>
+      <p>privateData: {privateData.data?.message}</p>
+    </div>
+  );
+}

package/template/with-auth/apps/web-next/src/app/login/page.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import SignInForm from "@/components/sign-in-form";
+import SignUpForm from "@/components/sign-up-form";
+import { useState } from "react";
+
+
+export default function LoginPage() {
+  const [showSignIn, setShowSignIn] = useState(false);
+
+  return showSignIn ? (
+    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+  ) : (
+    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+  );
+}

package/template/with-auth/apps/web-next/src/components/header.tsx

@@ -0,0 +1,33 @@
+"use client"
+import Link from "next/link";
+import { ModeToggle } from "./mode-toggle";
+import UserMenu from "./user-menu";
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+    { to: "/dashboard", label: "Dashboard" },
+  ];
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => (
+            <Link
+              key={to}
+              href={to}
+            >
+              {label}
+            </Link>
+          ))}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+          <UserMenu />
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}