create-solostack 1.0.2 → 1.1.0

package/package.json

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

@@ -20,6 +20,7 @@ export async function generateBase(projectPath, projectName, config) {
     name: projectName,
     version: '0.1.0',
     private: true,
+    type: 'module',
     scripts: {
       dev: 'next dev',
       build: 'next build',

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);