better-ts-stack 0.1.0

package/templates/backend/express/.prettierignore

@@ -0,0 +1,52 @@
+# Dependencies
+node_modules
+**/node_modules
+
+# Build outputs
+.next
+out
+dist
+build
+**/dist
+**/.next
+**/out
+**/build
+
+# Generated files
+*.min.js
+*.min.css
+coverage
+.nyc_output
+
+# Lock files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+bun.lock
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Templates (do not format generated/scaffold content)
+templates
+**/templates/**
+*.hbs

package/templates/backend/express/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  "importOrder": ["^react", "^next", "<THIRD_PARTY_MODULES>", "^@repo/(.*)$", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderCaseInsensitive": true
+}

package/templates/backend/express/config.json

@@ -0,0 +1,42 @@
+{
+  "id": "express",
+  "name": "Express Base",
+  "description": "Base Express server with TypeScript, middleware, and best practices",
+  "type": "base",
+  "scripts": {
+    "dev": "{{#if (eq packageManager 'bun')}}bun --watch src/index.ts{{else}}tsx watch src/index.ts{{/if}}",
+    "build": "tsc",
+    "start": "{{runner}} dist/index.js",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "type:check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "dotenv": "^16.3.1",
+    "cors": "^2.8.5",
+    "helmet": "^7.1.0",
+    "morgan": "^1.10.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/morgan": "^1.9.9",
+    "@types/node": "^20.10.6",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.54.0"
+  },
+  "envVars": {
+    "NODE_ENV": "development",
+    "PORT": "3000"
+  },
+  "templateFiles": ["src/index.ts"]
+}

package/templates/backend/express/eslint.config.mjs

@@ -0,0 +1,31 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default tseslint.config(
+  {
+    ignores: ['dist', 'node_modules', 'templates/**/*', 'bin/**/*'],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+    rules: {
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': ['error'],
+      '@typescript-eslint/no-floating-promises': 'error',
+      'no-console': 'off',
+    },
+  }
+);

package/templates/backend/express/gitignore

@@ -0,0 +1,39 @@
+# Dependencies
+node_modules/
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Build output
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+coverage/
+.nyc_output/
+
+# Misc
+*.tsbuildinfo

package/templates/backend/express/src/index.ts

@@ -0,0 +1,46 @@
+import express, { Express, Request, Response } from 'express';
+import cors from 'cors';
+import helmet from 'helmet';
+import morgan from 'morgan';
+import dotenv from 'dotenv';
+import healthRouter from './routes/health';
+{{#if useAuth}}
+import authRouter from './routes/auth';
+{{/if}}
+
+dotenv.config();
+
+const app: Express = express();
+const port = process.env.PORT || 3000;
+
+// Middleware
+app.use(helmet());
+app.use(cors());
+app.use(morgan('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Routes
+app.use('/health', healthRouter);
+{{#if useAuth}}
+app.use('/auth', authRouter);
+{{/if}}
+
+// 404 handler
+app.use((_req: Request, res: Response) => {
+  res.status(404).json({ error: 'Not Found' });
+});
+
+// Error handler
+app.use((err: Error, _req: Request, res: Response) => {
+  console.error(err.stack);
+  res.status(500).json({ error: 'Internal Server Error' });
+});
+
+app.listen(port, () => {
+  console.log(`Server is running on http://localhost:${port} 
+    Health: http://localhost:${port}/health
+    `);
+});
+
+export default app;

package/templates/backend/express/src/routes/health.ts

@@ -0,0 +1,12 @@
+import { Router, Request, Response } from 'express';
+
+const router = Router();
+
+router.get('/', (_req: Request, res: Response) => {
+  res.status(200).json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+  });
+});
+
+export default router;

package/templates/backend/express/tsconfig.eslint.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "rootDir": "."
+  },
+  "include": ["src/**/*", "eslint.config.mjs", "prisma.config.ts"]
+}

package/templates/backend/express/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/frontend/nextjs/app/globals.css

@@ -0,0 +1,99 @@
+@import "tailwindcss";
+
+:root {
+  --background: oklch(0.98 0.004 255);
+  --foreground: oklch(0.2 0.03 255);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.03 255);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2 0.03 255);
+  --primary: oklch(0.27 0.04 260);
+  --primary-foreground: oklch(0.99 0.004 255);
+  --secondary: oklch(0.94 0.008 255);
+  --secondary-foreground: oklch(0.3 0.03 255);
+  --muted: oklch(0.95 0.006 255);
+  --muted-foreground: oklch(0.48 0.02 255);
+  --accent: oklch(0.93 0.02 233);
+  --accent-foreground: oklch(0.27 0.04 260);
+  --destructive: oklch(0.63 0.24 25);
+  --destructive-foreground: oklch(0.99 0.004 255);
+  --border: oklch(0.89 0.01 255);
+  --input: oklch(0.89 0.01 255);
+  --ring: oklch(0.64 0.13 240);
+  --radius: 1rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-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-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 0.25rem);
+  --radius-md: calc(var(--radius) - 0.125rem);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 0.25rem);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: oklch(0.16 0.02 255);
+    --foreground: oklch(0.95 0.005 255);
+    --card: oklch(0.2 0.02 255);
+    --card-foreground: oklch(0.95 0.005 255);
+    --popover: oklch(0.2 0.02 255);
+    --popover-foreground: oklch(0.95 0.005 255);
+    --primary: oklch(0.93 0.01 255);
+    --primary-foreground: oklch(0.22 0.03 255);
+    --secondary: oklch(0.24 0.02 255);
+    --secondary-foreground: oklch(0.95 0.005 255);
+    --muted: oklch(0.24 0.02 255);
+    --muted-foreground: oklch(0.72 0.015 255);
+    --accent: oklch(0.28 0.03 238);
+    --accent-foreground: oklch(0.95 0.005 255);
+    --destructive: oklch(0.68 0.2 22);
+    --destructive-foreground: oklch(0.98 0.004 255);
+    --border: oklch(0.28 0.02 255);
+    --input: oklch(0.28 0.02 255);
+    --ring: oklch(0.71 0.11 240);
+  }
+}
+
+* {
+  border-color: var(--border);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), sans-serif;
+}
+
+a {
+  text-underline-offset: 0.2rem;
+}
+
+::selection {
+  background: color-mix(in oklab, var(--accent) 65%, white);
+  color: var(--foreground);
+}

package/templates/frontend/nextjs/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "better-ts-stack starter",
+  description: "Generated with better-ts-stack",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} bg-background text-foreground antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/frontend/nextjs/app/page.tsx.hbs

@@ -0,0 +1,98 @@
+import Link from "next/link";
+
+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";
+
+const featureList = [
+  "Next.js 16 App Router",
+  "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}}
+];
+
+export default function Home() {
+  return (
+    <main className="relative min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.14),_transparent_30%),linear-gradient(180deg,_#fcfcfd_0%,_#f8fafc_45%,_#eef2ff_100%)] text-slate-950">
+      <div className="absolute inset-x-0 top-0 h-72 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.18),_transparent_55%)]" />
+      <div className="relative 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-sky-200 bg-white/80 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-sky-700 shadow-sm backdrop-blur">
+              Created with better-ts-stack
+            </span>
+            <div className="space-y-4">
+              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl">
+                Ship your stack faster with a polished TypeScript foundation.
+              </h1>
+              <p className="max-w-2xl text-base leading-7 text-slate-600 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
+                href="/sign-up"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Create an account
+                <ArrowRight className="size-4" />
+              </Link>
+              <Link
+                href="/sign-in"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Login
+              </Link>
+              {{else}}
+              <Link
+                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" />
+              </Link>
+              <Link
+                href="https://nextjs.org/docs"
+                target="_blank"
+                rel="noreferrer"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Next.js guide
+              </Link>
+              {{/if}}
+            </div>
+          </div>
+
+          <Card className="border-white/70 bg-white/80 shadow-xl shadow-slate-200/70 backdrop-blur">
+            <CardHeader>
+              <CardTitle>Included in this starter</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="space-y-3 text-sm text-slate-600">
+                {featureList.map((feature) => (
+                  <li key={feature} className="flex items-center gap-3">
+                    <span className="size-2 rounded-full bg-sky-500" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="rounded-2xl border border-slate-200 bg-slate-950 px-4 py-3 text-sm text-slate-100">
+                Start editing <code className="font-mono">app/page.tsx</code> and
+                shape the project around your product instead of setup chores.
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
+}

package/templates/frontend/nextjs/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-950 text-white shadow-sm hover:bg-slate-800",
+        outline:
+          "border border-slate-200 bg-white text-slate-900 hover:bg-slate-100",
+        ghost: "text-slate-700 hover:bg-slate-100 hover:text-slate-950",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-6 text-sm",
+        icon: "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+function Button({
+  className,
+  variant,
+  size,
+  type = "button",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/templates/frontend/nextjs/components/ui/card.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-3xl border border-slate-200/80 bg-white text-slate-950 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />;
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-slate-600", className)} {...props} />;
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />;
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center p-6 pt-0", className)} {...props} />;
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/templates/frontend/nextjs/components/ui/field.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function FieldGroup({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("space-y-5", className)} {...props} />;
+}
+
+type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
+  "data-invalid"?: boolean;
+};
+
+function Field({
+  className,
+  "data-invalid": dataInvalid,
+  ...props
+}: FieldProps) {
+  return (
+    <div
+      data-invalid={dataInvalid}
+      className={cn("space-y-2", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn("text-sm font-medium text-slate-900", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-slate-500", className)} {...props} />;
+}
+
+type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  errors?: Array<{ message?: string } | undefined>;
+};
+
+function FieldError({ className, errors, ...props }: FieldErrorProps) {
+  const message = errors?.find((error) => error?.message)?.message;
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <p className={cn("text-sm font-medium text-rose-600", className)} {...props}>
+      {message}
+    </p>
+  );
+}
+
+export { Field, FieldDescription, FieldError, FieldGroup, FieldLabel };