create-solostack 1.2.1 → 1.2.3

package/package.json

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

package/src/generators/base.js

@@ -316,206 +316,220 @@ 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, ArrowRight, Play, TrendingUp, Box } from 'lucide-react';
+import { 
+  CheckCircle2, 
+  AlertCircle, 
+  Terminal, 
+  Database, 
+  Shield, 
+  CreditCard, 
+  Mail,
+  Loader2,
+  ChevronRight,
+  ExternalLink,
+  Book
+} from 'lucide-react';
 
 export default function Home() {
-  const [mounted, setMounted] = useState(false);
-  const [stats, setStats] = useState({
-    mrr: 0,
-    users: 0,
-    shipped: 0
-  });
+  const [status, setStatus] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    setMounted(true);
+    fetch('/api/setup')
+      .then(res => res.json())
+      .then(data => {
+        setStatus(data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
   }, []);
 
-  const incrementStats = () => {
-    setStats(prev => ({
-      mrr: prev.mrr + 100,
-      users: prev.users + 5,
-      shipped: prev.shipped + 1
-    }));
-  };
-
-  if (!mounted) return null;
-
   return (
     <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>
-              <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"
-              >
-                Get Started
-              </Link>
-            </div>
+      {/* Header */}
+      <header className="border-b border-zinc-900 bg-zinc-950/50 backdrop-blur-xl sticky top-0 z-10">
+        <div className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
+          <div className="font-bold text-lg tracking-tight flex items-center gap-2">
+            <div className="w-3 h-3 rounded-full bg-indigo-500 shadow-[0_0_10px_rgba(99,102,241,0.5)]" />
+            <span className="text-zinc-100">${projectName}</span>
           </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 className="flex items-center gap-4">
+             <span className="text-xs font-mono text-zinc-500 bg-zinc-900 px-2 py-1 rounded border border-zinc-800">
+                v0.1.0 (Dev Mode)
+             </span>
+             <a
+               href="https://github.com/danish296/create-solostack"
+               target="_blank"
+               rel="noreferrer"
+               className="text-zinc-400 hover:text-white transition-colors"
+             >
+               <ExternalLink className="w-4 h-4" />
+             </a>
           </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>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-6 py-12">
+        {/* Welcome Section */}
+        <div className="mb-12 border-b border-zinc-900 pb-12">
+          <h1 className="text-4xl font-bold tracking-tight mb-4 text-white">
+            Your Stack is Ready.
           </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 className="text-zinc-400 text-lg max-w-2xl leading-relaxed">
+            Welcome to your new SaaS application. This page is your 
+            <span className="text-zinc-200 font-medium"> local development hub</span>. 
+            Check your integrations, review the tech stack, and start building.
           </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 className="mt-8 flex items-center gap-4">
+            <div className="flex items-center gap-2 text-sm text-zinc-500 bg-zinc-900/50 px-3 py-2 rounded-md border border-zinc-800 font-mono">
+              <Terminal className="w-4 h-4 text-indigo-400" />
+              <span>src/app/page.tsx</span>
+            </div>
+            <span className="text-zinc-600 text-sm">← Edit this file to build your landing page</span>
           </div>
+        </div>
+
+        {/* System Status Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+           <StatusCard 
+             title="Database" 
+             icon={<Database className="w-5 h-5 text-emerald-400" />}
+             status={status?.database?.connected}
+             loading={loading}
+             description="${config?.database === 'Supabase' ? 'Supabase' : 'PostgreSQL + Prisma'}"
+             details={status?.database?.connected ? \`User count: \${status.database.userCount}\` : status?.database?.error || "Not connected"}
+             actionLabel="${config?.database === 'Supabase' ? 'Dashboard' : 'Open Studio'}"
+             actionCommand="${config?.database === 'Supabase' ? '' : 'npm run db:studio'}"
+             actionUrl="${config?.database === 'Supabase' ? 'https://supabase.com/dashboard' : ''}"
+           />
+           <StatusCard 
+             title="Authentication" 
+             icon={<Shield className="w-5 h-5 text-blue-400" />}
+             status={status?.auth?.configured}
+             loading={loading}
+             description={status?.auth?.type || status?.auth?.providers?.map((p: any) => p.name).join(', ') || "Not configured"}
+             details={status?.auth?.configured ? "Ready to authenticate users" : "Missing secrets"}
+             actionLabel="Read Docs"
+             actionUrl="${config?.auth === 'Supabase Auth' ? 'https://supabase.com/docs/guides/auth' : 'https://next-auth.js.org'}"
+           />
+           <StatusCard 
+             title="Payments" 
+             icon={<CreditCard className="w-5 h-5 text-purple-400" />}
+             status={status?.stripe?.configured}
+             loading={loading}
+             description="Stripe"
+             details={status?.stripe?.configured ? "API Keys present" : "Missing API Keys"}
+             actionLabel="Dashboard"
+             actionUrl="https://dashboard.stripe.com/test/apikeys"
+           />
+           <StatusCard 
+             title="Email" 
+             icon={<Mail className="w-5 h-5 text-pink-400" />}
+             status={status?.email?.configured}
+             loading={loading}
+             description="Resend"
+             details={status?.email?.configured ? "Ready to send" : "Missing API Key"}
+             actionLabel="Send Test"
+             actionUrl="/setup"
+           />
+        </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>
+        {/* Resources Section */}
+        <div>
+          <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
+            <Book className="w-5 h-5 text-zinc-400" /> 
+            Documentation & Resources
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+             <ResourceLink 
+               href="https://nextjs.org/docs" 
+               title="Next.js 15" 
+               desc="App Router, Server Actions" 
+             />
+             <ResourceLink 
+               href="https://ui.shadcn.com" 
+               title="shadcn/ui" 
+               desc="Component Library" 
+             />
+             <ResourceLink 
+               href="https://www.prisma.io/docs" 
+               title="Prisma" 
+               desc="Database ORM" 
+             />
           </div>
         </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>
+      </main>
+    </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>
+function StatusCard({ title, icon, status, loading, description, details, actionLabel, actionCommand, actionUrl }: any) {
+  return (
+    <div className="border border-zinc-800 bg-zinc-900/30 rounded-xl p-6 hover:bg-zinc-900/50 transition-colors">
+      <div className="flex justify-between items-start mb-4">
+        <div className="p-2 bg-zinc-950 rounded-lg border border-zinc-800">
+          {icon}
         </div>
+        {loading ? (
+          <Loader2 className="w-5 h-5 animate-spin text-zinc-600" />
+        ) : status ? (
+          <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+        ) : (
+          <AlertCircle className="w-5 h-5 text-amber-500" />
+        )}
+      </div>
+      
+      <h3 className="text-lg font-medium text-white mb-1">{title}</h3>
+      <p className="text-sm font-medium text-zinc-300 mb-2">{description}</p>
+      
+      <div className="min-h-[20px] mb-6">
+        <p className={\`text-xs \${status ? 'text-zinc-500' : 'text-amber-500/80'}\`}>
+          {details}
+        </p>
       </div>
 
-      {/* 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>
+      {actionCommand ? (
+        <div className="flex items-center justify-between pt-4 border-t border-zinc-800/50">
+           <code className="text-xs bg-black px-2 py-1 rounded text-zinc-400 font-mono">
+             {actionCommand}
+           </code>
+        </div>
+      ) : actionUrl ? (
+        <div className="pt-4 border-t border-zinc-800/50">
+           {actionUrl.startsWith('http') ? (
+             <a href={actionUrl} target="_blank" rel="noreferrer" className="text-xs font-medium text-indigo-400 hover:text-indigo-300 flex items-center gap-1">
+               {actionLabel} <ExternalLink className="w-3 h-3" />
+             </a>
+           ) : (
+              <Link href={actionUrl} className="text-xs font-medium text-indigo-400 hover:text-indigo-300 flex items-center gap-1">
+                {actionLabel} <ChevronRight className="w-3 h-3" />
+              </Link>
+           )}
         </div>
-      </footer>
+      ) : null}
     </div>
   );
 }
+
+function ResourceLink({ href, title, desc }: any) {
+  return (
+    <a 
+      href={href} 
+      target="_blank" 
+      rel="noreferrer"
+      className="group block p-4 rounded-lg border border-zinc-800 bg-zinc-900/20 hover:bg-zinc-800/50 transition-all"
+    >
+      <div className="flex items-center justify-between mb-1">
+        <span className="font-medium text-zinc-200 group-hover:text-white transition-colors">{title}</span>
+        <ExternalLink className="w-3 h-3 text-zinc-600 group-hover:text-zinc-400" />
+      </div>
+      <p className="text-xs text-zinc-500">{desc}</p>
+    </a>
+  );
+}
 `;
 
   await writeFile(path.join(projectPath, 'src/app/page.tsx'), pageTsx);

package/src/generators/setup.js

@@ -1,15 +1,17 @@
 import path from 'path';
 import { writeFile, ensureDir } from '../utils/files.js';
 
-export async function generateSetup(projectPath) {
-    // Create setup page directory
-    await ensureDir(path.join(projectPath, 'src/app/setup'));
+export async function generateSetup(projectPath, config) {
+  const isSupabaseAuth = config?.auth === 'Supabase Auth';
+  // Create setup page directory
+  await ensureDir(path.join(projectPath, 'src/app/setup'));
 
-    // Generate setup page UI
-    const setupPage = `'use client';
+  // Generate setup page UI
+  const setupPage = `'use client';
 
 import { useState, useEffect } from 'react';
-import { CheckCircle, XCircle, Loader2, AlertCircle, RefreshCw, Mail } from 'lucide-react';
+import Link from 'next/link';
+import { CheckCircle, XCircle, Loader2, AlertCircle, RefreshCw, Mail, ArrowLeft } from 'lucide-react';
 
 export default function SetupPage() {
   const [data, setData] = useState<any>(null);
@@ -70,6 +72,15 @@ export default function SetupPage() {
   return (
     <div className="min-h-screen bg-gray-50 p-8">
       <div className="mx-auto max-w-4xl space-y-8">
+        {/* Back to Home */}
+        <Link 
+          href="/" 
+          className="inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to Home
+        </Link>
+
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight">Setup & Diagnostics</h1>
@@ -240,14 +251,13 @@ function StatusIcon({ status }: { status: boolean }) {
 }
 `;
 
-    await writeFile(path.join(projectPath, 'src/app/setup/page.tsx'), setupPage);
+  await writeFile(path.join(projectPath, 'src/app/setup/page.tsx'), setupPage);
 
-    // Create API routes directory
-    await ensureDir(path.join(projectPath, 'src/app/api/setup'));
+  // Create API routes directory
+  await ensureDir(path.join(projectPath, 'src/app/api/setup'));
 
-    // Generate Setup API route
-    const setupApi = `import { NextResponse } from 'next/server';
-import { db } from '@/lib/db';
+  // Generate Setup API route
+  const setupApi = `import { NextResponse } from 'next/server';
 
 export async function GET() {
   if (process.env.NODE_ENV !== 'development') {
@@ -259,12 +269,15 @@ export async function GET() {
       connected: false,
       userCount: 0,
       error: null as string | null,
-      provider: 'PostgreSQL'
+      provider: '${isSupabaseAuth ? 'Supabase' : 'PostgreSQL'}'
     },
     auth: {
       configured: false,
-      hasSecret: !!process.env.NEXTAUTH_SECRET,
-      providers: [
+      type: '${isSupabaseAuth ? 'Supabase Auth' : 'NextAuth.js'}',
+      hasSecret: ${isSupabaseAuth ? '!!(process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)' : '!!process.env.NEXTAUTH_SECRET'},
+      providers: ${isSupabaseAuth ? `[
+        { name: 'Supabase', configured: !!(process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) }
+      ]` : `[
         { 
           name: 'Google', 
           clientId: !!process.env.GOOGLE_CLIENT_ID,
@@ -277,7 +290,7 @@ export async function GET() {
           clientSecret: !!process.env.GITHUB_CLIENT_SECRET,
           configured: !!(process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET)
         }
-      ]
+      ]`}
     },
     stripe: {
       configured: false,
@@ -293,6 +306,10 @@ export async function GET() {
 
   // Check Database
   try {
+    if (!process.env.DATABASE_URL${isSupabaseAuth ? ' && !process.env.NEXT_PUBLIC_SUPABASE_URL' : ''}) {
+      throw new Error('DATABASE_URL is not configured in .env');
+    }
+    const { db } = await import('@/lib/db');
     const userCount = await db.user.count();
     results.database.connected = true;
     results.database.userCount = userCount;
@@ -315,12 +332,12 @@ export async function GET() {
 }
 `;
 
-    await writeFile(path.join(projectPath, 'src/app/api/setup/route.ts'), setupApi);
+  await writeFile(path.join(projectPath, 'src/app/api/setup/route.ts'), setupApi);
 
-    // Generate Test Email API route
-    await ensureDir(path.join(projectPath, 'src/app/api/setup/test-email'));
+  // Generate Test Email API route
+  await ensureDir(path.join(projectPath, 'src/app/api/setup/test-email'));
 
-    const testEmailApi = `import { NextResponse, NextRequest } from 'next/server';
+  const testEmailApi = `import { NextResponse, NextRequest } from 'next/server';
 import { Resend } from 'resend';
 
 export async function POST(req: NextRequest) {
@@ -355,5 +372,5 @@ export async function POST(req: NextRequest) {
 }
 `;
 
-    await writeFile(path.join(projectPath, 'src/app/api/setup/test-email/route.ts'), testEmailApi);
+  await writeFile(path.join(projectPath, 'src/app/api/setup/test-email/route.ts'), testEmailApi);
 }

package/src/index.js

@@ -153,7 +153,7 @@ export async function main() {
 
         // Generate setup & diagnostics
         spinner = ora('Adding diagnostics page').start();
-        await generateSetup(projectPath);
+        await generateSetup(projectPath, config);
         spinner.succeed('Added diagnostics page (/setup)');
 
         // Install dependencies