create-better-t-stack 0.1.0 → 1.0.1

package/template/with-auth/packages/client/src/main.tsx

@@ -0,0 +1,78 @@
+import {
+	QueryCache,
+	QueryClient,
+	QueryClientProvider,
+} from "@tanstack/react-query";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { httpBatchLink } from "@trpc/client";
+import { createTRPCQueryUtils } from "@trpc/react-query";
+import ReactDOM from "react-dom/client";
+import { toast } from "sonner";
+import Loader from "./components/loader";
+import { routeTree } from "./routeTree.gen";
+import { trpc } from "./utils/trpc";
+
+const queryClient = new QueryClient({
+	queryCache: new QueryCache({
+		onError: (error) => {
+			toast.error(error.message, {
+				action: {
+					label: "retry",
+					onClick: () => {
+						queryClient.invalidateQueries();
+					},
+				},
+			});
+		},
+	}),
+});
+
+const trpcClient = trpc.createClient({
+	links: [
+		httpBatchLink({
+			url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+			fetch(url, options) {
+				return fetch(url, {
+					...options,
+					credentials: "include",
+				});
+			},
+		}),
+	],
+});
+
+export const trpcQueryUtils = createTRPCQueryUtils({
+	queryClient,
+	client: trpcClient,
+});
+
+const router = createRouter({
+	routeTree,
+	defaultPreload: "intent",
+	context: { trpcQueryUtils },
+	defaultPendingComponent: () => <Loader />,
+	Wrap: function WrapComponent({ children }) {
+		return (
+			<trpc.Provider client={trpcClient} queryClient={queryClient}>
+				<QueryClientProvider client={queryClient}>
+					{children}
+				</QueryClientProvider>
+			</trpc.Provider>
+		);
+	},
+});
+
+// Register things for typesafety
+declare module "@tanstack/react-router" {
+	interface Register {
+		router: typeof router;
+	}
+}
+
+const rootElement = document.getElementById("app");
+if (!rootElement) throw new Error("Root element not found");
+
+if (!rootElement.innerHTML) {
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(<RouterProvider router={router} />);
+}

package/template/with-auth/packages/client/src/routes/dashboard.tsx

@@ -0,0 +1,36 @@
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect } from "react";
+
+export const Route = createFileRoute("/dashboard")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { data: session, isPending } = authClient.useSession();
+
+  const navigate = Route.useNavigate();
+
+  const privateData = trpc.privateData.useQuery();
+
+  useEffect(() => {
+    if (!session && !isPending) {
+      navigate({
+        to: "/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/packages/client/src/routes/index.tsx

@@ -0,0 +1,97 @@
+import { Button } from "@/components/ui/button";
+import { trpc } from "@/utils/trpc";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { ArrowRight } from "lucide-react";
+
+export const Route = createFileRoute("/")({
+	component: HomeComponent,
+});
+
+const TITLE_TEXT = `
+ ██████╗ ███████╗████████╗████████╗███████╗██████╗
+ ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
+ ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
+ ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
+ ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
+ ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
+
+ ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
+ ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+    ██║       ███████╗   ██║   ███████║██║     █████╔╝
+    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+ `;
+
+function HomeComponent() {
+	const healthCheck = trpc.healthCheck.useQuery();
+
+	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 className="mt-4 flex flex-col gap-4 sm:flex-row sm:items-center">
+					<Button asChild>
+						<Link to="/todos" className="flex items-center">
+							View Todo Demo
+							<ArrowRight className="ml-1 h-4 w-4" />
+						</Link>
+					</Button>
+				</div>
+			</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/with-auth/packages/client/src/routes/login.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import AuthForms from "@/components/auth-forms";
+
+export const Route = createFileRoute("/login")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <AuthForms />);
+}

package/template/with-auth/packages/server/src/index.ts

@@ -0,0 +1,46 @@
+import { serve } from "@hono/node-server";
+import { trpcServer } from "@hono/trpc-server";
+import "dotenv/config";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import { auth } from "./lib/auth";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+
+const app = new Hono();
+
+app.use(logger());
+
+app.use(
+  "/*",
+  cors({
+    origin: process.env.CORS_ORIGIN || "",
+    allowMethods: ["GET", "POST", "OPTIONS"],
+    allowHeaders: ["Content-Type", "Authorization"],
+    credentials: true,
+  }),
+);
+
+app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));
+
+app.use(
+  "/trpc/*",
+  trpcServer({
+    router: appRouter,
+    createContext: (_opts, hono) => {
+      return createContext({ hono });
+    },
+  }),
+);
+
+app.get("/", (c) => {
+  return c.text("OK");
+});
+
+serve({
+  fetch: app.fetch,
+  port: 3000,
+}, (info) => {
+  console.log(`Server is running on http://localhost:${info.port}`)
+});

package/template/with-auth/packages/server/src/lib/trpc.ts

@@ -0,0 +1,24 @@
+import { initTRPC, TRPCError } from "@trpc/server";
+import type { Context } from "./context";
+
+export const t = initTRPC.context<Context>().create();
+
+export const router = t.router;
+
+export const publicProcedure = t.procedure;
+
+export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
+  if (!ctx.session) {
+    throw new TRPCError({
+      code: "UNAUTHORIZED",
+      message: "Authentication required",
+      cause: "No session",
+    });
+  }
+  return next({
+    ctx: {
+      ...ctx,
+      session: ctx.session,
+    },
+  });
+});

package/template/with-auth/packages/server/src/routers/index.ts

@@ -0,0 +1,19 @@
+
+import { router, publicProcedure, protectedProcedure } from "../lib/trpc";
+import { todoRouter } from "./todo";
+
+
+export const appRouter = router({
+  healthCheck: publicProcedure.query(() => {
+    return "OK";
+  }),
+  privateData: protectedProcedure.query(({ ctx }) => {
+    return {
+      message: "This is private",
+      user: ctx.session.user,
+    };
+  }),
+  todo: todoRouter,
+});
+
+export type AppRouter = typeof appRouter;

package/template/with-biome/biome.json

@@ -0,0 +1,42 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": [
+			".next",
+			"dist",
+			".turbo",
+			"dev-dist",
+			".zed",
+			".vscode",
+			"routeTree.gen.ts",
+			"src-tauri"
+		]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"correctness": {
+				"useExhaustiveDependencies": "info"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}

package/template/with-drizzle-postgres/packages/server/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/db/schema",
+  out: "./src/db/migrations",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.POSTGRES_URL || "",
+  },
+});

package/template/with-drizzle-postgres/packages/server/src/db/index.ts

@@ -0,0 +1,5 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+
+const queryClient = postgres(process.env.DATABASE_URL);
+const db = drizzle({ client: queryClient });

package/template/with-drizzle-postgres/packages/server/src/db/schema/auth.ts

@@ -0,0 +1,47 @@
+import { pgTable, text, timestamp, boolean, serial } from "drizzle-orm/pg-core";
+
+export const user = pgTable("user", {
+					id: text("id").primaryKey(),
+					name: text('name').notNull(),
+ email: text('email').notNull().unique(),
+ emailVerified: boolean('email_verified').notNull(),
+ image: text('image'),
+ createdAt: timestamp('created_at').notNull(),
+ updatedAt: timestamp('updated_at').notNull()
+				});
+
+export const session = pgTable("session", {
+					id: text("id").primaryKey(),
+					expiresAt: timestamp('expires_at').notNull(),
+ token: text('token').notNull().unique(),
+ createdAt: timestamp('created_at').notNull(),
+ updatedAt: timestamp('updated_at').notNull(),
+ ipAddress: text('ip_address'),
+ userAgent: text('user_agent'),
+ userId: text('user_id').notNull().references(()=> user.id, { onDelete: 'cascade' })
+				});
+
+export const account = pgTable("account", {
+					id: text("id").primaryKey(),
+					accountId: text('account_id').notNull(),
+ providerId: text('provider_id').notNull(),
+ userId: text('user_id').notNull().references(()=> user.id, { onDelete: 'cascade' }),
+ accessToken: text('access_token'),
+ refreshToken: text('refresh_token'),
+ idToken: text('id_token'),
+ accessTokenExpiresAt: timestamp('access_token_expires_at'),
+ refreshTokenExpiresAt: timestamp('refresh_token_expires_at'),
+ scope: text('scope'),
+ password: text('password'),
+ createdAt: timestamp('created_at').notNull(),
+ updatedAt: timestamp('updated_at').notNull()
+				});
+
+export const verification = pgTable("verification", {
+					id: text("id").primaryKey(),
+					identifier: text('identifier').notNull(),
+ value: text('value').notNull(),
+ expiresAt: timestamp('expires_at').notNull(),
+ createdAt: timestamp('created_at'),
+ updatedAt: timestamp('updated_at')
+				});

package/template/with-drizzle-postgres/packages/server/src/db/schema/todo.ts

@@ -0,0 +1,7 @@
+import { pgTable, text, boolean, serial } from "drizzle-orm/pg-core";
+
+export const todo = pgTable("todo", {
+  id: serial("id").primaryKey(),
+  text: text("text").notNull(),
+  completed: boolean("completed").default(false).notNull()
+});

package/template/with-drizzle-postgres/packages/server/src/routers/todo.ts

@@ -0,0 +1,44 @@
+import { z } from "zod";
+import { router, publicProcedure } from "../lib/trpc";
+import { todo } from "../db/schema";
+import { eq } from "drizzle-orm";
+import { db } from "../db";
+
+export const todoRouter = router({
+  getAll: publicProcedure.query(async () => {
+    return await db.select().from(todo).all();
+  }),
+
+  create: publicProcedure
+    .input(z.object({ text: z.string().min(1) }))
+    .mutation(async ({ input }) => {
+      return await db
+        .insert(todo)
+        .values({
+          text: input.text,
+        })
+        .returning()
+        .get();
+    }),
+
+  toggle: publicProcedure
+    .input(z.object({ id: z.number(), completed: z.boolean() }))
+    .mutation(async ({ input }) => {
+      return await db
+        .update(todo)
+        .set({ completed: input.completed })
+        .where(eq(todo.id, input.id))
+        .returning()
+        .get();
+    }),
+
+  delete: publicProcedure
+    .input(z.object({ id: z.number() }))
+    .mutation(async ({ input }) => {
+      return await db
+        .delete(todo)
+        .where(eq(todo.id, input.id))
+        .returning()
+        .get();
+    }),
+});

package/template/with-drizzle-postgres/packages/server/src/with-auth-lib/auth.ts

@@ -0,0 +1,15 @@
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { db } from "../db";
+import * as schema from "../db/schema/auth";
+
+export const auth = betterAuth({
+  database: drizzleAdapter(db, {
+    provider: "pg",
+    schema: schema,
+  }),
+  trustedOrigins: [process.env.CORS_ORIGIN || ""],
+  emailAndPassword: {
+    enabled: true,
+  },
+});

package/template/with-drizzle-postgres/packages/server/src/with-auth-lib/context.ts

@@ -0,0 +1,18 @@
+import type { Context as HonoContext } from "hono";
+import { auth } from "./auth";
+
+export type CreateContextOptions = {
+  hono: HonoContext;
+};
+
+export async function createContext({ hono }: CreateContextOptions) {
+  const session = await auth.api.getSession({
+    headers: hono.req.raw.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

package/template/with-drizzle-postgres/packages/server/src/with-auth-lib/trpc.ts

@@ -0,0 +1,24 @@
+import { initTRPC, TRPCError } from "@trpc/server";
+import type { Context } from "./context";
+
+export const t = initTRPC.context<Context>().create();
+
+export const router = t.router;
+
+export const publicProcedure = t.procedure;
+
+export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
+  if (!ctx.session) {
+    throw new TRPCError({
+      code: "UNAUTHORIZED",
+      message: "Authentication required",
+      cause: "No session",
+    });
+  }
+  return next({
+    ctx: {
+      ...ctx,
+      session: ctx.session,
+    },
+  });
+});

package/template/with-drizzle-sqlite/packages/server/drizzle.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/db/schema",
+  out: "./src/db/migrations",
+  dialect: "turso",
+  dbCredentials: {
+    url: process.env.TURSO_CONNECTION_URL || "",
+    authToken: process.env.TURSO_AUTH_TOKEN,
+  },
+});

package/template/with-drizzle-sqlite/packages/server/src/db/index.ts

@@ -0,0 +1,9 @@
+import { drizzle } from "drizzle-orm/libsql";
+
+export const db = drizzle({
+  connection: {
+    url: process.env.TURSO_CONNECTION_URL || "",
+    authToken: process.env.TURSO_AUTH_TOKEN,
+  },
+  // logger: true,
+});

package/template/with-drizzle-sqlite/packages/server/src/db/schema/auth.ts

@@ -0,0 +1,61 @@
+import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
+
+export const todo = sqliteTable("todo", {
+  id: integer("id").primaryKey({ autoIncrement: true }),
+  text: text("text").notNull(),
+  completed: integer("completed", { mode: "boolean" }).default(false).notNull()
+});
+
+export const user = sqliteTable("user", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email").notNull().unique(),
+  emailVerified: integer("email_verified", { mode: "boolean" }).notNull(),
+  image: text("image"),
+  createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
+});
+
+export const session = sqliteTable("session", {
+  id: text("id").primaryKey(),
+  expiresAt: integer("expires_at", { mode: "timestamp" }).notNull(),
+  token: text("token").notNull().unique(),
+  createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
+  ipAddress: text("ip_address"),
+  userAgent: text("user_agent"),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id),
+});
+
+export const account = sqliteTable("account", {
+  id: text("id").primaryKey(),
+  accountId: text("account_id").notNull(),
+  providerId: text("provider_id").notNull(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id),
+  accessToken: text("access_token"),
+  refreshToken: text("refresh_token"),
+  idToken: text("id_token"),
+  accessTokenExpiresAt: integer("access_token_expires_at", {
+    mode: "timestamp",
+  }),
+  refreshTokenExpiresAt: integer("refresh_token_expires_at", {
+    mode: "timestamp",
+  }),
+  scope: text("scope"),
+  password: text("password"),
+  createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
+});
+
+export const verification = sqliteTable("verification", {
+  id: text("id").primaryKey(),
+  identifier: text("identifier").notNull(),
+  value: text("value").notNull(),
+  expiresAt: integer("expires_at", { mode: "timestamp" }).notNull(),
+  createdAt: integer("created_at", { mode: "timestamp" }),
+  updatedAt: integer("updated_at", { mode: "timestamp" }),
+});

package/template/with-drizzle-sqlite/packages/server/src/db/schema/todo.ts

@@ -0,0 +1,7 @@
+import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
+
+export const todo = sqliteTable("todo", {
+  id: integer("id").primaryKey({ autoIncrement: true }),
+  text: text("text").notNull(),
+  completed: integer("completed", { mode: "boolean" }).default(false).notNull()
+});

package/template/with-drizzle-sqlite/packages/server/src/with-auth-lib/auth.ts

@@ -0,0 +1,15 @@
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { db } from "../db";
+import * as schema from "../db/schema/auth";
+
+export const auth = betterAuth({
+  database: drizzleAdapter(db, {
+    provider: "sqlite",
+    schema: schema,
+  }),
+  trustedOrigins: [process.env.CORS_ORIGIN || ""],
+  emailAndPassword: {
+    enabled: true,
+  },
+});

package/template/with-drizzle-sqlite/packages/server/src/with-auth-lib/context.ts

@@ -0,0 +1,18 @@
+import type { Context as HonoContext } from "hono";
+import { auth } from "./auth";
+
+export type CreateContextOptions = {
+  hono: HonoContext;
+};
+
+export async function createContext({ hono }: CreateContextOptions) {
+  const session = await auth.api.getSession({
+    headers: hono.req.raw.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;