nextjs-hackathon-stack 0.1.0 → 0.1.2

package/dist/index.js

@@ -2,6 +2,7 @@
 
 // src/index.ts
 import { Command } from "commander";
+import * as p4 from "@clack/prompts";
 
 // src/cli.ts
 import * as p2 from "@clack/prompts";
@@ -17,9 +18,6 @@ function printBanner() {
 function success(msg) {
   p.log.success(msg);
 }
-function info(msg) {
-  p.log.info(msg);
-}
 function outro2(msg) {
   p.outro(pc.green(msg));
 }
@@ -102,31 +100,38 @@ async function scaffold(projectName, skipInstall) {
   spinner2.stop("Git initialized");
   if (!skipInstall) {
     spinner2.start("Installing dependencies (this may take a minute)");
-    execSync("npm install", { cwd: targetDir, stdio: "ignore" });
-    spinner2.stop("Dependencies installed");
-    info("Running shadcn/ui init...");
     try {
-      execSync("npx shadcn@latest init --yes --defaults", {
+      execSync("npm install", { cwd: targetDir, stdio: "pipe" });
+      spinner2.stop("Dependencies installed");
+    } catch (err) {
+      spinner2.stop("Failed to install dependencies");
+      const stderr = err instanceof Error && "stderr" in err ? err.stderr?.toString() : String(err);
+      p3.log.error(stderr || "npm install failed");
+      p3.log.info("You can install manually: cd " + projectName + " && npm install");
+    }
+    spinner2.start("Initializing shadcn/ui");
+    try {
+      execSync("npx shadcn@latest init --yes --defaults --force --silent", {
         cwd: targetDir,
-        stdio: "inherit"
+        stdio: "pipe"
       });
-      success("shadcn/ui initialized");
+      spinner2.stop("shadcn/ui initialized");
     } catch {
-      p3.log.warn("shadcn/ui init failed \u2014 run manually: npx shadcn@latest init");
+      spinner2.stop("shadcn/ui init failed \u2014 run manually: npx shadcn@latest init");
     }
-    info("Adding shadcn/ui base components...");
     const components = ["button", "input", "card", "form", "label"];
     for (const component of components) {
+      spinner2.start(`Adding shadcn/ui component: ${component}`);
       try {
-        execSync(`npx shadcn@latest add ${component} --yes`, {
+        execSync(`npx shadcn@latest add ${component} --yes --silent`, {
           cwd: targetDir,
-          stdio: "ignore"
+          stdio: "pipe"
         });
+        spinner2.stop(`Added shadcn/ui component: ${component}`);
       } catch {
-        p3.log.warn(`Failed to add component: ${component}`);
+        spinner2.stop(`Failed to add component: ${component}`);
       }
     }
-    success("shadcn/ui components added");
   }
   success(pc2.bold(`Project "${projectName}" created!`));
   console.log(`
@@ -145,8 +150,13 @@ async function scaffold(projectName, skipInstall) {
 // src/index.ts
 var program = new Command();
 program.name("nextjs-hackathon-stack").description("Scaffold a full-stack Next.js 15 hackathon starter").version("0.1.0").argument("[project-name]", "Name of the project to create").option("--skip-install", "Skip npm install and shadcn/ui init", false).action(async (projectName, opts) => {
-  const options = await runCli(projectName, opts.skipInstall);
-  await scaffold(options.projectName, options.skipInstall);
-  outro2("Happy hacking! \u{1F680}");
+  try {
+    const options = await runCli(projectName, opts.skipInstall);
+    await scaffold(options.projectName, options.skipInstall);
+    outro2("Happy hacking! \u{1F680}");
+  } catch (err) {
+    p4.cancel(err instanceof Error ? err.message : "Something went wrong");
+    process.exit(1);
+  }
 });
 program.parse();

package/package.json

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

package/template/package.json.tmpl

@@ -21,11 +21,11 @@
   "dependencies": {
     "next": "^15",
     "@supabase/supabase-js": "^2",
-    "@supabase/ssr": "^0",
-    "drizzle-orm": "^0.45",
+    "@supabase/ssr": "^0.6",
+    "drizzle-orm": "^0.44",
     "drizzle-zod": "^0.7",
     "@tanstack/react-query": "^5",
-    "ai": "^4",
+    "ai": "^4.3",
     "@ai-sdk/react": "^1",
     "react-hook-form": "^7",
     "@hookform/resolvers": "^3",
@@ -40,11 +40,11 @@
     "@types/react-dom": "^19",
     "drizzle-kit": "^0.30",
     "vitest": "^3",
-    "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-react": "^4",
     "@testing-library/react": "^16",
-    "@testing-library/jest-dom": "latest",
-    "@testing-library/user-event": "latest",
-    "@vitest/coverage-v8": "latest",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/user-event": "^14",
+    "@vitest/coverage-v8": "^3",
     "@playwright/test": "^1.49",
     "tailwindcss": "^4",
     "@tailwindcss/postcss": "^4",
@@ -53,10 +53,10 @@
     "@eslint/js": "^9",
     "typescript-eslint": "^8",
     "@next/eslint-plugin-next": "^15",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
-    "eslint-plugin-import-x": "latest",
-    "eslint-plugin-vitest": "latest",
-    "eslint-plugin-playwright": "latest"
+    "eslint-plugin-react": "^7",
+    "eslint-plugin-react-hooks": "^5",
+    "eslint-plugin-import-x": "^4",
+    "eslint-plugin-vitest": "^0.5",
+    "eslint-plugin-playwright": "^2"
   }
 }

package/template/src/app/(auth)/login/page.tsx

@@ -2,9 +2,14 @@ import { LoginForm } from "@/features/auth/components/login-form";
 
 export default function LoginPage() {
   return (
-    <main className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-md p-8">
-        <h1 className="mb-8 text-2xl font-bold">Sign in</h1>
+    <main className="flex min-h-screen items-center justify-center bg-muted/40 px-4">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold tracking-tight">Welcome back</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign in to your account to continue
+          </p>
+        </div>
         <LoginForm />
       </div>
     </main>

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

@@ -5,6 +5,10 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { loginAction, type LoginActionState } from "../actions/login.action";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 const schema = z.object({
   email: z.string().email("Invalid email"),
@@ -32,49 +36,52 @@ export function LoginForm() {
   });
 
   return (
-    <form onSubmit={onSubmit} data-testid="login-form" className="space-y-4">
-      {state.status === "error" && (
-        <p role="alert" className="text-sm text-red-600">
-          {state.message}
-        </p>
-      )}
-      <div>
-        <label htmlFor="email" className="block text-sm font-medium">
-          Email
-        </label>
-        <input
-          id="email"
-          type="email"
-          autoComplete="email"
-          {...register("email")}
-          className="mt-1 block w-full rounded border px-3 py-2"
-        />
-        {errors.email && (
-          <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
-        )}
-      </div>
-      <div>
-        <label htmlFor="password" className="block text-sm font-medium">
-          Password
-        </label>
-        <input
-          id="password"
-          type="password"
-          autoComplete="current-password"
-          {...register("password")}
-          className="mt-1 block w-full rounded border px-3 py-2"
-        />
-        {errors.password && (
-          <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
-        )}
-      </div>
-      <button
-        type="submit"
-        disabled={isPending}
-        className="w-full rounded bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
-      >
-        {isPending ? "Signing in..." : "Sign in"}
-      </button>
-    </form>
+    <Card>
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+        <CardDescription>Enter your email and password below</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} data-testid="login-form" className="space-y-4">
+          {state.status === "error" && (
+            <p role="alert" className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {state.message}
+            </p>
+          )}
+
+          <div className="space-y-1.5">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              autoComplete="email"
+              placeholder="you@example.com"
+              {...register("email")}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              autoComplete="current-password"
+              placeholder="••••••••"
+              {...register("password")}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive">{errors.password.message}</p>
+            )}
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isPending}>
+            {isPending ? "Signing in…" : "Sign in"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
   );
 }