create-skit 0.1.0

package/templates/blank/vitest.config.ts

@@ -0,0 +1,19 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { defineConfig } from "vitest/config";
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(dirname, "./src")
+    }
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    include: ["src/**/*.test.{ts,tsx}"]
+  }
+});

package/templates/dashboard/.env.example

@@ -0,0 +1,16 @@
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+BETTER_AUTH_URL=http://localhost:3000
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/__PROJECT_NAME__
+BETTER_AUTH_SECRET=replace-me
+RESEND_API_KEY=re_xxx
+EMAIL_FROM=Panda Starter <onboarding@example.com>
+STRIPE_SECRET_KEY=sk_test_xxx
+STRIPE_PRICE_ID=price_xxx
+STRIPE_WEBHOOK_SECRET=whsec_xxx
+POLAR_ACCESS_TOKEN=polar_pat_xxx
+POLAR_ORGANIZATION_ID=org_xxx
+POLAR_PRODUCT_ID=prod_xxx
+POLAR_SERVER=sandbox
+POLAR_WEBHOOK_SECRET=polar_whsec_xxx
+BILLING_PROVIDER=__BILLING_PROVIDER__
+EMAIL_PROVIDER=__EMAIL_PROVIDER__

package/templates/dashboard/.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: __CI_CACHE__
+
+      - name: Install
+        run: __CI_INSTALL_COMMAND__
+
+      - name: Lint
+        run: __CI_RUN_LINT__
+
+      - name: Typecheck
+        run: __CI_RUN_TYPECHECK__
+
+      - name: Unit tests
+        run: __CI_RUN_TEST__
+
+      - name: Build
+        run: __CI_RUN_BUILD__

package/templates/dashboard/.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+npm run lint-staged && npm run typecheck

package/templates/dashboard/.husky/pre-push

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+npm run test

package/templates/dashboard/.prettierignore

@@ -0,0 +1,3 @@
+.next
+coverage
+node_modules

package/templates/dashboard/drizzle.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "drizzle-kit";
+
+if (!process.env.DATABASE_URL) {
+  throw new Error("DATABASE_URL is required to use Drizzle.");
+}
+
+export default defineConfig({
+  schema: "./src/db/schema/index.ts",
+  out: "./src/db/migrations",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL
+  },
+  verbose: true,
+  strict: true
+});

package/templates/dashboard/eslint.config.mjs

@@ -0,0 +1,127 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { defineConfig, globalIgnores } from "eslint/config";
+import prettier from "eslint-config-prettier/flat";
+import nextTs from "eslint-config-next/typescript";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import importPlugin from "eslint-plugin-import";
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+
+const SOURCE_FILES = ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"];
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  {
+    files: SOURCE_FILES,
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: dirname
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.nodeBuiltin
+      }
+    },
+    plugins: {
+      import: importPlugin,
+      "unused-imports": unusedImports
+    },
+    settings: {
+      "import/resolver": {
+        typescript: true
+      }
+    },
+    rules: {
+      "@typescript-eslint/consistent-type-imports": [
+        "error",
+        {
+          prefer: "type-imports",
+          fixStyle: "inline-type-imports"
+        }
+      ],
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        {
+          checksVoidReturn: {
+            attributes: false
+          }
+        }
+      ],
+      "@typescript-eslint/no-unused-vars": "off",
+      "import/first": "error",
+      "import/newline-after-import": "error",
+      "import/no-duplicates": "error",
+      "import/order": [
+        "error",
+        {
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            ["parent", "sibling", "index"],
+            "object",
+            "type"
+          ],
+          alphabetize: {
+            order: "asc",
+            caseInsensitive: true
+          },
+          "newlines-between": "always",
+          pathGroups: [
+            {
+              pattern: "@/**",
+              group: "internal",
+              position: "before"
+            }
+          ],
+          pathGroupsExcludedImportTypes: ["builtin"]
+        }
+      ],
+      "unused-imports/no-unused-imports": "error",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        {
+          vars: "all",
+          varsIgnorePattern: "^_",
+          args: "after-used",
+          argsIgnorePattern: "^_"
+        }
+      ]
+    }
+  },
+  {
+    files: SOURCE_FILES,
+    ignores: ["drizzle.config.ts", "src/lib/env.ts"],
+    rules: {
+      "no-restricted-properties": [
+        "error",
+        {
+          object: "process",
+          property: "env",
+          message: "Use the validated env object from src/lib/env.ts."
+        }
+      ]
+    }
+  },
+  prettier,
+  globalIgnores([
+    ".next/**",
+    "out/**",
+    "build/**",
+    "coverage/**",
+    "drizzle.config.ts",
+    "eslint.config.mjs",
+    "next.config.ts",
+    "playwright.config.ts",
+    "prettier.config.mjs",
+    "proxy.ts",
+    "next-env.d.ts",
+    "vitest.config.ts"
+  ])
+]);

package/templates/dashboard/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// This file is managed by Next.js.

package/templates/dashboard/next.config.ts

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

package/templates/dashboard/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "packageManager": "__PACKAGE_MANAGER__",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint . --max-warnings=0",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
+    "check": "__CHECK_COMMAND__",
+    "prepare": "husky",
+    "lint-staged": "lint-staged",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    "db:seed": "tsx src/db/seeds/index.ts",
+    "auth:generate": "npx @better-auth/cli@latest generate --config src/lib/auth.ts --output src/db/schema/auth.ts",
+    "auth:secret": "npx @better-auth/cli@latest secret"
+  },
+  "dependencies": {
+    "better-auth": "1.3.8",
+    "drizzle-orm": "0.44.x",
+    "next": "16.2.x",
+__DATABASE_DEPENDENCIES__
+    "react": "19.2.x",
+    "react-dom": "19.2.x",
+__PROVIDER_PACKAGE_DEPENDENCIES__
+    "server-only": "^0.0.1",
+    "zod": "4.1.5"
+  },
+  "devDependencies": {
+    "@better-auth/cli": "1.3.8",
+    "@playwright/test": "1.55.0",
+    "@testing-library/react": "16.3.0",
+    "@types/node": "^24.0.0",
+__DATABASE_DEV_DEPENDENCIES__
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "drizzle-kit": "0.31.x",
+    "eslint": "9.35.0",
+    "eslint-config-next": "16.2.x",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-typescript": "^3.10.1",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-unused-imports": "4.2.0",
+    "globals": "16.3.0",
+    "husky": "^9.1.7",
+    "jsdom": "26.1.0",
+    "lint-staged": "^16.1.6",
+    "playwright": "1.55.0",
+    "prettier": "3.6.2",
+    "tsx": "4.20.x",
+    "typescript": "5.9.x",
+    "vitest": "3.2.4"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "eslint --fix"
+    ],
+    "*.{json,md,css,yml,yaml,html}": [
+      "prettier --write"
+    ]
+  }
+}

package/templates/dashboard/playwright.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: true,
+  use: {
+    baseURL: "http://127.0.0.1:3000",
+    trace: "on-first-retry"
+  },
+  webServer: {
+    command: "npm run dev",
+    url: "http://127.0.0.1:3000",
+    reuseExistingServer: !process.env.CI
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] }
+    }
+  ]
+});

package/templates/dashboard/prettier.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+  semi: true,
+  singleQuote: false,
+  trailingComma: "none",
+  printWidth: 88
+};
+
+export default config;

package/templates/dashboard/proxy.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+import { getSessionCookie } from "better-auth/cookies";
+
+export function proxy(request: NextRequest) {
+  const sessionCookie = getSessionCookie(request);
+  const { pathname } = request.nextUrl;
+
+  if (
+    !sessionCookie &&
+    (pathname.startsWith("/dashboard") ||
+      pathname.startsWith("/settings") ||
+      pathname.startsWith("/billing") ||
+      pathname.startsWith("/email"))
+  ) {
+    return NextResponse.redirect(new URL("/sign-in", request.url));
+  }
+
+  if (sessionCookie && (pathname === "/sign-in" || pathname === "/sign-up")) {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    "/dashboard/:path*",
+    "/settings/:path*",
+    "/billing/:path*",
+    "/email/:path*",
+    "/sign-in",
+    "/sign-up"
+  ]
+};

package/templates/dashboard/src/app/api/auth/[...all]/route.ts

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

package/templates/dashboard/src/app/api/billing/checkout/route.ts

@@ -0,0 +1,26 @@
+import { redirect } from "next/navigation";
+
+import { getSession } from "@/lib/auth-session";
+import { getBillingProvider, getBillingProviderName } from "@/lib/billing";
+import { env } from "@/lib/env";
+
+export async function POST(request: Request) {
+  const session = await getSession();
+
+  if (!session) {
+    redirect("/sign-in");
+  }
+
+  const formData = await request.formData();
+  const selected = String(formData.get("provider") ?? "");
+  const providerName = getBillingProviderName(selected);
+  const provider = getBillingProvider(providerName);
+  const checkout = await provider.createCheckoutSession({
+    userId: session.user.id,
+    customerEmail: session.user.email,
+    successUrl: `${env.NEXT_PUBLIC_APP_URL}/billing?success=1&provider=${providerName}`,
+    cancelUrl: `${env.NEXT_PUBLIC_APP_URL}/billing?canceled=1&provider=${providerName}`
+  });
+
+  redirect(checkout.url);
+}

package/templates/dashboard/src/app/api/billing/portal/route.ts

@@ -0,0 +1,25 @@
+import { redirect } from "next/navigation";
+
+import { getSession } from "@/lib/auth-session";
+import { getBillingProvider, getBillingProviderName } from "@/lib/billing";
+import { env } from "@/lib/env";
+
+export async function POST(request: Request) {
+  const session = await getSession();
+
+  if (!session) {
+    redirect("/sign-in");
+  }
+
+  const formData = await request.formData();
+  const selected = String(formData.get("provider") ?? "");
+  const providerName = getBillingProviderName(selected);
+  const provider = getBillingProvider(providerName);
+  const portal = await provider.createCustomerPortalSession({
+    userId: session.user.id,
+    customerEmail: session.user.email,
+    returnUrl: `${env.NEXT_PUBLIC_APP_URL}/billing?provider=${providerName}`
+  });
+
+  redirect(portal.url);
+}

package/templates/dashboard/src/app/api/email/test/route.ts

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+
+import { getSession } from "@/lib/auth-session";
+import { sendEmail } from "@/lib/email";
+import { createWelcomeEmailTemplate } from "@/lib/email/templates";
+import { env } from "@/lib/env";
+
+export async function POST() {
+  const session = await getSession();
+
+  if (!session) {
+    redirect("/sign-in");
+  }
+
+  if (env.EMAIL_PROVIDER === "none") {
+    redirect("/email");
+  }
+
+  await sendEmail({
+    to: session.user.email,
+    template: createWelcomeEmailTemplate({
+      appName: "Skit",
+      recipientName: session.user.name
+    })
+  });
+
+  redirect("/email?sent=1");
+}

package/templates/dashboard/src/app/api/webhooks/polar/route.ts

@@ -0,0 +1,5 @@
+__POLAR_WEBHOOK_ROUTE_IMPORT__
+
+export async function POST(__POLAR_WEBHOOK_ROUTE_SIGNATURE__) {
+__POLAR_WEBHOOK_ROUTE_BODY__
+}

package/templates/dashboard/src/app/api/webhooks/stripe/route.ts

@@ -0,0 +1,5 @@
+__STRIPE_WEBHOOK_ROUTE_IMPORT__
+
+export async function POST(__STRIPE_WEBHOOK_ROUTE_SIGNATURE__) {
+__STRIPE_WEBHOOK_ROUTE_BODY__
+}

package/templates/dashboard/src/app/billing/layout.tsx

@@ -0,0 +1,22 @@
+import { redirect } from "next/navigation";
+
+import { getSession } from "@/lib/auth-session";
+import { DashboardShell } from "@/components/dashboard/shell";
+
+export default async function BillingLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await getSession();
+
+  if (!session) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <DashboardShell user={session.user}>
+      {children}
+    </DashboardShell>
+  );
+}

package/templates/dashboard/src/app/billing/page.tsx

@@ -0,0 +1,73 @@
+import { getSession } from "@/lib/auth-session";
+import { env } from "@/lib/env";
+
+export default async function BillingPage({
+  searchParams
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const session = await getSession();
+  const params = await searchParams;
+  const success = params.success === "1";
+  const canceled = params.canceled === "1";
+  const providers =
+    env.BILLING_PROVIDER === "both"
+      ? ["stripe", "polar"]
+      : env.BILLING_PROVIDER === "none"
+        ? []
+        : [env.BILLING_PROVIDER];
+
+  return (
+    <>
+      <header className="dashboard-header">
+        <div>
+          <p className="eyebrow">Billing</p>
+          <h1>Manage your subscription</h1>
+          <p className="lede" style={{ marginTop: 4, fontSize: "0.9375rem" }}>
+            Current provider: <strong>{env.BILLING_PROVIDER}</strong>
+          </p>
+        </div>
+      </header>
+
+      {success ? <p className="form-success">Checkout completed or redirected successfully.</p> : null}
+      {canceled ? <p className="form-error">Checkout was canceled.</p> : null}
+
+      {providers.length === 0 ? (
+        <div className="empty-state">
+          <div className="empty-state-icon">💳</div>
+          <h3>Billing is disabled</h3>
+          <p>
+            Re-run the starter with a billing provider to enable checkout flows.
+          </p>
+        </div>
+      ) : (
+        <div className="billing-grid">
+          {providers.map((provider) => (
+            <form
+              key={provider}
+              action="/api/billing/checkout"
+              method="post"
+              className="billing-card"
+            >
+              <input type="hidden" name="provider" value={provider} />
+              <h2>
+                <span className="bento-card-icon" style={{ width: 32, height: 32, fontSize: "1rem" }}>
+                  {provider === "stripe" ? "💜" : "🧊"}
+                </span>
+                {provider === "stripe" ? "Stripe" : "Polar"}
+              </h2>
+              <p>
+                {provider === "stripe"
+                  ? "Create a subscription checkout session using the configured Stripe price."
+                  : "Create a Polar checkout session using the configured product identifier."}
+              </p>
+              <button type="submit" className="btn-primary" style={{ width: "100%" }}>
+                {provider === "stripe" ? "Start Stripe checkout" : "Start Polar checkout"}
+              </button>
+            </form>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

package/templates/dashboard/src/app/dashboard/layout.tsx

@@ -0,0 +1,22 @@
+import { redirect } from "next/navigation";
+
+import { getSession } from "@/lib/auth-session";
+import { DashboardShell } from "@/components/dashboard/shell";
+
+export default async function DashboardLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await getSession();
+
+  if (!session) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <DashboardShell user={session.user}>
+      {children}
+    </DashboardShell>
+  );
+}