nextjs-hackathon-stack 0.1.10 → 0.1.12

package/dist/index.js

@@ -112,6 +112,13 @@ async function scaffold(projectName, skipInstall) {
       p3.log.error(stderr || "pnpm install failed");
       p3.log.info("You can install manually: cd " + projectName + " && pnpm install");
     }
+    spinner2.start("Setting up husky pre-commit hooks");
+    try {
+      execSync("pnpm exec husky", { cwd: targetDir, stdio: "pipe" });
+      spinner2.stop("Husky pre-commit hooks set up");
+    } catch {
+      spinner2.stop("Husky setup failed \u2014 run manually: pnpm exec husky");
+    }
     spinner2.start("Initializing shadcn/ui");
     try {
       execSync("npx shadcn@latest init --yes --defaults --force --silent", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-hackathon-stack",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Scaffold a full-stack Next.js hackathon starter",
   "type": "module",
   "bin": {

package/template/.husky/pre-commit

@@ -0,0 +1 @@
+vitest run --coverage

package/template/_env.example

@@ -9,11 +9,13 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
 # Supabase DB — https://supabase.com > Project Settings > Database > Connection string (URI)
 DATABASE_URL=postgresql://postgres:[password]@db.your-project-id.supabase.co:5432/postgres
 
-# Vercel AI Gateway — https://vercel.com > AI > Gateways
-AI_GATEWAY_API_KEY=your-ai-gateway-api-key
-
-# Optional: override the gateway base URL (defaults to https://ai-gateway.vercel.sh/v1)
-# AI_GATEWAY_URL=https://ai-gateway.vercel.sh/v1
+# AI Provider — defaults to MiniMax direct API
+AI_API_KEY=your-api-key
+# Optional: override base URL (default: https://api.minimax.io/v1)
+# For Vercel Gateway: https://ai-gateway.vercel.sh/v1
+# AI_BASE_URL=https://api.minimax.io/v1
+# Optional: override model (default: MiniMax-M2.7)
+# AI_MODEL=MiniMax-M2.7
 
 # =============================================================================
 # OPTIONAL

package/template/package.json.tmpl

@@ -16,7 +16,8 @@
     "test:e2e": "playwright test",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "drizzle-kit migrate",
-    "db:studio": "drizzle-kit studio"
+    "db:studio": "drizzle-kit studio",
+    "prepare": "husky"
   },
   "dependencies": {
     "next": "^15",
@@ -64,6 +65,11 @@
     "eslint-plugin-react-hooks": "^5",
     "eslint-plugin-import-x": "^4",
     "eslint-plugin-vitest": "^0.5",
-    "eslint-plugin-playwright": "^2"
+    "eslint-plugin-playwright": "^2",
+    "husky": "^9",
+    "lint-staged": "^15"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": ["vitest related --run"]
   }
 }

package/template/src/app/(protected)/page.tsx

@@ -1,4 +1,5 @@
 import { ChatUi } from "@/features/chat/components/chat-ui";
+import { logoutAction } from "@/features/auth/actions/logout.action";
 import { createClient } from "@/shared/lib/supabase/server";
 
 export default async function HomePage() {
@@ -9,7 +10,14 @@ export default async function HomePage() {
 
   return (
     <main className="container mx-auto p-8">
-      <h1 className="mb-4 text-2xl font-bold">Welcome, {user?.email}</h1>
+      <div className="mb-4 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Welcome, {user?.email}</h1>
+        <form action={logoutAction}>
+          <button type="submit" className="rounded bg-gray-200 px-4 py-2 text-sm hover:bg-gray-300">
+            Log out
+          </button>
+        </form>
+      </div>
       <ChatUi />
     </main>
   );

package/template/src/app/__tests__/auth-callback.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mockExchangeCodeForSession = vi.fn();
+
+vi.mock("@/shared/lib/supabase/server", () => ({
+  createClient: vi.fn(() =>
+    Promise.resolve({
+      auth: { exchangeCodeForSession: mockExchangeCodeForSession },
+    })
+  ),
+}));
+
+describe("auth callback route", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("redirects to /login with error when code is missing", async () => {
+    // Arrange
+    const { GET } = await import("../api/auth/callback/route");
+    const req = new Request("http://localhost/api/auth/callback");
+
+    // Act
+    const response = await GET(req);
+
+    // Assert
+    expect(response.status).toBe(307);
+    expect(response.headers.get("location")).toContain("/login?error=no_code");
+  });
+
+  it("redirects to /login with error when exchange fails", async () => {
+    // Arrange
+    mockExchangeCodeForSession.mockResolvedValue({ error: { message: "bad code" } });
+    const { GET } = await import("../api/auth/callback/route");
+    const req = new Request("http://localhost/api/auth/callback?code=bad-code");
+
+    // Act
+    const response = await GET(req);
+
+    // Assert
+    expect(response.status).toBe(307);
+    expect(response.headers.get("location")).toContain("/login?error=auth_error");
+  });
+
+  it("redirects to / on successful exchange", async () => {
+    // Arrange
+    mockExchangeCodeForSession.mockResolvedValue({ error: null });
+    const { GET } = await import("../api/auth/callback/route");
+    const req = new Request("http://localhost/api/auth/callback?code=valid-code");
+
+    // Act
+    const response = await GET(req);
+
+    // Assert
+    expect(response.status).toBe(307);
+    expect(response.headers.get("location")).toBe("http://localhost/");
+  });
+
+  it("redirects to next param on successful exchange", async () => {
+    // Arrange
+    mockExchangeCodeForSession.mockResolvedValue({ error: null });
+    const { GET } = await import("../api/auth/callback/route");
+    const req = new Request("http://localhost/api/auth/callback?code=valid-code&next=/dashboard");
+
+    // Act
+    const response = await GET(req);
+
+    // Assert
+    expect(response.status).toBe(307);
+    expect(response.headers.get("location")).toContain("/dashboard");
+  });
+});

package/template/src/app/__tests__/error.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+
+import ErrorPage from "../error";
+
+describe("ErrorPage", () => {
+  it("renders error heading", () => {
+    // Arrange
+    const error = new Error("Something failed");
+    const reset = vi.fn();
+
+    // Act
+    render(<ErrorPage error={error} reset={reset} />);
+
+    // Assert
+    expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
+  });
+
+  it("renders error message", () => {
+    // Arrange
+    const error = new Error("Specific error message");
+    const reset = vi.fn();
+
+    // Act
+    render(<ErrorPage error={error} reset={reset} />);
+
+    // Assert
+    expect(screen.getByText("Specific error message")).toBeInTheDocument();
+  });
+
+  it("renders Try again button", () => {
+    // Arrange
+    const error = new Error("test");
+    const reset = vi.fn();
+
+    // Act
+    render(<ErrorPage error={error} reset={reset} />);
+
+    // Assert
+    expect(screen.getByRole("button", { name: /try again/i })).toBeInTheDocument();
+  });
+
+  it("calls reset when Try again is clicked", async () => {
+    // Arrange
+    const error = new Error("test");
+    const reset = vi.fn();
+    const user = userEvent.setup();
+    render(<ErrorPage error={error} reset={reset} />);
+
+    // Act
+    await user.click(screen.getByRole("button", { name: /try again/i }));
+
+    // Assert
+    expect(reset).toHaveBeenCalledOnce();
+  });
+
+  it("logs error to console on mount", () => {
+    // Arrange
+    const error = new Error("logged error");
+    const reset = vi.fn();
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+    // Act
+    render(<ErrorPage error={error} reset={reset} />);
+
+    // Assert
+    expect(consoleSpy).toHaveBeenCalledWith(error);
+    consoleSpy.mockRestore();
+  });
+});

package/template/src/app/__tests__/layout.test.tsx

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+
+import RootLayout from "../layout";
+
+vi.mock("@/shared/components/providers", () => ({
+  Providers: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+describe("RootLayout", () => {
+  it("renders children inside body", () => {
+    // Arrange + Act
+    const { container } = render(
+      <RootLayout>
+        <p data-testid="child-content">Hello</p>
+      </RootLayout>
+    );
+
+    // Assert
+    expect(container.querySelector("[data-testid='child-content']")).toBeTruthy();
+  });
+});

package/template/src/app/__tests__/login-page.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+
+import LoginPage from "../(auth)/login/page";
+
+vi.mock("@/features/auth/components/login-form", () => ({
+  LoginForm: () => <div data-testid="login-form" />,
+}));
+
+describe("LoginPage", () => {
+  it("renders the welcome heading", () => {
+    // Arrange + Act
+    render(<LoginPage />);
+
+    // Assert
+    expect(screen.getByText(/welcome back/i)).toBeInTheDocument();
+  });
+
+  it("renders the LoginForm component", () => {
+    // Arrange + Act
+    render(<LoginPage />);
+
+    // Assert
+    expect(screen.getByTestId("login-form")).toBeInTheDocument();
+  });
+
+  it("renders the sign-in description", () => {
+    // Arrange + Act
+    render(<LoginPage />);
+
+    // Assert
+    expect(screen.getByText(/sign in to your account/i)).toBeInTheDocument();
+  });
+});

package/template/src/app/__tests__/protected-layout.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi } from "vitest";
+
+const mockGetUser = vi.fn();
+const mockRedirect = vi.fn();
+
+vi.mock("@/shared/lib/supabase/server", () => ({
+  createClient: vi.fn(() =>
+    Promise.resolve({
+      auth: { getUser: mockGetUser },
+    })
+  ),
+}));
+
+vi.mock("next/navigation", () => ({
+  redirect: (url: string) => mockRedirect(url),
+}));
+
+describe("ProtectedLayout", () => {
+  it("renders children when user is authenticated", async () => {
+    // Arrange
+    mockGetUser.mockResolvedValue({ data: { user: { email: "user@example.com" } } });
+    const { default: ProtectedLayout } = await import("../(protected)/layout");
+
+    // Act
+    const result = await ProtectedLayout({ children: <div data-testid="child" /> });
+
+    // Assert
+    expect(result).toBeTruthy();
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+
+  it("redirects to /login when user is not authenticated", async () => {
+    // Arrange
+    mockGetUser.mockResolvedValue({ data: { user: null } });
+    const { default: ProtectedLayout } = await import("../(protected)/layout");
+
+    // Act
+    await ProtectedLayout({ children: <div /> });
+
+    // Assert
+    expect(mockRedirect).toHaveBeenCalledWith("/login");
+  });
+});

package/template/src/app/__tests__/protected-page.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from "vitest";
+
+const mockGetUser = vi.fn();
+
+vi.mock("@/shared/lib/supabase/server", () => ({
+  createClient: vi.fn(() =>
+    Promise.resolve({
+      auth: { getUser: mockGetUser },
+    })
+  ),
+}));
+
+vi.mock("@/features/chat/components/chat-ui", () => ({
+  ChatUi: () => <div data-testid="chat-ui" />,
+}));
+
+describe("HomePage (protected)", () => {
+  it("renders welcome message with user email", async () => {
+    // Arrange
+    mockGetUser.mockResolvedValue({ data: { user: { email: "user@example.com" } } });
+    const { default: HomePage } = await import("../(protected)/page");
+
+    // Act
+    const result = await HomePage();
+
+    // Assert
+    expect(result).toBeTruthy();
+  });
+
+  it("renders with null user gracefully", async () => {
+    // Arrange
+    mockGetUser.mockResolvedValue({ data: { user: null } });
+    const { default: HomePage } = await import("../(protected)/page");
+
+    // Act
+    const result = await HomePage();
+
+    // Assert
+    expect(result).toBeTruthy();
+  });
+});

package/template/src/app/api/chat/route.ts

@@ -16,7 +16,9 @@ export async function POST(req: Request) {
   return result.toDataStreamResponse({
     getErrorMessage: (error) => {
       console.error("[chat] stream error:", error);
-      return error instanceof Error ? error.message : "AI request failed";
+      if (error instanceof Error) return error.message;
+      if (typeof error === "object" && error !== null) return JSON.stringify(error);
+      return String(error);
     },
   });
 }

package/template/src/features/auth/__tests__/login-form.test.tsx

@@ -1,16 +1,19 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import { LoginForm } from "../components/login-form";
 
+const mockLoginAction = vi.fn().mockResolvedValue({ status: "idle" });
+
 vi.mock("../actions/login.action", () => ({
-  loginAction: vi.fn().mockResolvedValue({ status: "idle" }),
+  loginAction: (...args: unknown[]) => mockLoginAction(...args),
 }));
 
 describe("LoginForm", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockLoginAction.mockResolvedValue({ status: "idle" });
   });
 
   it("renders email and password fields", () => {
@@ -41,4 +44,52 @@ describe("LoginForm", () => {
     // Assert
     expect(await screen.findByText(/invalid email/i)).toBeInTheDocument();
   });
+
+  it("shows validation error for short password", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<LoginForm />);
+
+    // Act
+    await user.type(screen.getByLabelText(/email/i), "user@example.com");
+    await user.type(screen.getByLabelText(/password/i), "short");
+    await user.click(screen.getByRole("button", { name: /sign in/i }));
+
+    // Assert
+    expect(await screen.findByText(/at least 8 characters/i)).toBeInTheDocument();
+  });
+
+  it("submits with valid credentials and calls loginAction", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<LoginForm />);
+
+    // Act
+    await user.type(screen.getByLabelText(/email/i), "user@example.com");
+    await user.type(screen.getByLabelText(/password/i), "password123");
+    await user.click(screen.getByRole("button", { name: /sign in/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(mockLoginAction).toHaveBeenCalled();
+    });
+  });
+
+  it("displays server-side error message when action returns error", async () => {
+    // Arrange
+    mockLoginAction.mockResolvedValue({ status: "error", message: "Invalid credentials" });
+    const user = userEvent.setup();
+    render(<LoginForm />);
+
+    // Act
+    await user.type(screen.getByLabelText(/email/i), "user@example.com");
+    await user.type(screen.getByLabelText(/password/i), "password123");
+    await user.click(screen.getByRole("button", { name: /sign in/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toBeInTheDocument();
+      expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument();
+    });
+  });
 });

package/template/src/features/auth/__tests__/login.action.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mockSignInWithPassword = vi.fn();
+const mockRedirect = vi.fn();
+
+vi.mock("@/shared/lib/supabase/server", () => ({
+  createClient: vi.fn(() =>
+    Promise.resolve({
+      auth: { signInWithPassword: mockSignInWithPassword },
+    })
+  ),
+}));
+
+vi.mock("next/navigation", () => ({
+  redirect: (url: string) => mockRedirect(url),
+}));
+
+describe("loginAction", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns error when email is invalid", async () => {
+    // Arrange
+    const { loginAction } = await import("../actions/login.action");
+    const fd = new FormData();
+    fd.set("email", "not-an-email");
+    fd.set("password", "password123");
+
+    // Act
+    const result = await loginAction({ status: "idle" }, fd);
+
+    // Assert
+    expect(result.status).toBe("error");
+  });
+
+  it("returns error when password is too short", async () => {
+    // Arrange
+    const { loginAction } = await import("../actions/login.action");
+    const fd = new FormData();
+    fd.set("email", "user@example.com");
+    fd.set("password", "short");
+
+    // Act
+    const result = await loginAction({ status: "idle" }, fd);
+
+    // Assert
+    expect(result.status).toBe("error");
+  });
+
+  it("returns error on auth failure", async () => {
+    // Arrange
+    mockSignInWithPassword.mockResolvedValue({
+      error: { message: "Invalid credentials" },
+    });
+    const { loginAction } = await import("../actions/login.action");
+    const fd = new FormData();
+    fd.set("email", "user@example.com");
+    fd.set("password", "password123");
+
+    // Act
+    const result = await loginAction({ status: "idle" }, fd);
+
+    // Assert
+    expect(result).toEqual({ status: "error", message: "Invalid credentials" });
+  });
+
+  it("redirects to / on successful login", async () => {
+    // Arrange
+    mockSignInWithPassword.mockResolvedValue({ error: null });
+    const { loginAction } = await import("../actions/login.action");
+    const fd = new FormData();
+    fd.set("email", "user@example.com");
+    fd.set("password", "password123");
+
+    // Act
+    await loginAction({ status: "idle" }, fd);
+
+    // Assert
+    expect(mockRedirect).toHaveBeenCalledWith("/");
+  });
+});

package/template/src/features/auth/__tests__/logout.action.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mockSignOut = vi.fn();
+const mockRedirect = vi.fn();
+
+vi.mock("@/shared/lib/supabase/server", () => ({
+  createClient: vi.fn(() =>
+    Promise.resolve({
+      auth: { signOut: mockSignOut },
+    })
+  ),
+}));
+
+vi.mock("next/navigation", () => ({
+  redirect: (url: string) => mockRedirect(url),
+}));
+
+describe("logoutAction", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockSignOut.mockResolvedValue({});
+  });
+
+  it("calls signOut and redirects to /login", async () => {
+    const { logoutAction } = await import("../actions/logout.action");
+
+    await logoutAction();
+
+    expect(mockSignOut).toHaveBeenCalled();
+    expect(mockRedirect).toHaveBeenCalledWith("/login");
+  });
+});

package/template/src/features/auth/actions/login.action.ts

@@ -25,7 +25,7 @@ export async function loginAction(
   });
 
   if (!parsed.success) {
-    return { status: "error", message: parsed.error.issues[0]?.message ?? "Invalid input" };
+    return { status: "error", message: parsed.error.issues[0]!.message };
   }
 
   const supabase = await createClient();

package/template/src/features/auth/components/login-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useActionState } from "react";
+import { useActionState, useTransition } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -22,7 +22,8 @@ type FormValues = z.infer<typeof schema>;
 const initialState: LoginActionState = { status: "idle" };
 
 export function LoginForm() {
-  const [state, formAction, isPending] = useActionState(loginAction, initialState);
+  const [state, formAction] = useActionState(loginAction, initialState);
+  const [isPending, startTransition] = useTransition();
 
   const {
     register,
@@ -34,7 +35,7 @@ export function LoginForm() {
     const fd = new FormData();
     fd.set("email", data.email);
     fd.set("password", data.password);
-    formAction(fd);
+    startTransition(() => formAction(fd));
   });
 
   return (