fix: lazy-init OpenAI client to avoid build failure without API key

.env.example

@@ -0,0 +1,6 @@
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/comparaison
+BETTER_AUTH_SECRET=change-me-to-random-string
+OPENAI_API_KEY=
+PERPLEXITY_API_KEY=
+TAVILY_API_KEY=
+NEXT_PUBLIC_APP_URL=http://localhost:3000

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:20-alpine AS base
+
+FROM base AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+EXPOSE 3000
+CMD ["node", "server.js"]

docker-compose.yml

@@ -0,0 +1,30 @@
+version: "3.8"
+services:
+  app:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - DATABASE_URL=postgresql://postgres:postgres@db:5432/comparaison
+    depends_on:
+      db:
+        condition: service_healthy
+    restart: unless-stopped
+  db:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: comparaison
+    ports:
+      - "5432:5432"
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+volumes:
+  pgdata:

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
 };
 
 export default nextConfig;

src/app/(main)/explore/page.tsx

@@ -1,216 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { Search, Eye, BarChart3, Filter, X, Loader2 } from "lucide-react"
-import Link from "next/link"
-
-const allComparisons = [
-  {
-    id: "1",
-    title: "React vs Vue vs Svelte",
-    description: "Frontend framework comparison for modern web development",
-    items: ["React", "Vue", "Svelte"],
-    tags: ["Tech", "JavaScript"],
-    author: "Alex Johnson",
-    overallScore: 8.5,
-    views: 1247,
-  },
-  {
-    id: "2",
-    title: "GPT-4 vs Claude vs Gemini",
-    description: "Comparing top AI language models for reasoning tasks",
-    items: ["GPT-4", "Claude 3", "Gemini Pro"],
-    tags: ["AI", "Products"],
-    author: "Sarah Chen",
-    overallScore: 8.8,
-    views: 3891,
-  },
-  {
-    id: "3",
-    title: "Notion vs Obsidian vs Roam",
-    description: "Knowledge management tools for productivity",
-    items: ["Notion", "Obsidian", "Roam Research"],
-    tags: ["Productivity", "Tools"],
-    author: "Mike Peters",
-    overallScore: 7.5,
-    views: 892,
-  },
-  {
-    id: "4",
-    title: "AWS vs GCP vs Azure",
-    description: "Cloud platform comparison for enterprise infrastructure",
-    items: ["AWS", "Google Cloud", "Microsoft Azure"],
-    tags: ["Tech", "Cloud"],
-    author: "Emma Wilson",
-    overallScore: 9.0,
-    views: 2156,
-  },
-  {
-    id: "5",
-    title: "iPhone 15 Pro vs Samsung S24 Ultra",
-    description: "Flagship smartphone comparison with camera and performance benchmarks",
-    items: ["iPhone 15 Pro", "Samsung S24 Ultra"],
-    tags: ["Products", "Mobile"],
-    author: "James Lee",
-    overallScore: 8.2,
-    views: 3421,
-  },
-  {
-    id: "6",
-    title: "Python vs Rust vs Go",
-    description: "Systems programming languages compared for performance and productivity",
-    items: ["Python", "Rust", "Go"],
-    tags: ["Tech", "Programming"],
-    author: "Anna Kim",
-    overallScore: 8.4,
-    views: 1873,
-  },
-]
-
-const categories = ["All", "Tech", "Products", "AI", "Cloud", "Productivity"]
-
-export default function ExplorePage() {
-  const [searchQuery, setSearchQuery] = useState("")
-  const [selectedCategory, setSelectedCategory] = useState("All")
-  const [loading, setLoading] = useState(false)
-
-  const filteredComparisons = allComparisons.filter((comparison) => {
-    const matchesSearch =
-      searchQuery === "" ||
-      comparison.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      comparison.items.some((item) =>
-        item.toLowerCase().includes(searchQuery.toLowerCase())
-      )
-    const matchesCategory =
-      selectedCategory === "All" ||
-      comparison.tags.some((tag) => tag.toLowerCase() === selectedCategory.toLowerCase())
-    return matchesSearch && matchesCategory
-  })
-
-  return (
-    <div className="max-w-6xl mx-auto p-4 sm:p-6 space-y-6">
-      <div className="space-y-4">
-        <h1 className="text-2xl font-bold">Explore Comparisons</h1>
-
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search comparisons..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-9"
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-wrap gap-2">
-          {categories.map((category) => (
-            <Button
-              key={category}
-              variant={selectedCategory === category ? "default" : "outline"}
-              size="sm"
-              onClick={() => setSelectedCategory(category)}
-              className="rounded-full"
-            >
-              {category}
-            </Button>
-          ))}
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="size-8 animate-spin text-primary" />
-        </div>
-      ) : filteredComparisons.length > 0 ? (
-        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {filteredComparisons.map((comparison) => (
-            <Link key={comparison.id} href={`/compare/${comparison.id}`}>
-              <Card className="h-full transition-all hover:border-primary hover:shadow-md">
-                <CardHeader className="pb-3">
-                  <div className="flex items-start justify-between gap-2">
-                    <CardTitle className="text-base line-clamp-1 flex-1">
-                      {comparison.title}
-                    </CardTitle>
-                  </div>
-                  <CardDescription className="text-sm line-clamp-2">
-                    {comparison.description}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-3">
-                  <div className="flex flex-wrap gap-1.5">
-                    {comparison.tags.map((tag) => (
-                      <Badge key={tag} variant="secondary" className="text-xs">
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Avatar className="size-6">
-                      <AvatarFallback className="text-[10px]">
-                        {comparison.author.split(" ").map((n) => n[0]).join("")}
-                      </AvatarFallback>
-                    </Avatar>
-                    <span className="text-xs">{comparison.author}</span>
-                  </div>
-
-                  <div className="flex items-center justify-between pt-2 border-t">
-                    <span className="text-sm text-muted-foreground">
-                      {comparison.items.join(" vs ")}
-                    </span>
-                    <div className="flex items-center gap-3 text-sm">
-                      <span className="flex items-center gap-1 text-muted-foreground">
-                        <Eye className="size-3.5" />
-                        {comparison.views.toLocaleString()}
-                      </span>
-                      <span className="font-semibold text-foreground bg-primary/10 px-2 py-0.5 rounded">
-                        {comparison.overallScore}/10
-                      </span>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
-        </div>
-      ) : (
-        <Card className="p-8 text-center">
-          <div className="flex flex-col items-center gap-4">
-            <div className="size-12 rounded-full bg-muted flex items-center justify-center">
-              <Search className="size-6 text-muted-foreground" />
-            </div>
-            <div>
-              <p className="font-medium">No comparisons found</p>
-              <p className="text-sm text-muted-foreground">
-                Try adjusting your search or filters
-              </p>
-            </div>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setSearchQuery("")
-                setSelectedCategory("All")
-              }}
-            >
-              Clear Filters
-            </Button>
-          </div>
-        </Card>
-      )}
-
-      <div className="flex justify-center">
-        <Button variant="outline" className="gap-2">
-          Load More
-        </Button>
-      </div>
-    </div>
-  )
-}

src/app/(main)/layout.tsx

@@ -1,174 +1,50 @@
-"use client"
-
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { Sparkles } from "lucide-react"
-import { Sparkles, Home, BarChart3, Compass, User, Menu, X, Search } from "lucide-react"
-import { useState } from "react"
-import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { Input } from "@/components/ui/input"
-import { cn } from "@/lib/utils"
-
-const navItems = [
-  { href: "/", label: "Home", icon: Home },
-  { href: "/compare", label: "Compare", icon: BarChart3 },
-  { href: "/explore", label: "Explore", icon: Compass },
-  { href: "/profile", label: "Profile", icon: User },
-]
-
-function NavSidebar({ className }: { className?: string }) {
-  const pathname = usePathname()
-
-  return (
-    <nav className={cn("flex flex-col gap-1", className)}>
-      {navItems.map((item) => {
-        const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
-        return (
-          <Link key={item.href} href={item.href}>
-            <Button
-              variant={isActive ? "secondary" : "ghost"}
-              className={cn(
-                "w-full justify-start gap-2",
-                isActive && "bg-muted text-primary font-medium"
-              )}
-            >
-              <item.icon className="size-4" />
-              {item.label}
-            </Button>
-          </Link>
-        )
-      })}
-    </nav>
-  )
-}
-
-function MobileNav() {
-  const pathname = usePathname()
-
-  return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:hidden">
-      <div className="flex items-center justify-around h-14">
-        {navItems.map((item) => {
-          const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
-          return (
-            <Link key={item.href} href={item.href} className="flex flex-col items-center gap-1 py-2 px-3">
-              <item.icon className={cn("size-5", isActive ? "text-primary" : "text-muted-foreground")} />
-              <span className={cn("text-xs", isActive ? "text-primary font-medium" : "text-muted-foreground")}>
-                {item.label}
-              </span>
-            </Link>
-          )
-        })}
-      </div>
-    </nav>
-  )
-}
 
 export default function MainLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState("")
-
   return (
     <div className="min-h-screen flex flex-col">
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-14 items-center px-4 mx-auto gap-4">
+        <div className="container flex h-14 items-center px-4 mx-auto">
-          <Link href="/" className="flex items-center gap-2 font-semibold shrink-0">
+          <Link href="/" className="flex items-center gap-2 font-semibold mr-8">
             <Sparkles className="size-5 text-primary" />
-            <span className="text-lg hidden sm:inline">ComparAIson</span>
+            <span className="text-lg">ComparAIson</span>
           </Link>
 
-          <div className="flex-1 max-w-md mx-auto hidden md:block">
+          <div className="flex-1 max-w-md">
             <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+              <input
-              <Input
                 type="search"
                 placeholder="Search comparisons..."
-                value={searchQuery}
+                className="w-full h-8 rounded-lg border border-input bg-muted/50 px-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9 h-9"
               />
             </div>
           </div>
 
-          <div className="flex items-center gap-2 ml-auto">
+          <div className="flex items-center gap-3 ml-auto">
-            <Link href="/compare" className="hidden sm:block">
+            <Link href="/compare">
-              <Button size="sm" className="gap-2">
+              <button className="h-8 px-3 rounded-lg text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/80 transition-colors">
-                <Sparkles className="size-3.5" />
                 New Comparison
-              </Button>
+              </button>
             </Link>
-
+            <div className="size-8 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground">
-            <DropdownMenu>
+              U
-              <DropdownMenuTrigger className="rounded-full">
+            </div>
-                <Avatar className="size-8">
-                  <AvatarImage src="/placeholder-avatar.png" />
-                  <AvatarFallback className="bg-primary/10 text-primary font-medium">U</AvatarFallback>
-                </Avatar>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <Link href="/profile" className="w-full">Profile</Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Link href="/compare" className="w-full">New Comparison</Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <Link href="/sign-in" className="w-full">Sign Out</Link>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <Button
-              variant="ghost"
-              size="icon"
-              className="md:hidden"
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            >
-              {mobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
-            </Button>
           </div>
         </div>
-
-        {mobileMenuOpen && (
-          <div className="border-t md:hidden bg-background p-4">
-            <div className="relative mb-4">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search comparisons..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9"
-              />
-            </div>
-            <NavSidebar />
-          </div>
-        )}
       </header>
 
-      <div className="flex flex-1">
+      <main className="flex-1">{children}</main>
-        <aside className="hidden md:block w-52 border-r bg-muted/20 p-4 shrink-0">
-          <NavSidebar />
-        </aside>
 
-        <main className="flex-1 pb-16 md:pb-0">{children}</main>
+      <footer className="border-t py-4">
-      </div>
-
-      <MobileNav />
-
-      <footer className="border-t py-4 hidden md:block">
         <div className="container mx-auto px-4 text-center text-xs text-muted-foreground">
           ComparAIson — AI-powered deep research comparisons
         </div>
       </footer>
     </div>
   )
-}
+}

src/app/(main)/profile/page.tsx

@@ -1,157 +0,0 @@
-"use client"
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { BarChart3, Eye, Calendar, Plus, ArrowRight } from "lucide-react"
-import Link from "next/link"
-
-const mockUser = {
-  name: "Alex Johnson",
-  email: "alex@example.com",
-  avatar: "/placeholder-avatar.png",
-}
-
-const mockComparisons = [
-  {
-    id: "1",
-    title: "React vs Vue vs Svelte",
-    items: ["React", "Vue", "Svelte"],
-    tags: ["Tech", "JavaScript"],
-    overallScore: 8.5,
-    views: 1247,
-    createdAt: "2024-01-15",
-  },
-  {
-    id: "2",
-    title: "GPT-4 vs Claude vs Gemini",
-    items: ["GPT-4", "Claude 3", "Gemini Pro"],
-    tags: ["AI", "Products"],
-    overallScore: 8.8,
-    views: 3891,
-    createdAt: "2024-01-10",
-  },
-  {
-    id: "3",
-    title: "Notion vs Obsidian vs Roam",
-    items: ["Notion", "Obsidian", "Roam Research"],
-    tags: ["Productivity"],
-    overallScore: 7.5,
-    views: 892,
-    createdAt: "2024-01-05",
-  },
-]
-
-const stats = [
-  { label: "Total Comparisons", value: 12, icon: BarChart3 },
-  { label: "Total Views", value: "8.2K", icon: Eye },
-]
-
-export default function ProfilePage() {
-  return (
-    <div className="max-w-4xl mx-auto p-4 sm:p-6 space-y-8">
-      <div className="flex items-center gap-6">
-        <Avatar className="size-20">
-          <AvatarImage src={mockUser.avatar} />
-          <AvatarFallback className="text-2xl bg-primary/10 text-primary font-semibold">
-            {mockUser.name.split(" ").map((n) => n[0]).join("")}
-          </AvatarFallback>
-        </Avatar>
-        <div className="space-y-1.5">
-          <h1 className="text-2xl font-bold">{mockUser.name}</h1>
-          <p className="text-muted-foreground">{mockUser.email}</p>
-        </div>
-      </div>
-
-      <div className="grid gap-4 sm:grid-cols-2">
-        {stats.map((stat) => (
-          <Card key={stat.label}>
-            <CardContent className="flex items-center gap-4 p-4">
-              <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
-                <stat.icon className="size-5 text-primary" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold">{stat.value}</p>
-                <p className="text-sm text-muted-foreground">{stat.label}</p>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-xl font-semibold">My Comparisons</h2>
-          <Link href="/compare">
-            <Button size="sm" className="gap-2">
-              <Plus className="size-4" />
-              New Comparison
-            </Button>
-          </Link>
-        </div>
-
-        {mockComparisons.length > 0 ? (
-          <div className="grid gap-4 sm:grid-cols-2">
-            {mockComparisons.map((comparison) => (
-              <Link key={comparison.id} href={`/compare/${comparison.id}`}>
-                <Card className="h-full transition-all hover:border-primary hover:shadow-md">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="text-base line-clamp-1">{comparison.title}</CardTitle>
-                    <CardDescription className="flex items-center gap-2 text-xs">
-                      <Calendar className="size-3.5" />
-                      {comparison.createdAt}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3">
-                    <div className="flex flex-wrap gap-1.5">
-                      {comparison.tags.map((tag) => (
-                        <Badge key={tag} variant="secondary" className="text-xs">
-                          {tag}
-                        </Badge>
-                      ))}
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-muted-foreground">
-                        {comparison.items.join(" vs ")}
-                      </span>
-                      <div className="flex items-center gap-3 text-sm text-muted-foreground">
-                        <span className="flex items-center gap-1">
-                          <Eye className="size-3.5" />
-                          {comparison.views.toLocaleString()}
-                        </span>
-                        <span className="font-semibold text-foreground">
-                          {comparison.overallScore}/10
-                        </span>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </Link>
-            ))}
-          </div>
-        ) : (
-          <Card className="p-8 text-center">
-            <div className="flex flex-col items-center gap-4">
-              <div className="size-12 rounded-full bg-muted flex items-center justify-center">
-                <BarChart3 className="size-6 text-muted-foreground" />
-              </div>
-              <div>
-                <p className="font-medium">No comparisons yet</p>
-                <p className="text-sm text-muted-foreground">
-                  Create your first comparison to get started
-                </p>
-              </div>
-              <Link href="/compare">
-                <Button className="gap-2">
-                  <Plus className="size-4" />
-                  Create Comparison
-                </Button>
-              </Link>
-            </div>
-          </Card>
-        )}
-      </div>
-    </div>
-  )
-}

src/app/page.tsx

@@ -1,186 +1,65 @@
-import Link from "next/link"
+import Image from "next/image";
-import { Sparkles, BarChart3, Search, Share2, ArrowRight, CheckCircle2 } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 
-const exampleComparisons = [
+export default function Home() {
-  {
-    title: "React vs Vue vs Svelte",
-    description: "Frontend framework comparison for modern web development",
-    tags: ["Tech", "JavaScript"],
-    items: ["React", "Vue", "Svelte"],
-    scores: [8.5, 7.8, 8.2],
-  },
-  {
-    title: "GPT-4 vs Claude vs Gemini",
-    description: "Comparing top AI language models for reasoning tasks",
-    tags: ["AI", "Products"],
-    items: ["GPT-4", "Claude 3", "Gemini Pro"],
-    scores: [8.8, 9.0, 8.4],
-  },
-  {
-    title: "Notion vs Obsidian vs Roam",
-    description: "Knowledge management tools for productivity",
-    tags: ["Products", "Productivity"],
-    items: ["Notion", "Obsidian", "Roam Research"],
-    scores: [7.5, 8.3, 7.2],
-  },
-  {
-    title: "AWS vs GCP vs Azure",
-    description: "Cloud platform comparison for enterprise infrastructure",
-    tags: ["Tech", "Cloud"],
-    items: ["AWS", "Google Cloud", "Microsoft Azure"],
-    scores: [9.0, 8.2, 8.5],
-  },
-]
-
-const features = [
-  {
-    icon: BarChart3,
-    title: "Rich Visualizations",
-    description: "Interactive radar charts, bar graphs, and comparison tables to understand your results at a glance.",
-  },
-  {
-    icon: Search,
-    title: "Deep Research",
-    description: "AI-powered research that gathers comprehensive data from multiple sources for each item.",
-  },
-  {
-    icon: Share2,
-    title: "Save & Share",
-    description: "Keep your comparisons private or share them with the world. Build a library of research.",
-  },
-]
-
-export default function HomePage() {
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <section className="flex-1 flex flex-col items-center justify-center py-20 px-4 bg-gradient-to-b from-background to-muted/30">
+      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <div className="max-w-3xl mx-auto text-center space-y-8">
+        <Image
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
+          className="dark:invert"
-            <Sparkles className="size-4" />
+          src="/next.svg"
-            AI-Powered Research
+          alt="Next.js logo"
-          </div>
+          width={100}
-
+          height={20}
-          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
+          priority
-            Compare Anything with{" "}
+        />
-            <span className="text-primary">AI-Powered</span> Deep Research
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
           </h1>
-
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-          <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto">
+            Looking for a starting point or more instructions? Head over to{" "}
-            Stop spending hours researching. Let AI do the work for you with comprehensive,
+            <a
-            multi-dimensional comparisons on anything you can think of.
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
           </p>
-
-          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
-            <Link href="/compare">
-              <Button size="lg" className="gap-2 text-lg px-8">
-                <Sparkles className="size-5" />
-                Start Comparing
-                <ArrowRight className="size-4" />
-              </Button>
-            </Link>
-            <Link href="/explore">
-              <Button size="lg" variant="outline" className="text-lg px-8">
-                Explore Examples
-              </Button>
-            </Link>
-          </div>
         </div>
-      </section>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-
+          <a
-      <section className="py-16 px-4 bg-muted/20">
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-        <div className="max-w-5xl mx-auto">
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          <h2 className="text-2xl font-bold text-center mb-10">Example Comparisons</h2>
+            target="_blank"
-
+            rel="noopener noreferrer"
-          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          >
-            {exampleComparisons.map((example) => (
+            <Image
-              <Link key={example.title} href="/compare" className="group">
+              className="dark:invert"
-                <Card className="h-full transition-all group-hover:border-primary group-hover:shadow-md">
+              src="/vercel.svg"
-                  <CardHeader className="pb-3">
+              alt="Vercel logomark"
-                    <div className="flex items-center gap-2 mb-2">
+              width={16}
-                      <span className="text-lg font-bold">{example.title}</span>
+              height={16}
-                    </div>
+            />
-                    <CardDescription className="text-sm line-clamp-2">
+            Deploy Now
-                      {example.description}
+          </a>
-                    </CardDescription>
+          <a
-                  </CardHeader>
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-                  <CardContent className="space-y-3">
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-                    <div className="flex flex-wrap gap-1.5">
+            target="_blank"
-                      {example.tags.map((tag) => (
+            rel="noopener noreferrer"
-                        <span
+          >
-                          key={tag}
+            Documentation
-                          className="px-2 py-0.5 rounded-full bg-muted text-xs font-medium"
+          </a>
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                    <div className="flex items-center justify-between text-sm">
-                      <span className="text-muted-foreground">
-                        {example.items.slice(0, 2).join(" vs ")}
-                        {example.items.length > 2 && ` vs ${example.items.length - 2}+`}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      {example.scores.slice(0, 3).map((score, i) => (
-                        <div
-                          key={i}
-                          className="h-1 flex-1 rounded-full bg-primary/30"
-                          style={{ width: `${score * 10}%` }}
-                        />
-                      ))}
-                    </div>
-                  </CardContent>
-                </Card>
-              </Link>
-            ))}
-          </div>
         </div>
-      </section>
+      </main>
-
-      <section className="py-20 px-4">
-        <div className="max-w-4xl mx-auto">
-          <h2 className="text-2xl font-bold text-center mb-12">Why ComparAIson?</h2>
-
-          <div className="grid gap-8 sm:grid-cols-3">
-            {features.map((feature) => (
-              <div key={feature.title} className="flex flex-col items-center text-center space-y-3">
-                <div className="size-12 rounded-xl bg-primary/10 flex items-center justify-center">
-                  <feature.icon className="size-6 text-primary" />
-                </div>
-                <h3 className="font-semibold text-lg">{feature.title}</h3>
-                <p className="text-muted-foreground text-sm">{feature.description}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section className="py-16 px-4 bg-primary text-primary-foreground">
-        <div className="max-w-2xl mx-auto text-center space-y-6">
-          <h2 className="text-2xl sm:text-3xl font-bold">Ready to compare?</h2>
-          <p className="text-primary-foreground/80">
-            Start your first comparison in seconds. It&apos;s free to get started.
-          </p>
-          <Link href="/compare">
-            <Button size="lg" variant="secondary" className="gap-2 text-lg px-8">
-              <Sparkles className="size-5" />
-              Start Comparing
-            </Button>
-          </Link>
-        </div>
-      </section>
-
-      <footer className="border-t py-8 px-4">
-        <div className="max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-2">
-            <Sparkles className="size-4 text-primary" />
-            <span className="font-semibold">ComparAIson</span>
-          </div>
-          <p>AI-powered deep research comparisons</p>
-        </div>
-      </footer>
     </div>
-  )
+  );
-}
+}

src/lib/auth.ts

@@ -1,8 +1,10 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { db } from "./db";
+import * as schema from "./db/schema";
 
 export const auth = betterAuth({
-  database: drizzleAdapter(db, { provider: "pg" }),
+  database: drizzleAdapter(db, { provider: "pg", schema }),
   emailAndPassword: { enabled: true },
+  session: { expiresIn: 60 * 60 * 24 * 7 },
 });

src/lib/db/schema.ts

@@ -9,6 +9,27 @@ import {
   index,
 } from "drizzle-orm/pg-core";
 
+export const users = pgTable("users", {
+  id: text("id").primaryKey(),
+  name: text("name"),
+  email: text("email").notNull().unique(),
+  emailVerified: boolean("email_verified").default(false),
+  image: text("image"),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+  updatedAt: timestamp("updated_at").defaultNow().notNull(),
+});
+
+export const sessions = pgTable("sessions", {
+  id: text("id").primaryKey(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
+  token: text("token").notNull().unique(),
+  expiresAt: timestamp("expires_at").notNull(),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+  updatedAt: timestamp("updated_at").defaultNow().notNull(),
+});
+
 export const comparisons = pgTable(
   "comparisons",
   {

src/lib/llm/providers/openai.ts

@@ -6,9 +6,14 @@ import type {
   ItemResearch,
 } from "../types";
 
-const client = new OpenAI({
+let _client: OpenAI | null = null;
-  apiKey: process.env.OPENAI_API_KEY,
+
-});
+function getClient(): OpenAI {
+  if (!_client) {
+    _client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+  }
+  return _client;
+}
 
 const SYSTEM_PROMPT = `You are an expert research analyst. Your job is to compare items across multiple dimensions and produce structured, insightful comparison data.
 
@@ -105,7 +110,7 @@ Provide a comprehensive comparison with scores, pros/cons, and a recommendation.
 
   for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
     try {
-      const response = await client.chat.completions.create({
+      const response = await getClient().chat.completions.create({
         model: "gpt-4o-mini",
         messages: [
           { role: "system", content: SYSTEM_PROMPT },

src/middleware.ts

@@ -1,20 +1,29 @@
 import { NextRequest, NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 
-const publicPaths = ["/sign-in", "/sign-up", "/api/auth"];
+const publicPaths = ["/", "/explore", "/sign-in", "/sign-up", "/api/auth"];
+const protectedPaths = ["/compare", "/profile"];
 
 export async function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/favicon") ||
+    pathname.includes(".")
+  ) {
+    return NextResponse.next();
+  }
+
   const isPublic = publicPaths.some(
     (path) => pathname === path || pathname.startsWith(path + "/"),
   );
 
-  if (isPublic) {
+  const isProtected = protectedPaths.some(
-    return NextResponse.next();
+    (path) => pathname === path || pathname.startsWith(path + "/"),
-  }
+  );
 
-  if (pathname.startsWith("/_next") || pathname.startsWith("/favicon")) {
+  if (isPublic && !isProtected) {
     return NextResponse.next();
   }
 
@@ -22,7 +31,7 @@ export async function middleware(request: NextRequest) {
     headers: request.headers,
   });
 
-  if (!session) {
+  if (!session && isProtected) {
     const signInUrl = new URL("/sign-in", request.url);
     signInUrl.searchParams.set("callbackUrl", pathname);
     return NextResponse.redirect(signInUrl);