nextjs-hackathon-stack 0.1.3 → 0.1.5

package/package.json

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

package/template/eslint.config.ts

@@ -61,6 +61,6 @@ export default tseslint.config(
     },
   },
   {
-    ignores: [".next/**", "node_modules/**", "dist/**"],
+    ignores: [".next/**", "node_modules/**", "dist/**", "eslint.config.ts", "next-env.d.ts", "next.config.ts", "playwright.config.ts", "drizzle.config.ts", "vitest.config.ts"],
   }
 );

package/template/next.config.ts

@@ -1,10 +1,8 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  experimental: {
-    typedRoutes: true,
-  },
-  headers: async () => [
+  typedRoutes: true,
+  headers: () => Promise.resolve([
     {
       source: "/(.*)",
       headers: [
@@ -25,7 +23,7 @@ const nextConfig: NextConfig = {
         },
       ],
     },
-  ],
+  ]),
 };
 
 export default nextConfig;

package/template/package.json.tmpl

@@ -31,7 +31,14 @@
     "@hookform/resolvers": "^3",
     "zod": "^3",
     "react": "^19",
-    "react-dom": "^19"
+    "react-dom": "^19",
+    "postgres": "^3",
+    "@ai-sdk/openai": "^1",
+    "clsx": "^2",
+    "tailwind-merge": "^2",
+    "class-variance-authority": "^0.7",
+    "@radix-ui/react-slot": "^1",
+    "@radix-ui/react-label": "^2"
   },
   "devDependencies": {
     "typescript": "^5",

package/template/playwright.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env["CI"],
   retries: process.env["CI"] ? 2 : 0,
-  workers: process.env["CI"] ? 1 : undefined,
+  ...(process.env["CI"] ? { workers: 1 } : {}),
   reporter: "html",
   use: {
     baseURL: "http://localhost:3000",

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

@@ -1,4 +1,5 @@
 import { redirect } from "next/navigation";
+
 import { createClient } from "@/shared/lib/supabase/server";
 
 export default async function ProtectedLayout({

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

@@ -1,5 +1,5 @@
-import { createClient } from "@/shared/lib/supabase/server";
 import { ChatUi } from "@/features/chat/components/chat-ui";
+import { createClient } from "@/shared/lib/supabase/server";
 
 export default async function HomePage() {
   const supabase = await createClient();

package/template/src/app/api/auth/callback/route.ts

@@ -1,4 +1,5 @@
 import { NextResponse } from "next/server";
+
 import { createClient } from "@/shared/lib/supabase/server";
 
 export async function GET(request: Request) {

package/template/src/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+
 import { Providers } from "@/shared/components/providers";
 
 export const metadata: Metadata = {

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

@@ -1,6 +1,7 @@
 import { render, screen } 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";
 
 vi.mock("../actions/login.action", () => ({

package/template/src/features/auth/__tests__/use-auth.test.ts

@@ -1,7 +1,8 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
 import { createElement } from "react";
+import { describe, it, expect, vi } from "vitest";
+
 import { useAuth } from "../hooks/use-auth";
 
 const mockGetSession = vi.fn();
@@ -29,7 +30,7 @@ describe("useAuth", () => {
     const { result } = renderHook(() => useAuth(), { wrapper });
 
     // Assert
-    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    await waitFor(() => { expect(result.current.isSuccess).toBe(true); });
     expect(result.current.data).toEqual(mockSession);
   });
 
@@ -41,6 +42,6 @@ describe("useAuth", () => {
     const { result } = renderHook(() => useAuth(), { wrapper });
 
     // Assert
-    await waitFor(() => expect(result.current.isError).toBe(true));
+    await waitFor(() => { expect(result.current.isError).toBe(true); });
   });
 });

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

@@ -2,6 +2,7 @@
 
 import { redirect } from "next/navigation";
 import { z } from "zod";
+
 import { createClient } from "@/shared/lib/supabase/server";
 
 const loginSchema = z.object({

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

@@ -1,6 +1,7 @@
 "use server";
 
 import { redirect } from "next/navigation";
+
 import { createClient } from "@/shared/lib/supabase/server";
 
 export async function logoutAction(): Promise<void> {

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

@@ -1,14 +1,16 @@
 "use client";
 
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useActionState } from "react";
 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 "@/shared/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/shared/components/ui/card";
 import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/shared/components/ui/card";
 
 const schema = z.object({
   email: z.string().email("Invalid email"),
@@ -42,7 +44,7 @@ export function LoginForm() {
         <CardDescription>Enter your email and password below</CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={onSubmit} data-testid="login-form" className="space-y-4">
+        <form onSubmit={(e) => { void onSubmit(e); }} 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}

package/template/src/features/auth/hooks/use-auth.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
+
 import { createClient } from "@/shared/lib/supabase/client";
 
 export function useAuth() {

package/template/src/features/chat/__tests__/chat-ui.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
+
 import { ChatUi } from "../components/chat-ui";
 
 vi.mock("@ai-sdk/react", () => ({

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

@@ -1,10 +1,11 @@
-import { streamText } from "ai";
+import { streamText, type CoreMessage } from "ai";
+
 import { aiModel } from "@/shared/lib/ai";
 
 export const runtime = "edge";
 
 export async function POST(req: Request) {
-  const { messages } = (await req.json()) as { messages: Array<{ role: string; content: string }> };
+  const { messages } = (await req.json()) as { messages: CoreMessage[] };
 
   const result = streamText({
     model: aiModel,

package/template/src/features/chat/components/chat-ui.tsx

@@ -3,9 +3,10 @@
 import { useChat } from "@ai-sdk/react";
 
 export function ChatUi() {
-  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
+  const { messages, input, handleInputChange, handleSubmit, status } = useChat({
     api: "/features/chat/api",
   });
+  const isLoading = status === "streaming" || status === "submitted";
 
   return (
     <div className="flex flex-col gap-4" data-testid="chat-ui">

package/template/src/features/tts/__tests__/tts-player.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
+
 import { TtsPlayer } from "../components/tts-player";
 
 describe("TtsPlayer", () => {

package/template/src/features/tts/components/tts-player.tsx

@@ -8,7 +8,7 @@ export function TtsPlayer() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SyntheticEvent) => {
     e.preventDefault();
     setIsLoading(true);
     setError(null);
@@ -32,10 +32,10 @@ export function TtsPlayer() {
 
   return (
     <div className="space-y-4" data-testid="tts-player">
-      <form onSubmit={handleSubmit} className="flex gap-2">
+      <form onSubmit={(e) => { void handleSubmit(e); }} className="flex gap-2">
         <textarea
           value={text}
-          onChange={(e) => setText(e.target.value)}
+          onChange={(e) => { setText(e.target.value); }}
           placeholder="Enter text to speak..."
           className="flex-1 rounded border px-3 py-2"
           rows={3}

package/template/src/features/video/__tests__/video-generator.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
+
 import { VideoGenerator } from "../components/video-generator";
 
 describe("VideoGenerator", () => {

package/template/src/features/video/components/video-generator.tsx

@@ -8,7 +8,7 @@ export function VideoGenerator() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SyntheticEvent) => {
     e.preventDefault();
     setIsLoading(true);
     setError(null);
@@ -32,10 +32,10 @@ export function VideoGenerator() {
 
   return (
     <div className="space-y-4" data-testid="video-generator">
-      <form onSubmit={handleSubmit} className="flex gap-2">
+      <form onSubmit={(e) => { void handleSubmit(e); }} className="flex gap-2">
         <input
           value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
+          onChange={(e) => { setPrompt(e.target.value); }}
           placeholder="Describe a video..."
           className="flex-1 rounded border px-3 py-2"
         />

package/template/src/shared/__tests__/ai.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+
 import { aiModel } from "../lib/ai";
 
 describe("aiModel", () => {

package/template/src/shared/__tests__/minimax-media.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
+
 import { generateVideo, synthesizeSpeech } from "../lib/minimax-media";
 
 const mockFetch = vi.fn();
@@ -13,7 +14,7 @@ describe("generateVideo", () => {
     // Arrange
     mockFetch.mockResolvedValue({
       ok: true,
-      json: async () => ({ task_id: "abc123" }),
+      json: () => Promise.resolve({ task_id: "abc123" }),
     });
 
     // Act
@@ -37,7 +38,7 @@ describe("synthesizeSpeech", () => {
     // Arrange
     mockFetch.mockResolvedValue({
       ok: true,
-      json: async () => ({ audio_file: "https://example.com/audio.mp3" }),
+      json: () => Promise.resolve({ audio_file: "https://example.com/audio.mp3" }),
     });
 
     // Act

package/template/src/shared/__tests__/providers.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
+
 import { Providers } from "../components/providers";
 
 describe("Providers", () => {

package/template/src/shared/__tests__/schema.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+
 import { insertProfileSchema, selectProfileSchema } from "../db/schema";
 
 describe("profiles schema", () => {

package/template/src/shared/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/template/src/shared/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/template/src/shared/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/template/src/shared/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/template/src/shared/db/index.ts

@@ -1,7 +1,8 @@
 import { drizzle } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
+
 import * as schema from "./schema";
 
-const client = postgres(process.env["DATABASE_URL"] ?? "");
+const client = postgres(process.env.DATABASE_URL ?? "");
 
 export const db = drizzle(client, { schema });

package/template/src/shared/lib/ai.ts

@@ -1,8 +1,8 @@
 import { createOpenAI } from "@ai-sdk/openai";
 
 const gateway = createOpenAI({
-  baseURL: process.env["AI_GATEWAY_URL"] ?? "https://api.minimaxi.chat/v1",
-  apiKey: process.env["MINIMAX_API_KEY"] ?? "",
+  baseURL: process.env.AI_GATEWAY_URL ?? "https://api.minimaxi.chat/v1",
+  apiKey: process.env.MINIMAX_API_KEY ?? "",
 });
 
 export const aiModel = gateway("minimax/minimax-m2.7");

package/template/src/shared/lib/minimax-media.ts

@@ -23,7 +23,7 @@ export async function generateVideo(prompt: string): Promise<string> {
   const response = await fetch(`${MINIMAX_API_BASE}/video_generation`, {
     method: "POST",
     headers: {
-      Authorization: `Bearer ${process.env["MINIMAX_API_KEY"] ?? ""}`,
+      Authorization: `Bearer ${process.env.MINIMAX_API_KEY ?? ""}`,
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
@@ -44,7 +44,7 @@ export async function synthesizeSpeech(text: string, voiceId = "female-shaonv"):
   const response = await fetch(`${MINIMAX_API_BASE}/t2a_v2`, {
     method: "POST",
     headers: {
-      Authorization: `Bearer ${process.env["MINIMAX_API_KEY"] ?? ""}`,
+      Authorization: `Bearer ${process.env.MINIMAX_API_KEY ?? ""}`,
       "Content-Type": "application/json",
     },
     body: JSON.stringify({

package/template/src/shared/lib/supabase/client.ts

@@ -2,7 +2,7 @@ import { createBrowserClient } from "@supabase/ssr";
 
 export function createClient() {
   return createBrowserClient(
-    process.env["NEXT_PUBLIC_SUPABASE_URL"]!,
-    process.env["NEXT_PUBLIC_SUPABASE_ANON_KEY"]!
+    process.env.NEXT_PUBLIC_SUPABASE_URL ?? "",
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? ""
   );
 }

package/template/src/shared/lib/supabase/middleware.ts

@@ -1,23 +1,24 @@
-import { createServerClient } from "@supabase/ssr";
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
 import { NextResponse, type NextRequest } from "next/server";
 
 export async function updateSession(request: NextRequest) {
   let supabaseResponse = NextResponse.next({ request });
 
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   const supabase = createServerClient(
-    process.env["NEXT_PUBLIC_SUPABASE_URL"]!,
-    process.env["NEXT_PUBLIC_SUPABASE_ANON_KEY"]!,
+    process.env.NEXT_PUBLIC_SUPABASE_URL ?? "",
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? "",
     {
       cookies: {
         getAll() {
           return request.cookies.getAll();
         },
-        setAll(cookiesToSet) {
-          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value));
+        setAll(cookiesToSet: { name: string; value: string; options: CookieOptions }[]) {
+          cookiesToSet.forEach(({ name, value }) => { request.cookies.set(name, value); });
           supabaseResponse = NextResponse.next({ request });
-          cookiesToSet.forEach(({ name, value, options }) =>
-            supabaseResponse.cookies.set(name, value, options)
-          );
+          cookiesToSet.forEach(({ name, value, options }) => {
+            supabaseResponse.cookies.set(name, value, options);
+          });
         },
       },
     }

package/template/src/shared/lib/supabase/server.ts

@@ -1,23 +1,25 @@
-import { createServerClient } from "@supabase/ssr";
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
 import { cookies } from "next/headers";
 
 export async function createClient() {
   const cookieStore = await cookies();
 
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   return createServerClient(
-    process.env["NEXT_PUBLIC_SUPABASE_URL"]!,
-    process.env["NEXT_PUBLIC_SUPABASE_ANON_KEY"]!,
+    process.env.NEXT_PUBLIC_SUPABASE_URL ?? "",
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? "",
     {
       cookies: {
         getAll() {
           return cookieStore.getAll();
         },
-        setAll(cookiesToSet) {
+        setAll(cookiesToSet: { name: string; value: string; options: CookieOptions }[]) {
           try {
             cookiesToSet.forEach(({ name, value, options }) =>
               cookieStore.set(name, value, options)
             );
           } catch {
+            // Server components cannot set cookies; middleware handles this
           }
         },
       },

package/template/src/shared/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}