create-solostack 1.0.3 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-solostack",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "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

@@ -1,59 +1,50 @@
 import path from 'path';
-import { writeFile, renderTemplateToFile, getTemplatePath, ensureDir } from '../utils/files.js';
+import { writeFile, ensureDir } from '../utils/files.js';
 import { PACKAGE_VERSIONS } from '../constants.js';
 
-/**
- * Generates the base Next.js 15 project structure
- * @param {string} projectPath - Path where the project should be generated
- * @param {string} projectName - Name of the project
- * @param {object} config - Project configuration
- */
-export async function generateBase(projectPath, projectName, config) {
-  // Create directory structure
+export async function generateBase(projectPath, projectName) {
+  // Create project directory
+  await ensureDir(projectPath);
+
+  // Create src/app directory
   await ensureDir(path.join(projectPath, 'src/app'));
-  await ensureDir(path.join(projectPath, 'src/components'));
-  await ensureDir(path.join(projectPath, 'src/lib'));
+
+  // Create public directory
   await ensureDir(path.join(projectPath, 'public'));
 
-  //Generate package.json
+  // Generate package.json
   const packageJson = {
     name: projectName,
     version: '0.1.0',
     private: true,
-    type: 'module',
+    type: "module",
     scripts: {
       dev: 'next dev',
       build: 'next build',
       start: 'next start',
       lint: 'next lint',
-      'db:push': 'prisma db push',
-      'db:seed': 'tsx prisma/seed.ts',
-      'db:studio': 'prisma studio',
+      "db:push": "prisma db push",
+      "db:seed": "tsx prisma/seed.ts",
+      "db:studio": "prisma studio",
+      postinstall: "prisma generate"
     },
     dependencies: {
       next: PACKAGE_VERSIONS.next,
       react: PACKAGE_VERSIONS.react,
-      'react-dom': PACKAGE_VERSIONS.reactDom,
-      '@prisma/client': PACKAGE_VERSIONS['@prisma/client'],
+      'react-dom': PACKAGE_VERSIONS['react-dom'],
       'next-auth': PACKAGE_VERSIONS['next-auth'],
-      bcryptjs: PACKAGE_VERSIONS.bcryptjs,
+      '@prisma/client': PACKAGE_VERSIONS['@prisma/client'],
       stripe: PACKAGE_VERSIONS.stripe,
       resend: PACKAGE_VERSIONS.resend,
-      '@react-email/components': PACKAGE_VERSIONS['@react-email/components'],
       zod: PACKAGE_VERSIONS.zod,
-      'react-hook-form': PACKAGE_VERSIONS['react-hook-form'],
-      '@hookform/resolvers': PACKAGE_VERSIONS['@hookform/resolvers'],
-      'class-variance-authority': PACKAGE_VERSIONS['class-variance-authority'],
-      clsx: PACKAGE_VERSIONS.clsx,
-      'tailwind-merge': PACKAGE_VERSIONS['tailwind-merge'],
-      'tailwindcss-animate': PACKAGE_VERSIONS['tailwindcss-animate'],
       'lucide-react': PACKAGE_VERSIONS['lucide-react'],
-      '@radix-ui/react-dropdown-menu': PACKAGE_VERSIONS['@radix-ui/react-dropdown-menu'],
+      'date-fns': PACKAGE_VERSIONS['date-fns'],
+      'clsx': PACKAGE_VERSIONS.clsx,
+      'tailwind-merge': PACKAGE_VERSIONS['tailwind-merge'],
       '@radix-ui/react-slot': PACKAGE_VERSIONS['@radix-ui/react-slot'],
-      '@radix-ui/react-toast': PACKAGE_VERSIONS['@radix-ui/react-toast'],
-      '@radix-ui/react-dialog': PACKAGE_VERSIONS['@radix-ui/react-dialog'],
-      '@radix-ui/react-label': PACKAGE_VERSIONS['@radix-ui/react-label'],
-      '@auth/prisma-adapter': PACKAGE_VERSIONS['@auth/prisma-adapter'],
+      '@radix-ui/react-label': '^2.0.2',
+      'class-variance-authority': '^0.7.0',
+      'tailwindcss-animate': '^1.0.7',
     },
     devDependencies: {
       typescript: PACKAGE_VERSIONS.typescript,
@@ -112,7 +103,14 @@ export async function generateBase(projectPath, projectName, config) {
 
   // Generate next.config.js
   const nextConfig = `/** @type {import('next').NextConfig} */
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const nextConfig = {
+  outputFileTracingRoot: __dirname,
   experimental: {
     serverActions: {
       bodySizeLimit: '2mb',
@@ -310,46 +308,171 @@ export default function RootLayout({
   await writeFile(path.join(projectPath, 'src/app/layout.tsx'), layoutTsx);
 
   // Generate app/page.tsx
-  const pageTsx = `export default function Home() {
+  const pageTsx = `'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Rocket, Users, DollarSign, Code, Database, CreditCard, Mail, Lock, CheckCircle2, Trophy } 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);
+
+  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);
+    }
+  };
+
+  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>
+  );
+
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-center font-mono text-sm">
-        <h1 className="text-4xl font-bold text-center mb-4">
-          Welcome to ${projectName}
-        </h1>
-        <p className="text-center text-muted-foreground">
-          Built with SoloStack - Your Next.js SaaS boilerplate
-        </p>
-        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="p-6 border rounded-lg">
-            <h2 className="text-xl font-semibold mb-2">✅ Authentication</h2>
-            <p className="text-sm text-muted-foreground">
-              NextAuth.js configured with email and OAuth providers
-            </p>
+    <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>
-          <div className="p-6 border rounded-lg">
-            <h2 className="text-xl font-semibold mb-2">✅ Database</h2>
-            <p className="text-sm text-muted-foreground">
-              Prisma + PostgreSQL ready to use
-            </p>
-          </div>
-          <div className="p-6 border rounded-lg">
-            <h2 className="text-xl font-semibold mb-2">✅ Payments</h2>
-            <p className="text-sm text-muted-foreground">
-              Stripe integration for subscriptions
+          
+          {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>
+
+              <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"
+              >
+                <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>
+            </div>
           </div>
-          <div className="p-6 border rounded-lg">
-            <h2 className="text-xl font-semibold mb-2">✅ Emails</h2>
-            <p className="text-sm text-muted-foreground">
-              Resend configured for transactional emails
-            </p>
+
+          {/* 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>
+
+            <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>
+
+            <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>
           </div>
         </div>
-        <div className="mt-8 text-center">
-          <p className="text-sm text-muted-foreground">
-            Get started by editing <code className="font-mono bg-muted px-2 py-1 rounded">src/app/page.tsx</code>
-          </p>
+
+        <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>
         </div>
       </div>
     </main>

package/src/generators/setup.js

@@ -0,0 +1,359 @@
+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'));
+
+    // Generate setup page UI
+    const setupPage = `'use client';
+
+import { useState, useEffect } from 'react';
+import { CheckCircle, XCircle, Loader2, AlertCircle, RefreshCw, Mail } from 'lucide-react';
+
+export default function SetupPage() {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [emailSending, setEmailSending] = useState(false);
+  const [emailStatus, setEmailStatus] = useState<{ success: boolean; message: string } | null>(null);
+
+  const checkStatus = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/setup');
+      const json = await res.json();
+      setData(json);
+    } catch (error) {
+      console.error('Failed to fetch setup status:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    checkStatus();
+  }, []);
+
+  const sendTestEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setEmailSending(true);
+    setEmailStatus(null);
+    const formData = new FormData(e.target as HTMLFormElement);
+    const email = formData.get('email');
+
+    try {
+      const res = await fetch('/api/setup/test-email', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      const json = await res.json();
+      setEmailStatus({
+        success: res.ok,
+        message: json.message || (res.ok ? 'Email sent successfully!' : 'Failed to send email'),
+      });
+    } catch (error) {
+      setEmailStatus({ success: false, message: 'Failed to send email' });
+    } finally {
+      setEmailSending(false);
+    }
+  };
+
+  if (process.env.NODE_ENV !== 'development') {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-muted-foreground">This page is only available in development mode.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="mx-auto max-w-4xl space-y-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Setup & Diagnostics</h1>
+            <p className="text-gray-500">Check your boilerplate configuration status.</p>
+          </div>
+          <button
+            onClick={checkStatus}
+            disabled={loading}
+            className="flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 disabled:opacity-50"
+          >
+            <RefreshCw className={\`h-4 w-4 \${loading ? 'animate-spin' : ''}\`} />
+            Refresh
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="flex h-64 items-center justify-center rounded-lg border bg-white shadow-sm">
+            <Loader2 className="h-8 w-8 animate-spin text-indigo-600" />
+          </div>
+        ) : (
+          <div className="grid gap-6 md:grid-cols-2">
+            {/* Database Card */}
+            <div className="rounded-lg border bg-white p-6 shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold">Database</h2>
+                <StatusBadge status={data?.database?.connected} />
+              </div>
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Connection</span>
+                  <span className="font-mono">{data?.database?.provider}</span>
+                </div>
+                {data?.database?.error && (
+                  <div className="rounded-md bg-red-50 p-3">
+                    <p className="text-sm text-red-800">{data.database.error}</p>
+                  </div>
+                )}
+                {data?.database?.connected && (
+                  <div className="rounded-md bg-green-50 p-3">
+                    <p className="text-sm text-green-800">
+                      Successfully connected. Found {data.database.userCount} users.
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Authentication Card */}
+            <div className="rounded-lg border bg-white p-6 shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold">Authentication</h2>
+                <StatusBadge status={data?.auth?.configured} />
+              </div>
+              <div className="space-y-4">
+                <div className="flex justify-between text-sm border-b pb-2">
+                  <span className="text-gray-500">NextAuth Secret</span>
+                  <StatusIcon status={data?.auth?.hasSecret} />
+                </div>
+                
+                <div>
+                  <h3 className="text-sm font-medium text-gray-900 mb-2">Providers</h3>
+                  <div className="space-y-2">
+                    {data?.auth?.providers?.map((p: any) => (
+                      <div key={p.name} className="flex items-center justify-between text-sm">
+                        <span className="text-gray-600">{p.name}</span>
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs text-gray-400">
+                            {p.clientId ? 'ID Set' : 'Missing ID'}
+                          </span>
+                          <StatusIcon status={p.configured} />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+             {/* Payments Card */}
+             <div className="rounded-lg border bg-white p-6 shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold">Payments (Stripe)</h2>
+                <StatusBadge status={data?.stripe?.configured} />
+              </div>
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Secret Key</span>
+                  <StatusIcon status={data?.stripe?.hasSecretKey} />
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Publishable Key</span>
+                  <StatusIcon status={data?.stripe?.hasPublishableKey} />
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Webhook Secret</span>
+                  <StatusIcon status={data?.stripe?.hasWebhookSecret} />
+                </div>
+              </div>
+            </div>
+
+            {/* Email Card */}
+            <div className="rounded-lg border bg-white p-6 shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold">Email (Resend)</h2>
+                <StatusBadge status={data?.email?.configured} />
+              </div>
+              <div className="space-y-4">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">API Key</span>
+                  <StatusIcon status={data?.email?.hasApiKey} />
+                </div>
+                
+                {data?.email?.configured && (
+                  <form onSubmit={sendTestEmail} className="mt-4 pt-4 border-t">
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Send Test Email
+                    </label>
+                    <div className="flex gap-2">
+                      <input
+                        required
+                        type="email"
+                        name="email"
+                        placeholder="you@example.com"
+                        className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                      />
+                      <button
+                        type="submit"
+                        disabled={emailSending}
+                        className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 disabled:opacity-50"
+                      >
+                        {emailSending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Mail className="h-4 w-4" />}
+                      </button>
+                    </div>
+                    {emailStatus && (
+                      <p className={\`mt-2 text-xs \${emailStatus.success ? 'text-green-600' : 'text-red-600'}\`}>
+                        {emailStatus.message}
+                      </p>
+                    )}
+                  </form>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: boolean }) {
+  return (
+    <span
+      className={\`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium \${
+        status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+      }\`}
+    >
+      {status ? 'Configured' : 'Incomplete'}
+    </span>
+  );
+}
+
+function StatusIcon({ status }: { status: boolean }) {
+  return status ? (
+    <CheckCircle className="h-4 w-4 text-green-500" />
+  ) : (
+    <XCircle className="h-4 w-4 text-red-500" />
+  );
+}
+`;
+
+    await writeFile(path.join(projectPath, 'src/app/setup/page.tsx'), setupPage);
+
+    // 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';
+
+export async function GET() {
+  if (process.env.NODE_ENV !== 'development') {
+    return NextResponse.json({ error: 'Not available in production' }, { status: 403 });
+  }
+
+  const results = {
+    database: {
+      connected: false,
+      userCount: 0,
+      error: null as string | null,
+      provider: 'PostgreSQL'
+    },
+    auth: {
+      configured: false,
+      hasSecret: !!process.env.NEXTAUTH_SECRET,
+      providers: [
+        { 
+          name: 'Google', 
+          clientId: !!process.env.GOOGLE_CLIENT_ID,
+          clientSecret: !!process.env.GOOGLE_CLIENT_SECRET,
+          configured: !!(process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET)
+        },
+        { 
+          name: 'GitHub', 
+          clientId: !!process.env.GITHUB_CLIENT_ID,
+          clientSecret: !!process.env.GITHUB_CLIENT_SECRET,
+          configured: !!(process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET)
+        }
+      ]
+    },
+    stripe: {
+      configured: false,
+      hasSecretKey: !!process.env.STRIPE_SECRET_KEY,
+      hasPublishableKey: !!process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
+      hasWebhookSecret: !!process.env.STRIPE_WEBHOOK_SECRET,
+    },
+    email: {
+      configured: false,
+      hasApiKey: !!process.env.RESEND_API_KEY,
+    }
+  };
+
+  // Check Database
+  try {
+    const userCount = await db.user.count();
+    results.database.connected = true;
+    results.database.userCount = userCount;
+  } catch (error: any) {
+    results.database.error = error.message;
+  }
+
+  // Check Auth
+  results.auth.configured = results.auth.hasSecret;
+
+  // Check Stripe
+  results.stripe.configured = 
+    results.stripe.hasSecretKey && 
+    results.stripe.hasPublishableKey;
+
+  // Check Email
+  results.email.configured = results.email.hasApiKey;
+
+  return NextResponse.json(results);
+}
+`;
+
+    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'));
+
+    const testEmailApi = `import { NextResponse, NextRequest } from 'next/server';
+import { Resend } from 'resend';
+
+export async function POST(req: NextRequest) {
+  if (process.env.NODE_ENV !== 'development') {
+    return NextResponse.json({ error: 'Not available in production' }, { status: 403 });
+  }
+
+  try {
+    const { email } = await req.json();
+
+    if (!process.env.RESEND_API_KEY) {
+      throw new Error('RESEND_API_KEY is not configured');
+    }
+
+    const resend = new Resend(process.env.RESEND_API_KEY);
+
+    const { data, error } = await resend.emails.send({
+      from: process.env.FROM_EMAIL || 'onboarding@resend.dev',
+      to: email,
+      subject: 'Test Email from Solo Stack',
+      html: '<p>Congrats! Your email configuration is working correctly. 🎉</p>'
+    });
+
+    if (error) {
+      return NextResponse.json({ message: error.message }, { status: 400 });
+    }
+
+    return NextResponse.json({ message: 'Email sent successfully' });
+  } catch (error: any) {
+    return NextResponse.json({ message: error.message }, { status: 500 });
+  }
+}
+`;
+
+    await writeFile(path.join(projectPath, 'src/app/api/setup/test-email/route.ts'), testEmailApi);
+}

package/src/index.js

@@ -13,6 +13,7 @@ import { generateDatabase } from './generators/database.js';
 import { generateAuth } from './generators/auth.js';
 import { generatePayments } from './generators/payments.js';
 import { generateEmails } from './generators/emails.js';
+import { generateSetup } from './generators/setup.js';
 import { generateUI } from './generators/ui.js';
 import {
     AUTH_PROVIDERS,
@@ -150,6 +151,11 @@ export async function main() {
             spinner.succeed('Added UI components (shadcn/ui)');
         }
 
+        // Generate setup & diagnostics
+        spinner = ora('Adding diagnostics page').start();
+        await generateSetup(projectPath);
+        spinner.succeed('Added diagnostics page (/setup)');
+
         // Install dependencies
         spinner = ora('Installing dependencies (this may take a minute...)').start();
         await installPackages(projectPath);