create-solostack 1.1.0 → 1.2.0

package/package.json

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