create-solostack 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-solostack",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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,219 @@ 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="PostgreSQL + Prisma"
+             details={status?.database?.connected ? \`User count: \${status.database.userCount}\` : status?.database?.error || "Not connected"}
+             actionLabel="Open Studio"
+             actionCommand="npm run db:studio"
+           />
+           <StatusCard 
+             title="Authentication" 
+             icon={<Shield className="w-5 h-5 text-blue-400" />}
+             status={status?.auth?.configured}
+             loading={loading}
+             description={status?.auth?.providers?.map((p: any) => p.name).join(', ') || "No providers"}
+             details={status?.auth?.configured ? "Ready to authenticate users" : "Missing secrets"}
+             actionLabel="Read Docs"
+             actionUrl="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);