better-ts-stack 0.1.1 → 1.1.0

package/templates/frontend/tanstack/src/routes/__root.tsx

@@ -0,0 +1,70 @@
+/// <reference types="vite/client" />
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRouteWithContext,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import type { QueryClient } from "@tanstack/react-query";
+import * as React from "react";
+
+import appCss from "~/styles/app.css?url";
+
+export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+    ],
+    links: [
+      {
+        rel: "icon",
+        type: "image/svg+xml",
+        href: "/favicon.svg",
+      },
+    ],
+  }),
+  component: RootComponent,
+  notFoundComponent: () => <NotFound />,
+})
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+        <link rel="stylesheet" href={appCss} />
+      </head>
+      <body>
+        {children}
+        <TanStackRouterDevtools />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+function NotFound() {
+  return (
+    <div className="flex min-h-[50vh] items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold">404</h1>
+        <p className="mt-2 text-muted-foreground">Page not found</p>
+      </div>
+    </div>
+  )
+}

package/templates/frontend/tanstack/src/routes/index.tsx.hbs

@@ -0,0 +1,102 @@
+import { createFileRoute{{#if useAuth}}, Link{{/if}} } from "@tanstack/react-router";
+import { ArrowRight } from "lucide-react";
+
+import { buttonVariants } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { cn } from "~/lib/utils";
+
+export const Route = createFileRoute("/")({
+  component: Home,
+});
+
+const featureList = [
+  "TanStack Start SSR",
+  "TanStack Router and Query",
+  "React 19 and TypeScript",
+  "Tailwind CSS v4",
+  {{#if useAuth}}"Better Auth-ready session flow",{{/if}}
+  {{#if (eq database "prisma")}}"Prisma database tooling",{{/if}}
+  {{#if (eq database "drizzle")}}"Drizzle database tooling",{{/if}}
+];
+
+function Home() {
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-16 sm:px-10 lg:px-12">
+        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
+          <div className="space-y-6">
+            <span className="inline-flex w-fit items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground shadow-sm">
+              Created with better-ts-stack
+            </span>
+            <div className="space-y-4">
+              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight sm:text-5xl">
+                Ship your stack faster with a polished TypeScript foundation.
+              </h1>
+              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
+                Your project already includes the core app shell, database wiring,
+                and a shadcn-compatible UI foundation so you can keep building
+                instead of setting up boilerplate.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3 sm:flex-row">
+              {{#if useAuth}}
+              <Link
+                to="/sign-up"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Create an account
+                <ArrowRight className="size-4" />
+              </Link>
+              <Link
+                to="/sign-in"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Login
+              </Link>
+              {{else}}
+              <a
+                href="https://github.com/Abdullah-dev0/better-ts-stack"
+                target="_blank"
+                rel="noreferrer"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Explore the docs
+                <ArrowRight className="size-4" />
+              </a>
+              <a
+                href="https://tanstack.com/start/latest"
+                target="_blank"
+                rel="noreferrer"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                TanStack guide
+              </a>
+              {{/if}}
+            </div>
+          </div>
+
+          <Card className="border-border bg-card shadow-sm">
+            <CardHeader>
+              <CardTitle>Included in this starter</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="space-y-3 text-sm text-muted-foreground">
+                {featureList.map((feature) => (
+                  <li key={feature} className="flex items-center gap-3">
+                    <span className="size-2 rounded-full bg-primary" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+                Start editing{" "}
+                <code className="font-mono">src/routes/index.tsx</code> and
+                shape the project around your product instead of setup chores.
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
+}

package/templates/frontend/tanstack/src/styles/app.css

@@ -0,0 +1,85 @@
+@import "tailwindcss" source("../");
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+:root {
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer base {
+  html {
+    color-scheme: light dark;
+  }
+
+  * {
+    @apply border-gray-200 dark:border-gray-800;
+  }
+
+  html,
+  body {
+    @apply bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200;
+  }
+}

package/templates/frontend/tanstack/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}

package/templates/frontend/tanstack/vite.config.ts

@@ -0,0 +1,14 @@
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import tailwindcss from "@tailwindcss/vite";
+import viteReact from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    tsconfigPaths: true,
+  },
+  plugins: [tanstackStart({ srcDirectory: "src" }), tailwindcss(), viteReact()],
+});

package/templates/modules/auth/express/config.json

@@ -1 +1,26 @@
-{"id":"auth","name":"JWT Auth","description":"JWT authentication with bcrypt password hashing","type":"feature","dependencies":{"bcrypt":"^5.1.1","jsonwebtoken":"^9.0.2"},"devDependencies":{"@types/bcrypt":"^5.0.0","@types/jsonwebtoken":"^9.0.5"},"scripts":{},"envVars":{"JWT_SECRET":"please-change-me","JWT_EXPIRES_IN":"1h"},"templateFiles":["src/lib/jwt.ts.hbs","src/middleware/requireAuth.ts.hbs","src/services/userStore.ts.hbs","src/routes/auth.ts.hbs","src/controllers/authController.ts.hbs"]}
+{
+  "id": "auth",
+  "name": "JWT Auth",
+  "description": "JWT authentication with bcrypt password hashing",
+  "type": "feature",
+  "dependencies": {
+    "bcrypt": "^6.0.0",
+    "jsonwebtoken": "^9.0.3"
+  },
+  "devDependencies": {
+    "@types/bcrypt": "^6.0.0",
+    "@types/jsonwebtoken": "^9.0.10"
+  },
+  "scripts": {},
+  "envVars": {
+    "JWT_SECRET": "please-change-me",
+    "JWT_EXPIRES_IN": "1h"
+  },
+  "templateFiles": [
+    "src/lib/jwt.ts.hbs",
+    "src/middleware/requireAuth.ts.hbs",
+    "src/services/userStore.ts.hbs",
+    "src/routes/auth.ts.hbs",
+    "src/controllers/authController.ts.hbs"
+  ]
+}

package/templates/modules/auth/express/src/routes/auth.ts.hbs

@@ -2,7 +2,7 @@ import { Request, Response, NextFunction, Router } from 'express';
 import { login, me, register } from '../controllers/authController';
 import { requireAuth } from '../middleware/requireAuth';
 
-const router = Router();
+const router: Router = Router();
 
 function asyncHandler(
   fn: (req: Request, res: Response, next: NextFunction) => Promise<void>

package/templates/modules/auth/express/src/services/userStore.ts.hbs

@@ -1,107 +1,95 @@
-{{#if (eq database 'none')}}
-import crypto from 'crypto';
-{{/if}}
-{{#if (eq database 'prisma')}}
-import type { User } from '../../app/generated/prisma';
-import { prisma } from '../lib/prisma';
-{{/if}}
-{{#if (eq database 'mongoose')}}
-import UserModel from '../models/User';
-{{/if}}
-
-export interface AuthUser {
-  id: string;
-  email: string;
-  name?: string | null;
-  password: string;
-}
-
-export interface CreateUserInput {
-  email: string;
-  name?: string | null;
-  password: string;
-}
-
-{{#if (eq database 'none')}}
-const users: AuthUser[] = [];
-{{/if}}
-
-export async function findUserByEmail(email: string): Promise<AuthUser | null> {
-  {{#if (eq database 'prisma')}}
-  const user: User | null = await prisma.user.findUnique({ where: { email } });
-  if (!user) return null;
-  return {
-    id: user.id,
-    email: user.email,
-    name: user.name,
-    password: user.password,
-  };
-  {{/if}}
-
-  {{#if (eq database 'mongoose')}}
-  const user = await UserModel.findOne({ email }).exec();
-  if (!user) return null;
-  return {
-    id: user.id,
-    email: user.email,
-    name: user.name,
-    password: user.password,
-  };
-  {{/if}}
-
-  {{#if (eq database 'none')}}
-  const user = users.find((candidate) => candidate.email === email);
-  return user ?? null;
-  {{/if}}
-}
-
-export async function createUser(data: CreateUserInput): Promise<AuthUser> {
-  {{#if (eq database 'prisma')}}
-  const user: User = await prisma.user.create({
-    data: {
-      email: data.email,
-      name: data.name,
-      password: data.password,
-    },
-  });
-
-  return {
-    id: user.id,
-    email: user.email,
-    name: user.name,
-    password: user.password,
-  };
-  {{/if}}
-
-  {{#if (eq database 'mongoose')}}
-  const user = await UserModel.create({
-    email: data.email,
-    name: data.name,
-    password: data.password,
-  });
-
-  return {
-    id: user.id,
-    email: user.email,
-    name: user.name,
-    password: user.password,
-  };
-  {{/if}}
-
-  {{#if (eq database 'none')}}
-  const newUser: AuthUser = {
-    id: crypto.randomUUID(),
-    email: data.email,
-    name: data.name,
-    password: data.password,
-  };
-
-  users.push(newUser);
-  return newUser;
-  {{/if}}
-}
-
-export function toPublicUser(user: AuthUser): Omit<AuthUser, 'password'> {
-  const { id, email, name } = user;
-  return { id, email, name };
-}
+{{#if (eq database 'drizzle')}}
+import { eq } from "drizzle-orm";
+import { db } from "../lib/db";
+import { users } from "../lib/schema";
+{{/if}}
+{{#if (eq database 'none')}}
+import crypto from 'crypto';
+{{/if}}
+{{#if (eq database 'prisma')}}
+import { prisma } from '../lib/prisma';
+{{/if}}
+{{#if (eq database 'mongoose')}}
+import UserModel from '../models/User';
+{{/if}}
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  name?: string | null;
+  password: string;
+}
+
+export interface CreateUserInput {
+  email: string;
+  name?: string | null;
+  password: string;
+}
+
+{{#if (eq database 'none')}}
+const users: AuthUser[] = [];
+{{/if}}
+
+export {{#unless (eq database 'none')}}async {{/unless}}function findUserByEmail(email: string): Promise<AuthUser | null> {
+  {{#if (eq database 'drizzle')}}
+  const [user] = await db.select().from(users).where(eq(users.email, email)).limit(1);
+  return user ?? null;
+  {{/if}}
+  {{#if (eq database 'prisma')}}
+  return await prisma.user.findUnique({ where: { email } });
+  {{/if}}
+
+  {{#if (eq database 'mongoose')}}
+  const user = await UserModel.findOne({ email }).exec();
+  if (!user) return null;
+  return {
+    id: String(user._id),
+    email: user.email,
+    name: user.name,
+    password: user.password,
+  };
+  {{/if}}
+
+  {{#if (eq database 'none')}}
+  const user = users.find((candidate) => candidate.email === email);
+  return Promise.resolve(user ?? null);
+  {{/if}}
+}
+
+export {{#unless (eq database 'none')}}async {{/unless}}function createUser(data: CreateUserInput): Promise<AuthUser> {
+  {{#if (eq database 'drizzle')}}
+  const [user] = await db.insert(users).values(data).returning();
+  return user;
+  {{/if}}
+  {{#if (eq database 'prisma')}}
+  return await prisma.user.create({ data });
+  {{/if}}
+
+  {{#if (eq database 'mongoose')}}
+  const user = await UserModel.create(data);
+
+  return {
+    id: String(user._id),
+    email: user.email,
+    name: user.name,
+    password: user.password,
+  };
+  {{/if}}
+
+  {{#if (eq database 'none')}}
+  const newUser: AuthUser = {
+    id: crypto.randomUUID(),
+    email: data.email,
+    name: data.name,
+    password: data.password,
+  };
+
+  users.push(newUser);
+  return Promise.resolve(newUser);
+  {{/if}}
+}
+
+export function toPublicUser(user: AuthUser): Omit<AuthUser, 'password'> {
+  const { id, email, name } = user;
+  return { id, email, name };
+}

package/templates/modules/auth/nextjs/config.json

@@ -1,14 +1,14 @@
-{
+{
   "id": "auth",
   "name": "Better Auth",
   "description": "Better Auth for Next.js with optional Prisma or Drizzle adapter",
   "type": "feature",
   "dependencies": {
-    "@hookform/resolvers": "^5.2.1",
-    "better-auth": "^1.4.19",
-    "mongodb": "^6.0.0",
-    "react-hook-form": "^7.62.0",
-    "zod": "^4.1.5"
+    "@hookform/resolvers": "^5.9.1",
+    "better-auth": "^1.7.3",
+    "mongodb": "^7.6.0",
+    "react-hook-form": "^7.87.0",
+    "zod": "^4.5.4"
   },
   "devDependencies": {},
   "scripts": {},

package/templates/modules/auth/nextjs/lib/auth.ts.hbs

@@ -1,35 +1,37 @@
-import { betterAuth } from "better-auth";
-import { nextCookies } from "better-auth/next-js";
-{{#if (eq database 'prisma')}}
-import { prismaAdapter } from "better-auth/adapters/prisma";
-import client from "./prisma";
-{{/if}}
-{{#if (eq database 'drizzle')}}
-import { drizzleAdapter } from "better-auth/adapters/drizzle";
-import { db } from "./db";
-{{/if}}
-{{#if (eq database 'mongoose')}}
-import { mongodbAdapter } from "better-auth/adapters/mongodb";
-import { MongoClient } from "mongodb";
-
-const client = new MongoClient(process.env.MONGODB_URI!);
-const db = client.db();
-{{/if}}
-
-export const auth = betterAuth({
-  {{#if (eq database 'prisma')}}
-  database: prismaAdapter(client, { provider: "postgresql" }),
-  {{/if}}
+import { betterAuth } from "better-auth";
+import { nextCookies } from "better-auth/next-js";
+{{#if (eq database 'prisma')}}
+import { prismaAdapter } from "better-auth/adapters/prisma";
+import client from "./prisma";
+{{/if}}
+{{#if (eq database 'drizzle')}}
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { db } from "./db";
+{{/if}}
+{{#if (eq database 'mongoose')}}
+import { mongodbAdapter } from "better-auth/adapters/mongodb";
+import { MongoClient } from "mongodb";
+
+const client = new MongoClient(process.env.MONGODB_URI!);
+const db = client.db();
+{{/if}}
+
+export const auth = betterAuth({
+  {{#if (eq database 'prisma')}}
+  database: prismaAdapter(client, { provider: "postgresql" }),
+  {{/if}}
   {{#if (eq database 'drizzle')}}
   database: drizzleAdapter(db, { provider: "pg" }),
   {{/if}}
-  {{#if (eq database 'mongoose')}}
-  database: mongodbAdapter(db, { client }),
-  {{/if}}
-  emailAndPassword: {
-    enabled: true,
-  },
-  plugins: [nextCookies()],
-  secret: process.env.BETTER_AUTH_SECRET,
-  baseURL: process.env.BETTER_AUTH_URL,
-});
+  {{#if (eq database 'mongoose')}}
+  // Transactions require a replica set. Create user/session/account/verification
+  // collections before the first sign-up; see the database setup documentation.
+  database: mongodbAdapter(db, { client }),
+  {{/if}}
+  emailAndPassword: {
+    enabled: true,
+  },
+  plugins: [nextCookies()],
+  secret: process.env.BETTER_AUTH_SECRET,
+  baseURL: process.env.BETTER_AUTH_URL,
+});

package/templates/modules/auth/tanstack/config.json

@@ -0,0 +1,33 @@
+{
+  "id": "auth",
+  "name": "Better Auth",
+  "description": "Better Auth for TanStack Start with optional Prisma, Drizzle, or MongoDB adapter",
+  "type": "feature",
+  "dependencies": {
+    "@hookform/resolvers": "^5.9.1",
+    "better-auth": "^1.7.3",
+    "dotenv": "^17.4.2",
+    "mongodb": "^7.6.0",
+    "react-hook-form": "^7.87.0",
+    "zod": "^4.5.4"
+  },
+  "devDependencies": {},
+  "scripts": {},
+  "envVars": {
+    "BETTER_AUTH_SECRET": "please-change-me-to-a-random-string",
+    "BETTER_AUTH_URL": "http://localhost:3000"
+  },
+  "templateFiles": [
+    "src/lib/auth.ts.hbs",
+    "src/lib/auth-client.ts",
+    "src/lib/auth-functions.ts",
+    "src/routes/api/auth/$.ts",
+    "src/routes/dashboard.tsx",
+    "src/routes/sign-in.tsx",
+    "src/routes/sign-up.tsx",
+    "src/components/auth/sign-in-form.tsx",
+    "src/components/auth/sign-up-form.tsx",
+    "src/components/auth/sign-out-button.tsx",
+    "src/lib/auth-schema.ts"
+  ]
+}