create-solostack 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-solostack",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "The complete SaaS boilerplate for indie hackers - Next.js 15 with auth, payments, database, and email",
   "type": "module",
   "bin": {

package/src/constants.js

@@ -26,6 +26,8 @@ export const PACKAGE_VERSIONS = {
     'next-auth': '^5.0.0-beta.25',
     bcryptjs: '^2.4.3',
     '@types/bcryptjs': '^2.4.6',
+    '@supabase/ssr': '^0.0.10',
+    '@supabase/supabase-js': '^2.39.0',
 
     // Payments
     stripe: '^17.5.0',
@@ -70,6 +72,7 @@ export const DEFAULT_CONFIG = {
  */
 export const AUTH_PROVIDERS = [
     'NextAuth.js (Email + OAuth)',
+    'Supabase Auth',
 ];
 
 /**
@@ -77,6 +80,7 @@ export const AUTH_PROVIDERS = [
  */
 export const DATABASES = [
     'PostgreSQL + Prisma',
+    'Supabase',
 ];
 
 /**

package/src/generators/auth.js

@@ -2,11 +2,315 @@ import path from 'path';
 import { writeFile, ensureDir } from '../utils/files.js';
 
 /**
- * Generates NextAuth.js authentication configuration
+ * Generates authentication configuration (NextAuth or Supabase)
  * @param {string} projectPath - Path where the project is located
  * @param {string} authProvider - Auth provider type
  */
 export async function generateAuth(projectPath, authProvider) {
+  if (authProvider === 'Supabase Auth') {
+    await generateSupabaseAuth(projectPath);
+  } else {
+    await generateNextAuth(projectPath);
+  }
+}
+
+async function generateSupabaseAuth(projectPath) {
+  // Create utils directory
+  await ensureDir(path.join(projectPath, 'src/utils/supabase'));
+
+  // Create auth directories
+  await ensureDir(path.join(projectPath, 'src/app/auth/callback'));
+  await ensureDir(path.join(projectPath, 'src/app/login'));
+  await ensureDir(path.join(projectPath, 'src/app/private'));
+
+  // 1. Client Utility
+  const clientUtil = `import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+}
+`;
+  await writeFile(path.join(projectPath, 'src/utils/supabase/client.ts'), clientUtil);
+
+  // 2. Server Utility
+  const serverUtil = `import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export function createClient(cookieStore: ReturnType<typeof cookies>) {
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return cookieStore.get(name)?.value
+        },
+        set(name: string, value: string, options: CookieOptions) {
+          try {
+            cookieStore.set({ name, value, ...options })
+          } catch (error) {
+            // The \`set\` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
+        remove(name: string, options: CookieOptions) {
+          try {
+            cookieStore.set({ name, value: '', ...options })
+          } catch (error) {
+            // The \`delete\` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
+      },
+    }
+  )
+}
+`;
+  await writeFile(path.join(projectPath, 'src/utils/supabase/server.ts'), serverUtil);
+
+  // 3. MacOS/Middleware Utility
+  const middlewareUtil = `import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function updateSession(request: NextRequest) {
+  let response = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return request.cookies.get(name)?.value
+        },
+        set(name: string, value: string, options: CookieOptions) {
+          request.cookies.set({
+            name,
+            value,
+            ...options,
+          })
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          })
+          response.cookies.set({
+            name,
+            value,
+            ...options,
+          })
+        },
+        remove(name: string, options: CookieOptions) {
+          request.cookies.set({
+            name,
+            value: '',
+            ...options,
+          })
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          })
+          response.cookies.set({
+            name,
+            value: '',
+            ...options,
+          })
+        },
+      },
+    }
+  )
+
+  await supabase.auth.getUser()
+
+  return response
+}
+`;
+  await writeFile(path.join(projectPath, 'src/utils/supabase/middleware.ts'), middlewareUtil);
+
+  // 4. Root Middleware
+  const middleware = `import { type NextRequest } from 'next/server'
+import { updateSession } from '@/utils/supabase/middleware'
+
+export async function middleware(request: NextRequest) {
+  return await updateSession(request)
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * Feel free to modify this pattern to include more paths.
+     */
+    '/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}
+`;
+  await writeFile(path.join(projectPath, 'middleware.ts'), middleware);
+
+  // 5. Auth Callback Route
+  const routeCallback = `import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+import { createClient } from '@/utils/supabase/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const code = searchParams.get('code')
+  const next = searchParams.get('next') ?? '/'
+
+  if (code) {
+    const cookieStore = cookies()
+    const supabase = createClient(cookieStore)
+    const { error } = await supabase.auth.exchangeCodeForSession(code)
+    if (!error) {
+      return NextResponse.redirect(new URL(next, request.url))
+    }
+  }
+
+  // return the user to an error page with instructions
+  return NextResponse.redirect(new URL('/auth/auth-code-error', request.url))
+}
+`;
+  await writeFile(path.join(projectPath, 'src/app/auth/callback/route.ts'), routeCallback);
+
+  // 6. Login Page (Supabase UI)
+  const loginPage = `'use client';
+import { createClient } from '@/utils/supabase/client';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { Rocket } from 'lucide-react';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const supabase = createClient();
+
+  const handleEmailLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    if (error) setMessage(error.message);
+    else {
+      router.refresh();
+      router.push('/');
+    }
+    setLoading(false);
+  };
+
+  const handleGitHubLogin = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'github',
+      options: {
+        redirectTo: \`\${location.origin}/auth/callback\`,
+      },
+    });
+  };
+
+  const handleGoogleLogin = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: \`\${location.origin}/auth/callback\`,
+      },
+    });
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-zinc-950 p-4 text-white">
+      <div className="w-full max-w-sm space-y-8 rounded-xl border border-zinc-800 bg-zinc-900/50 p-8 shadow-xl backdrop-blur-xl">
+        <div className="text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-600">
+            <Rocket className="h-6 w-6 text-white" />
+          </div>
+          <h2 className="text-2xl font-bold tracking-tight">Welcome back</h2>
+          <p className="mt-2 text-sm text-zinc-400">Sign in to your account</p>
+        </div>
+
+        <div className="space-y-4">
+          <button 
+             onClick={handleGitHubLogin}
+             className="w-full rounded-md border border-zinc-700 bg-zinc-800 py-2 text-sm font-medium hover:bg-zinc-700 transition-colors"
+          >
+            Continue with GitHub
+          </button>
+          <button 
+             onClick={handleGoogleLogin}
+             className="w-full rounded-md border border-zinc-700 bg-zinc-800 py-2 text-sm font-medium hover:bg-zinc-700 transition-colors"
+          >
+            Continue with Google
+          </button>
+        </div>
+
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-zinc-800" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-zinc-900 px-2 text-zinc-500">Or continue with</span>
+          </div>
+        </div>
+
+        <form onSubmit={handleEmailLogin} className="space-y-4">
+          <div>
+            <label className="mb-2 block text-sm font-medium text-zinc-400">Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm placeholder:text-zinc-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              required
+            />
+          </div>
+          <div>
+            <label className="mb-2 block text-sm font-medium text-zinc-400">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm placeholder:text-zinc-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              required
+            />
+          </div>
+          
+          {message && <p className="text-sm text-red-400">{message}</p>}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-md bg-indigo-600 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/login/page.tsx'), loginPage);
+}
+
+async function generateNextAuth(projectPath) {
   // Create auth directory
   await ensureDir(path.join(projectPath, 'src/app/api/auth/[...nextauth]'));
   await ensureDir(path.join(projectPath, 'src/app/(auth)/login'));

package/src/generators/base.js

@@ -1,8 +1,8 @@
-import path from 'path';
+import path from 'path';
 import { writeFile, ensureDir } from '../utils/files.js';
 import { PACKAGE_VERSIONS } from '../constants.js';
 
-export async function generateBase(projectPath, projectName) {
+export async function generateBase(projectPath, projectName, config) {
   // Create project directory
   await ensureDir(projectPath);
 
@@ -45,6 +45,10 @@ export async function generateBase(projectPath, projectName) {
       '@radix-ui/react-label': '^2.0.2',
       'class-variance-authority': '^0.7.0',
       'tailwindcss-animate': '^1.0.7',
+      ...(config?.auth === 'Supabase Auth' || config?.database === 'Supabase' ? {
+        '@supabase/ssr': PACKAGE_VERSIONS['@supabase/ssr'],
+        '@supabase/supabase-js': PACKAGE_VERSIONS['@supabase/supabase-js'],
+      } : {}),
     },
     devDependencies: {
       typescript: PACKAGE_VERSIONS.typescript,
@@ -312,170 +316,204 @@ export default function RootLayout({
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { Rocket, Users, DollarSign, Code, Database, CreditCard, Mail, Lock, CheckCircle2, Trophy } from 'lucide-react';
+import { Rocket, Users, DollarSign, Code, Database, CreditCard, Mail, Lock, CheckCircle2, Trophy, ArrowRight, Play, TrendingUp, Box } from 'lucide-react';
 
 export default function Home() {
   const [mounted, setMounted] = useState(false);
-  const [mrr, setMrr] = useState(0);
-  const [users, setUsers] = useState(0);
-  const [clicks, setClicks] = useState(0);
-  const [shipped, setShipped] = useState(0);
+  const [stats, setStats] = useState({
+    mrr: 0,
+    users: 0,
+    shipped: 0
+  });
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  const ship = () => {
-    setClicks(prev => prev + 1);
-    setShipped(prev => prev + 1);
-    setUsers(prev => prev + Math.floor(Math.random() * 3) + 1);
-    
-    // Revenue logic
-    if (Math.random() > 0.7) {
-      setMrr(prev => prev + Math.floor(Math.random() * 20) + 10);
-    }
+  const incrementStats = () => {
+    setStats(prev => ({
+      mrr: prev.mrr + 100,
+      users: prev.users + 5,
+      shipped: prev.shipped + 1
+    }));
   };
 
-  if (!mounted) return (
-    <div className="min-h-screen bg-black text-white flex items-center justify-center">
-      <div className="animate-pulse">Loading SaaS...</div>
-    </div>
-  );
+  if (!mounted) return null;
 
   return (
-    <main className="min-h-screen bg-black text-white font-sans selection:bg-indigo-500/30 overflow-hidden">
-      {/* Background Gradient */}
-      <div className="fixed inset-0 z-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-900/20 via-black to-black pointer-events-none" />
-
-      <div className="relative z-10 max-w-6xl mx-auto px-4 py-12">
-        {/* Header */}
-        <header className="flex items-center justify-between mb-16">
-          <div className="flex items-center gap-2">
-            <div className="h-8 w-8 bg-indigo-600 rounded-lg flex items-center justify-center">
-              <Code className="h-5 w-5 text-white" />
-            </div>
-            <span className="font-bold text-xl tracking-tight">${projectName}</span>
-          </div>
-          
-          {process.env.NODE_ENV === 'development' && (
-             <Link 
-               href="/setup" 
-               className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 border border-zinc-800 rounded-full px-4 py-1.5 hover:border-zinc-600"
-             >
-               <CheckCircle2 className="h-4 w-4" />
-               Check Diagnostics
-             </Link>
-          )}
-        </header>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-24">
-          {/* Game Section */}
-          <div className="space-y-8">
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm border border-indigo-500/20">
-              <Rocket className="h-4 w-4" />
-              <span>Interactive SaaS Simulator</span>
-            </div>
-            
-            <h1 className="text-5xl md:text-6xl font-bold tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-white to-zinc-500">
-              Build your SaaS <br /> 
-              <span className="text-indigo-500">in minutes.</span>
-            </h1>
-            
-            <p className="text-xl text-zinc-400 max-w-lg leading-relaxed">
-              The ultimate Next.js 15 boilerplate for indie hackers. Authentication, Database, Payments, and Email - pre-configured and ready to ship.
-            </p>
-
-            {/* Game UI */}
-            <div className="bg-zinc-900/50 backdrop-blur-sm border border-zinc-800 rounded-2xl p-6 shadow-2xl relative overflow-hidden group/game">
-              <div className="absolute inset-0 bg-indigo-500/5 group-hover/game:bg-indigo-500/10 transition-colors pointer-events-none" />
-              
-              <div className="grid grid-cols-3 gap-4 mb-6 relative z-10">
-                <div className="bg-black/50 p-4 rounded-xl border border-zinc-800">
-                  <div className="text-zinc-500 text-xs uppercase font-semibold mb-1">MRR</div>
-                  <div className="text-2xl font-mono text-green-400 flex items-center">
-                    <DollarSign className="h-5 w-5 mr-1" />
-                    {mrr}
-                  </div>
-                </div>
-                <div className="bg-black/50 p-4 rounded-xl border border-zinc-800">
-                  <div className="text-zinc-500 text-xs uppercase font-semibold mb-1">Users</div>
-                  <div className="text-2xl font-mono text-blue-400 flex items-center">
-                    <Users className="h-5 w-5 mr-1" />
-                    {users}
-                  </div>
-                </div>
-                <div className="bg-black/50 p-4 rounded-xl border border-zinc-800">
-                  <div className="text-zinc-500 text-xs uppercase font-semibold mb-1">Shipped</div>
-                  <div className="text-2xl font-mono text-purple-400 flex items-center">
-                    <Trophy className="h-5 w-5 mr-1" />
-                    {shipped}
-                  </div>
-                </div>
+    <div className="min-h-screen bg-zinc-950 text-zinc-50 font-sans selection:bg-indigo-500/30">
+      
+      {/* Navigation */}
+      <nav className="fixed w-full z-50 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-md">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16 items-center">
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 bg-indigo-600 rounded-lg flex items-center justify-center">
+                <Rocket className="h-5 w-5 text-white" />
               </div>
-
-              <button
-                onClick={ship}
-                className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-4 rounded-xl transition-all active:scale-95 shadow-[0_0_20px_rgba(79,70,229,0.3)] hover:shadow-[0_0_30px_rgba(79,70,229,0.5)] flex items-center justify-center gap-3 group relative z-10"
+              <span className="text-xl font-bold tracking-tight">${projectName}</span>
+            </div>
+            <div className="flex items-center gap-4">
+               {process.env.NODE_ENV === 'development' && (
+                <Link
+                  href="/setup"
+                  className="text-sm font-medium text-zinc-400 hover:text-white transition-colors flex items-center gap-2"
+                >
+                  <CheckCircle2 className="h-4 w-4" />
+                  Diagnostics
+                </Link>
+              )}
+              <Link 
+                href="/login"
+                className="text-sm font-medium text-zinc-400 hover:text-white transition-colors"
+              >
+                Sign In
+              </Link>
+              <Link
+                href="/signup"
+                className="inline-flex items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-zinc-950 shadow-sm hover:bg-zinc-200 transition-colors"
               >
-                <Rocket className="h-6 w-6 group-hover:rotate-12 transition-transform" />
-                SHIP FEATURE
-              </button>
-              
-              <p className="text-center text-zinc-500 text-xs mt-4 relative z-10">
-                Click to simulate your indie hacker journey! 🚀
-              </p>
+                Get Started
+              </Link>
             </div>
           </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <div className="relative pt-32 pb-20 sm:pt-40 sm:pb-24 overflow-hidden">
+        
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center z-10">
+          <div className="inline-flex items-center rounded-full border border-zinc-800 bg-zinc-900/50 px-3 py-1 text-sm text-zinc-400 mb-8 backdrop-blur-xl">
+            <span className="flex h-2 w-2 rounded-full bg-emerald-500 mr-2 animate-pulse"></span>
+            v1.2.1 is now live
+          </div>
+          
+          <h1 className="text-5xl sm:text-7xl font-bold tracking-tight mb-8 bg-gradient-to-b from-white to-zinc-500 bg-clip-text text-transparent pb-2">
+            Build your SaaS <br className="hidden sm:block" />
+            <span className="text-white">in record time.</span>
+          </h1>
+          
+          <p className="mt-4 text-xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+            The modern stack for ambitious developers. Authentication, payments, database, and emails — configured and ready to scale.
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link
+              href="/signup"
+              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-8 py-3.5 text-sm font-semibold text-white shadow-lg hover:bg-indigo-500 transition-all hover:scale-105 active:scale-95"
+            >
+              Start Building <ArrowRight className="h-4 w-4" />
+            </Link>
+            <a
+              href="https://github.com/yourusername/create-solostack"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 px-8 py-3.5 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:text-white transition-all backdrop-blur-sm"
+            >
+              Star on GitHub
+            </a>
+          </div>
 
-          {/* Cards Section */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="p-6 rounded-2xl bg-zinc-900/30 border border-zinc-800 hover:border-zinc-600 transition-colors group">
-              <div className="h-10 w-10 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 group-hover:bg-zinc-700 transition-colors">
-                <Lock className="h-5 w-5 text-indigo-400" />
-              </div>
-              <h3 className="text-lg font-semibold mb-2 text-white">Authentication</h3>
-              <p className="text-zinc-400 text-sm">
-                NextAuth.js v5 pre-configured with Google & GitHub OAuth.
-              </p>
-            </div>
-
-            <div className="p-6 rounded-2xl bg-zinc-900/30 border border-zinc-800 hover:border-zinc-600 transition-colors group">
-              <div className="h-10 w-10 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 group-hover:bg-zinc-700 transition-colors">
-                <Database className="h-5 w-5 text-emerald-400" />
-              </div>
-              <h3 className="text-lg font-semibold mb-2 text-white">Database</h3>
-              <p className="text-zinc-400 text-sm">
-                Prisma ORM with PostgreSQL. Complete schema for Users and Subs.
-              </p>
-            </div>
+          {/* Interactive Game: SaaS Simulator */}
+          <div className="mt-20 max-w-4xl mx-auto">
+             <div className="relative rounded-xl border border-zinc-800 bg-zinc-900/50 p-2 backdrop-blur-xl shadow-2xl">
+               <div className="absolute -inset-1 rounded-xl bg-gradient-to-r from-indigo-500/20 via-purple-500/20 to-pink-500/20 blur opacity-75"></div>
+               <div className="relative rounded-lg bg-zinc-950 p-8">
+                 <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+                    <div className="p-4 rounded-lg bg-zinc-900/50 border border-zinc-800">
+                      <div className="flex items-center gap-2 text-zinc-400 mb-2">
+                        <TrendingUp className="h-4 w-4 text-emerald-500" /> MRR
+                      </div>
+                      <div className="text-3xl font-mono font-bold text-white">
+                        \${stats.mrr.toLocaleString()}
+                      </div>
+                    </div>
+                    <div className="p-4 rounded-lg bg-zinc-900/50 border border-zinc-800">
+                      <div className="flex items-center gap-2 text-zinc-400 mb-2">
+                        <Users className="h-4 w-4 text-blue-500" /> Users
+                      </div>
+                      <div className="text-3xl font-mono font-bold text-white">
+                        {stats.users.toLocaleString()}
+                      </div>
+                    </div>
+                    <div className="p-4 rounded-lg bg-zinc-900/50 border border-zinc-800">
+                      <div className="flex items-center gap-2 text-zinc-400 mb-2">
+                         <Box className="h-4 w-4 text-purple-500" /> Shipped
+                      </div>
+                      <div className="text-3xl font-mono font-bold text-white">
+                         {stats.shipped}
+                      </div>
+                    </div>
+                 </div>
+                 
+                 <div className="text-center">
+                    <p className="text-zinc-500 mb-6 font-mono text-sm">
+                      > CLICK_BELOW_TO_SIMULATE_GROWTH.exe
+                    </p>
+                    <button 
+                      onClick={incrementStats}
+                      className="group relative inline-flex items-center justify-center rounded-full bg-zinc-100 px-8 py-4 font-bold text-zinc-950 transition-all hover:scale-105 active:scale-95 shadow-lg hover:shadow-indigo-500/20"
+                    >
+                      <Play className="mr-2 h-5 w-5 fill-zinc-950 transition-transform group-hover:translate-x-1" />
+                      SHIP FEATURE
+                    </button>
+                    <p className="mt-4 text-xs text-zinc-600">
+                      * Results may vary. Consistency is key.
+                    </p>
+                 </div>
+               </div>
+             </div>
+          </div>
+        </div>
 
-            <div className="p-6 rounded-2xl bg-zinc-900/30 border border-zinc-800 hover:border-zinc-600 transition-colors group">
-              <div className="h-10 w-10 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 group-hover:bg-zinc-700 transition-colors">
-                <CreditCard className="h-5 w-5 text-pink-400" />
-              </div>
-              <h3 className="text-lg font-semibold mb-2 text-white">Payments</h3>
-              <p className="text-zinc-400 text-sm">
-                Stripe integration with Webhook idempotency and Customer Portal.
-              </p>
-            </div>
+        {/* Background Gradients */}
+        <div className="absolute top-0 left-0 right-0 h-[500px] bg-[radial-gradient(circle_at_50%_0%,rgba(99,102,241,0.15),transparent_70%)] pointer-events-none"></div>
+      </div>
 
-            <div className="p-6 rounded-2xl bg-zinc-900/30 border border-zinc-800 hover:border-zinc-600 transition-colors group">
-              <div className="h-10 w-10 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 group-hover:bg-zinc-700 transition-colors">
-                <Mail className="h-5 w-5 text-blue-400" />
-              </div>
-              <h3 className="text-lg font-semibold mb-2 text-white">Emails</h3>
-              <p className="text-zinc-400 text-sm">
-                Resend + React Email based transactional emails.
-              </p>
-            </div>
+      {/* Features Grid */}
+      <div className="py-24 border-t border-zinc-900 bg-zinc-950">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <FeatureCard 
+              icon={<Lock className="h-6 w-6 text-indigo-400" />}
+              title="Authentication"
+              description="Secure user management with NextAuth or Supabase. Login, signup, and protected routes."
+            />
+            <FeatureCard 
+              icon={<Database className="h-6 w-6 text-emerald-400" />}
+              title="Database"
+              description="Type-safe data access with Prisma and PostgreSQL. Seeding scripts included."
+            />
+            <FeatureCard 
+              icon={<CreditCard className="h-6 w-6 text-purple-400" />}
+              title="Payments"
+              description="Stripe integration with checkout sessions, webhooks, and subscription management."
+            />
+            <FeatureCard 
+              icon={<Mail className="h-6 w-6 text-pink-400" />}
+              title="Emails"
+              description="Transactional emails with Resend and React Email. Beautiful templates out of the box."
+            />
           </div>
         </div>
+      </div>
 
-        <div className="text-center text-zinc-500 text-sm">
-          Get started by editing <code className="bg-zinc-900 border border-zinc-700 px-2 py-1 rounded text-zinc-300 font-mono">src/app/page.tsx</code>
+      {/* Footer */}
+      <footer className="border-t border-zinc-900 bg-zinc-950 py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
+           <div className="flex items-center gap-2">
+              <div className="h-6 w-6 bg-zinc-800 rounded flex items-center justify-center">
+                <Rocket className="h-3 w-3 text-zinc-400" />
+              </div>
+              <span className="text-sm font-semibold text-zinc-300">${projectName}</span>
+           </div>
+           <p className="text-sm text-zinc-500">
+             Built with create-solostack.
+           </p>
         </div>
-      </div>
-    </main>
+      </footer>
+    </div>
   );
 }
 `;
@@ -484,52 +522,57 @@ export default function Home() {
 
   // Generate .env.example
   const envExample = `# Database
-DATABASE_URL="postgresql://user:password@localhost:5432/dbname"
-# For cloud databases, add ?sslmode=require to the connection string
+  DATABASE_URL = "postgresql://user:password@localhost:5432/dbname"
+# For cloud databases, add ? sslmode = require to the connection string
 
 # NextAuth
-NEXTAUTH_SECRET="" # Generate with: openssl rand -base64 32
-NEXTAUTH_URL="http://localhost:3000"
+  NEXTAUTH_SECRET = "" # Generate with: openssl rand - base64 32
+  NEXTAUTH_URL = "http://localhost:3000"
 # In production, set to your domain: https://yourdomain.com
 
 # Stripe
-STRIPE_SECRET_KEY="sk_test_..."
-STRIPE_WEBHOOK_SECRET="whsec_..."
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
+  STRIPE_SECRET_KEY = "sk_test_..."
+  STRIPE_WEBHOOK_SECRET = "whsec_..."
+  NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test_..."
 # Create price IDs in Stripe Dashboard -> Products
-STRIPE_PRO_PRICE_ID="price_..." # Monthly Pro plan price ID
-STRIPE_ENTERPRISE_PRICE_ID="price_..." # Monthly Enterprise plan price ID
+  STRIPE_PRO_PRICE_ID = "price_..." # Monthly Pro plan price ID
+  STRIPE_ENTERPRISE_PRICE_ID = "price_..." # Monthly Enterprise plan price ID
 
 # Resend
-RESEND_API_KEY="re_..."
-FROM_EMAIL="onboarding@resend.dev" # Use your verified domain
+  RESEND_API_KEY = "re_..."
+  FROM_EMAIL = "onboarding@resend.dev" # Use your verified domain
 
-# OAuth Providers (Optional)
+# OAuth Providers(Optional)
 # Google: https://console.cloud.google.com/apis/credentials
-GOOGLE_CLIENT_ID=""
-GOOGLE_CLIENT_SECRET=""
+  GOOGLE_CLIENT_ID = ""
+  GOOGLE_CLIENT_SECRET = ""
 # GitHub: https://github.com/settings/developers
-GITHUB_CLIENT_ID=""
-GITHUB_CLIENT_SECRET=""
-`;
+  GITHUB_CLIENT_ID = ""
+  GITHUB_CLIENT_SECRET = ""${config?.auth === 'Supabase Auth' || config?.database === 'Supabase' ? `
+
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
+NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-key"` : ''
+    }
+  `;
 
   await writeFile(path.join(projectPath, '.env.example'), envExample);
 
   // Generate README.md
-  const readme = `# ${projectName}
+  const readme = "# " + projectName + `
 
 Built with [SoloStack](https://github.com/yourusername/create-solostack) - The complete SaaS boilerplate for indie hackers.
 
 ## Features
 
-- ✅ **Next.js 15** with App Router
-- ✅ **TypeScript** for type safety
-- ✅ **Tailwind CSS** for styling
-- ✅ **Prisma** + PostgreSQL for database
-- ✅ **NextAuth.js** for authentication
-- ✅ **Stripe** for payments
-- ✅ **Resend** for emails
-- ✅ **shadcn/ui** components
+  - ✅ ** Next.js 15 ** with App Router
+    - ✅ ** TypeScript ** for type safety
+      - ✅ ** Tailwind CSS ** for styling
+        - ✅ ** Prisma ** + PostgreSQL for database
+          - ✅ ** NextAuth.js ** for authentication
+            - ✅ ** Stripe ** for payments
+              - ✅ ** Resend ** for emails
+                - ✅ ** shadcn / ui ** components
 
 ## Getting Started
 
@@ -566,16 +609,16 @@ Open [http://localhost:3000](http://localhost:3000) with your browser.
 
 \`\`\`
 ${projectName}/
-├── prisma/              # Database schema and migrations
-├── public/              # Static assets
-├── src/
-│   ├── app/            # Next.js app directory
-│   │   ├── api/        # API routes
-│   │   ├── (auth)/     # Auth pages
-│   │   └── dashboard/  # Protected pages
-│   ├── components/     # React components
-│   └── lib/            # Utilities and configurations
-└── package.json
+├── prisma/              # Database schema and migrations
+├── public/              # Static assets
+├── src/
+│   ├── app/            # Next.js app directory
+│   │   ├── api/        # API routes
+│   │   ├── (auth)/     # Auth pages
+│   │   └── dashboard/  # Protected pages
+│   ├── components/     # React components
+│   └── lib/            # Utilities and configurations
+└── package.json
 \`\`\`
 
 ## Available Scripts

package/src/generators/database.js

@@ -4,22 +4,89 @@ import { writeFile, ensureDir } from '../utils/files.js';
 /**
  * Generates Prisma database configuration
  * @param {string} projectPath - Path where the project is located
- * @param {string} database - Database type (currently only PostgreSQL supported)
+ * @param {object} config - Configuration object
  */
-export async function generateDatabase(projectPath, database) {
+export async function generateDatabase(projectPath, config) {
   // Create prisma directory
   await ensureDir(path.join(projectPath, 'prisma'));
 
-  // Generate schema.prisma
-  const schemaPrisma = `generator client {
-  provider = "prisma-client-js"
+  // Define schema based on Auth provider
+  const isSupabaseAuth = config.auth === 'Supabase Auth';
+
+  let schemaModels = '';
+
+  if (isSupabaseAuth) {
+    // Schema for Supabase Auth (simplified User, no adapter tables)
+    schemaModels = `
+model User {
+  id                String         @id @default(uuid())
+  email             String         @unique
+  name              String?
+  image             String?
+  stripeCustomerId  String?        @unique
+  subscription      Subscription?
+  createdAt         DateTime       @default(now())
+  updatedAt         DateTime       @updatedAt
+  
+  payments          Payment[]
 }
 
-datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
+// Note: Account, Session, VerificationToken are not needed for Supabase Auth
+
+model Subscription {
+  id                   String              @id @default(cuid())
+  userId               String              @unique
+  user                 User                @relation(fields: [userId], references: [id], onDelete: Cascade)
+  stripeSubscriptionId String              @unique
+  stripePriceId        String
+  status               SubscriptionStatus
+  currentPeriodStart   DateTime
+  currentPeriodEnd     DateTime
+  cancelAtPeriodEnd    Boolean             @default(false)
+  createdAt            DateTime            @default(now())
+  updatedAt            DateTime            @updatedAt
+}
+
+model Payment {
+  id               String   @id @default(cuid())
+  userId           String
+  user             User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  stripePaymentId  String   @unique
+  amount           Int      // In cents
+  currency         String   @default("usd")
+  status           String
+  createdAt        DateTime @default(now())
+  
+  @@index([userId])
+}
+
+model StripeEvent {
+  id               String   @id @default(cuid())
+  eventId          String   @unique  // Stripe event ID
+  type             String             // Event type (e.g., "checkout.session.completed")
+  processed        Boolean  @default(false)
+  createdAt        DateTime @default(now())
+  
+  @@index([eventId])
+  @@index([processed])
+}
+
+enum Role {
+  USER
+  ADMIN
 }
 
+enum SubscriptionStatus {
+  ACTIVE
+  CANCELED
+  PAST_DUE
+  TRIALING
+  INCOMPLETE
+}
+`;
+  } else {
+    // Standard Schema for NextAuth (with Adapter tables)
+    schemaModels = `
 model User {
   id                String         @id @default(cuid())
   email             String         @unique
@@ -124,6 +191,19 @@ enum SubscriptionStatus {
   TRIALING
   INCOMPLETE
 }
+`;
+  }
+
+  // Generate schema.prisma
+  const schemaPrisma = `generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+${schemaModels}
 `;
 
   await writeFile(path.join(projectPath, 'prisma/schema.prisma'), schemaPrisma);
@@ -143,7 +223,36 @@ if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;
   await writeFile(path.join(projectPath, 'src/lib/db.ts'), dbClient);
 
   // Generate seed script
-  const seedScript = `import { PrismaClient } from '@prisma/client';
+  let seedScript = '';
+
+  if (isSupabaseAuth) {
+    seedScript = `import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+async function main() {
+  console.log('🌱 Seeding database...');
+
+  console.log('⚠️  Using Supabase Auth: Users should be created via the Application UI or Supabase Dashboard.');
+  console.log('⚠️  Prisma seed will skip User creation to avoid conflicts with triggers/auth.users.');
+  
+  // Example of seeding other data if needed
+  // ...
+
+  console.log('🎉 Seeding complete!');
+}
+
+main()
+  .catch((e) => {
+    console.error('❌ Seeding failed:', e);
+    process.exit(1);
+  })
+  .finally(async () => {
+    await prisma.$disconnect();
+  });
+`;
+  } else {
+    seedScript = `import { PrismaClient } from '@prisma/client';
 import bcrypt from 'bcryptjs';
 
 const prisma = new PrismaClient();
@@ -194,12 +303,20 @@ main()
     await prisma.$disconnect();
   });
 `;
+  }
 
   await writeFile(path.join(projectPath, 'prisma/seed.ts'), seedScript);
 
   // Generate database migration guide
   const dbGuide = `# Database Setup Guide
-
+${isSupabaseAuth ? `
+## Supabase Setup (Important)
+Since you are using **Supabase Auth**, you should use Supabase as your database provider.
+
+1. Create a project at [supabase.com](https://supabase.com).
+2. Go to Project Settings -> Database -> Connection String.
+3. Copy the URI (Mode: Transaction or Session).
+` : ''}
 ## Initial Setup
 
 ### 1. Set up your PostgreSQL database
@@ -229,8 +346,8 @@ GRANT ALL PRIVILEGES ON DATABASE your_database_name TO your_user;
 \`\`\`
 
 **Option B: Cloud Database (Recommended for Production)**
+- [Supabase](https://supabase.com) - Free tier (Required if using Supabase Auth)
 - [Neon](https://neon.tech) - Free tier with PostgreSQL
-- [Supabase](https://supabase.com) - Free tier with PostgreSQL
 - [Railway](https://railway.app) - Easy PostgreSQL deployment
 - [Vercel Postgres](https://vercel.com/storage/postgres) - Serverless PostgreSQL
 
@@ -259,10 +376,11 @@ This command:
 npm run db:seed
 \`\`\`
 
+${!isSupabaseAuth ? `
 This creates:
 - Test user: test@example.com (password: password123)
 - Admin user: admin@example.com (password: password123)
-
+` : ''}
 ## Making Schema Changes
 
 ### 1. Edit prisma/schema.prisma
@@ -317,48 +435,6 @@ npx prisma migrate reset
 # View database structure
 npx prisma db pull
 \`\`\`
-
-## Backup & Restore
-
-### Backup
-\`\`\`bash
-pg_dump -U your_user -d your_database > backup.sql
-\`\`\`
-
-### Restore
-\`\`\`bash
-psql -U your_user -d your_database < backup.sql
-\`\`\`
-
-## Troubleshooting
-
-### Connection Issues
-- Verify DATABASE_URL is correct
-- Check if PostgreSQL is running
-- Ensure database exists
-- Check firewall settings for remote connections
-
-### Migration Conflicts
-\`\`\`bash
-# Reset migrations (development only)
-npx prisma migrate reset
-
-# Mark migration as applied without running
-npx prisma migrate resolve --applied migration_name
-\`\`\`
-
-### Performance
-- Add indexes for frequently queried fields
-- Use \`@@index\` in your schema
-- Monitor with \`EXPLAIN ANALYZE\` in PostgreSQL
-
-## Best Practices
-
-1. **Always backup before major migrations**
-2. **Test migrations on staging first**
-3. **Use migrations (not db push) in production**
-4. **Keep DATABASE_URL in .env, never commit it**
-5. **Use connection pooling for serverless (e.g., Prisma Data Proxy)**
 `;
 
   await writeFile(path.join(projectPath, 'prisma/DATABASE_GUIDE.md'), dbGuide);

package/src/index.js

@@ -68,13 +68,6 @@ export async function main() {
 
     // Ask configuration questions
     const config = await inquirer.prompt([
-        {
-            type: 'list',
-            name: 'auth',
-            message: 'Choose authentication:',
-            choices: AUTH_PROVIDERS,
-            default: AUTH_PROVIDERS[0],
-        },
         {
             type: 'list',
             name: 'database',
@@ -82,6 +75,13 @@ export async function main() {
             choices: DATABASES,
             default: DATABASES[0],
         },
+        {
+            type: 'list',
+            name: 'auth',
+            message: 'Choose authentication:',
+            choices: AUTH_PROVIDERS,
+            default: (answers) => answers.database === 'Supabase' ? 'Supabase Auth' : AUTH_PROVIDERS[0],
+        },
         {
             type: 'list',
             name: 'payments',
@@ -126,7 +126,7 @@ export async function main() {
 
         // Generate database integration
         spinner = ora('Configuring database').start();
-        await generateDatabase(projectPath, config.database);
+        await generateDatabase(projectPath, config);
         spinner.succeed('Configured database (Prisma + PostgreSQL)');
 
         // Generate authentication