create-nextjs-stack 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mehmet Burak Altıparmak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# Create Next.js Stack
+
+[![npm version](https://img.shields.io/npm/v/create-nextjs-stack.svg)](https://www.npmjs.com/package/create-nextjs-stack)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Downloads](https://img.shields.io/npm/dm/create-nextjs-stack.svg)](https://www.npmjs.com/package/create-nextjs-stack)
+
+A powerful CLI tool to scaffold production-ready Next.js applications and Supabase Admin panels.
+
+## 🚀 Features
+
+- **Multi-Template Support**: Choose between Web, Admin, or Full Stack.
+- **Production Ready**: Includes Tailwind CSS 4, Redux Toolkit, Supabase, Cloudinary, and Resend.
+- **Smart Scaffolding**: Automatically handles environment variables and cleans up dependencies.
+
+## 📦 Usage
+
+You can use this tool directly with `npx`:
+
+```bash
+npx create-nextjs-stack my-app
+```
+
+### Interactive Mode
+
+The CLI will ask you:
+
+1.  **Project Name**: What to call your new project.
+2.  **Template Type**:
+    - `Full Stack`: Creates both `web` and `admin` projects.
+    - `Web Only`: Creates the Next.js Landing website.
+    - `Admin Only`: Creates the Supabase Admin Panel.
+
+### Command Line Arguments
+
+You can also bypass prompts:
+
+```bash
+# Create a full stack project
+npx create-nextjs-stack my-app --template full-stack
+
+# Create just the web app
+npx create-nextjs-stack my-web-app --template web
+
+# Create just the admin panel
+npx create-nextjs-stack my-admin --template admin
+```
+
+## 🛠 Project Structure
+
+After running the command, your project will look like this (for full-stack):
+
+```
+my-app/
+├── web/            # Next.js Landing Page (App Router, Tailwind 4, Redux)
+└── admin/          # Supabase Admin Panel (React, Vite, Tailwind)
+```
+
+## 📝 License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,187 @@
+#!/usr/bin/env node
+
+const fs = require("fs-extra");
+const path = require("path");
+const { program } = require("commander");
+const prompts = require("prompts");
+const chalk = require("chalk");
+const ora = require("ora");
+
+// Read version from package.json
+const packageJson = require("../package.json");
+
+program
+  .name("create-nextjs-stack")
+  .version(packageJson.version, "-v, --version", "Output the current version")
+  .description("Scaffold a new Next.js Project with Supabase Admin support")
+  .argument("[project-directory]", "Directory to create the project in")
+  .option("-t, --template <type>", "Template type: web, admin, or full-stack")
+  .action(async (projectDirectory, options) => {
+    let targetDir = projectDirectory;
+
+    // 1. Get Project Name / Directory
+    if (!targetDir) {
+      const res = await prompts({
+        type: "text",
+        name: "value",
+        message: "What is your project named?",
+        initial: "my-awesome-project",
+      });
+      targetDir = res.value;
+    }
+
+    if (!targetDir) {
+      console.log(chalk.red("Operation cancelled. No project name provided."));
+      process.exit(1);
+    }
+
+    const root = path.resolve(targetDir);
+    const appName = path.basename(root);
+
+    // 2. Select Template Type
+    let templateType = options.template;
+
+    if (!templateType) {
+      const res = await prompts({
+        type: "select",
+        name: "templateType",
+        message: "Which template would you like to generate?",
+        choices: [
+          {
+            title: "Full Stack (Web + Admin)",
+            value: "full-stack",
+            description:
+              "Creates both web and admin projects in subdirectories",
+          },
+          {
+            title: "Web Only (Next.js Landing)",
+            value: "web",
+            description: "Just the landing page/web application",
+          },
+          {
+            title: "Admin Only (Supabase Admin)",
+            value: "admin",
+            description: "Just the admin panel",
+          },
+        ],
+        initial: 0,
+      });
+      templateType = res.templateType;
+    }
+
+    if (!templateType) {
+      console.log(chalk.red("Operation cancelled."));
+      process.exit(1);
+    }
+
+    console.log(
+      `\nCreating a new ${chalk.cyan(templateType)} project in ${chalk.green(root)}.\n`,
+    );
+
+    // 3. Ensure Directory exists
+    if (fs.existsSync(root)) {
+      const files = fs.readdirSync(root);
+      if (files.length > 0) {
+        const { shouldOverwrite } = await prompts({
+          type: "confirm",
+          name: "shouldOverwrite",
+          message: `Directory ${appName} is not empty. Overwrite?`,
+          initial: false,
+        });
+
+        if (!shouldOverwrite) {
+          console.log(chalk.red("Aborting installation."));
+          process.exit(1);
+        }
+        fs.emptyDirSync(root);
+      }
+    } else {
+      fs.ensureDirSync(root);
+    }
+
+    const spinner = ora(`Scaffolding ${templateType}...`).start();
+
+    try {
+      const templatesDir = path.join(__dirname, "..", "templates");
+
+      // Helper function to copy a template
+      const copyTemplate = (sourceName, destPath) => {
+        const source = path.join(templatesDir, sourceName);
+        fs.copySync(source, destPath, {
+          filter: (src) => {
+            const basename = path.basename(src);
+            return (
+              basename !== "node_modules" &&
+              basename !== ".next" &&
+              basename !== ".git" &&
+              basename !== "package-lock.json" &&
+              basename !== ".env" &&
+              basename !== ".DS_Store"
+            );
+          },
+        });
+
+        // Handle .env.example -> .env
+        const envExample = path.join(destPath, ".env.example");
+        const envTarget = path.join(destPath, ".env");
+        if (fs.existsSync(envExample)) {
+          fs.copySync(envExample, envTarget);
+        }
+
+        // Update package.json name
+        const pkgPath = path.join(destPath, "package.json");
+        if (fs.existsSync(pkgPath)) {
+          const pkg = fs.readJsonSync(pkgPath);
+          pkg.name = path.basename(destPath);
+          fs.writeJsonSync(pkgPath, pkg, { spaces: 2 });
+        }
+      };
+
+      if (templateType === "full-stack") {
+        // Create subdirectories
+        const webDir = path.join(root, "web");
+        const adminDir = path.join(root, "admin");
+
+        fs.ensureDirSync(webDir);
+        fs.ensureDirSync(adminDir);
+
+        copyTemplate("web", webDir);
+        copyTemplate("admin", adminDir);
+
+        // Create a root package.json for convenience (workspaces)?
+        // Optional, but let's at least leave a README
+        fs.writeFileSync(
+          path.join(root, "README.md"),
+          `# ${appName}\n\nThis project contains both Web and Admin applications.\n\n- [Web](./web)\n- [Admin](./admin)`,
+        );
+      } else if (templateType === "web") {
+        copyTemplate("web", root);
+      } else if (templateType === "admin") {
+        copyTemplate("admin", root);
+      }
+
+      spinner.succeed("Scaffolding complete!");
+
+      console.log(`\nSuccess! Created project at ${root}\n`);
+
+      if (templateType === "full-stack") {
+        console.log("Next steps:");
+        console.log(chalk.cyan(`  cd ${appName}`));
+        console.log("  Then go to either web or admin folder:");
+        console.log(chalk.cyan(`  cd web`));
+        console.log(chalk.cyan(`  npm install`));
+        console.log(chalk.cyan(`  npm run dev`));
+      } else {
+        console.log("Next steps:");
+        console.log(chalk.cyan(`  cd ${appName}`));
+        console.log(chalk.cyan(`  npm install`));
+        console.log(chalk.cyan(`  npm run dev`));
+      }
+    } catch (error) {
+      spinner.fail("Error scaffolding project.");
+      console.error(error);
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "create-nextjs-stack",
+  "version": "0.1.0",
+  "description": "CLI to scaffold Next.js Landing Page and Supabase Admin Panel",
+  "private": false,
+  "bin": "./bin/cli.js",
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "scripts": {
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.3",
+    "ora": "^5.4.1",
+    "prompts": "^2.4.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "nextjs",
+    "starter",
+    "template",
+    "supabase",
+    "admin",
+    "cli"
+  ],
+  "author": "Mehmet Burak Altıparmak <mburakaltiparmak@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mburakaltiparmak/create-nextjs-stack.git"
+  },
+  "homepage": "https://github.com/mburakaltiparmak/create-nextjs-stack/blob/main/README.md",
+  "bugs": {
+    "url": "https://github.com/mburakaltiparmak/create-nextjs-stack/issues"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.2.3",
+    "execa": "^9.6.1",
+    "vitest": "^4.0.18"
+  }
+}

package/templates/admin/.env.example

@@ -0,0 +1,11 @@
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=your-project-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+
+# Cloudinary Configuration (for image uploads)
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloud-name
+CLOUDINARY_API_KEY=your-api-key
+CLOUDINARY_API_SECRET=your-api-secret
+CLOUDINARY_URL=cloudinary://your-api-key:your-api-secret@your-cloud-name
+

package/templates/admin/README.md

@@ -0,0 +1,82 @@
+# Supabase Admin Panel
+
+A lightweight admin panel built with Next.js and Supabase for managing database content.
+
+## 🚀 Features
+
+- **Authentication**: Secure login with Supabase Auth
+- **CRUD Operations**: Create, Read, Update, Delete database records
+- **Responsive Design**: Works on desktop and mobile
+- **TypeScript**: Full type safety
+- **Modern Stack**: Next.js 16 + React 19 + Tailwind CSS 4
+
+## 📋 Prerequisites
+
+- Node.js 18+ and npm installed
+- Supabase account (free tier available)
+
+## 🛠 Setup
+
+### 1. Configure Environment Variables
+
+Copy `.env.example` to `.env` and fill in your Supabase credentials:
+
+```bash
+cp .env.example .env
+```
+
+Required environment variables:
+
+- `NEXT_PUBLIC_SUPABASE_URL`: Your Supabase project URL
+- `NEXT_PUBLIC_SUPABASE_ANON_KEY`: Your Supabase anonymous key
+
+### 2. Install Dependencies
+
+```bash
+npm install
+```
+
+### 3. Run Development Server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the admin panel.
+
+## 📁 Project Structure
+
+```
+admin/
+├── app/              # Next.js App Router pages
+├── components/       # Reusable UI components
+├── lib/             # Utilities and helpers
+├── public/          # Static assets
+└── config/          # Configuration files
+```
+
+## 🔐 Authentication
+
+The admin panel uses Supabase Auth. Make sure to:
+
+1. Enable Email/Password authentication in your Supabase project
+2. Configure the correct redirect URLs in Supabase Dashboard
+
+## 📚 Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Supabase Documentation](https://supabase.com/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+
+## 🚀 Deployment
+
+### Vercel (Recommended)
+
+1. Push code to GitHub
+2. Import project in [Vercel](https://vercel.com)
+3. Add environment variables
+4. Deploy!
+
+---
+
+**Built with ❤️ using Next.js and Supabase**

package/templates/admin/app/(auth)/login/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { getBrowserClient } from "@/lib/supabase/client";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const supabase = getBrowserClient();
+      const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+
+      if (error) {
+        setError(error.message);
+      } else {
+        // Refresh router to update server components
+        router.refresh();
+        router.push("/dashboard");
+      }
+    } catch (err) {
+      console.error(err);
+      setError("An unexpected error occurred.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4">
+      <div className="w-full max-w-md bg-white rounded-lg shadow-lg p-8">
+        <h1 className="text-2xl font-bold mb-6 text-center text-gray-900">Admin Login</h1>
+        
+        {error && (
+          <div className="mb-4 p-3 text-sm text-red-500 bg-red-50 border border-red-200 rounded">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? "Signing in..." : "Sign In"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/[resource]/[id]/page.tsx

@@ -0,0 +1,45 @@
+import { resources } from "@/config/resources";
+import { notFound } from "next/navigation";
+import { getServerClient } from "@/lib/supabase/server";
+import ResourceFormClient from "@/components/admin/ResourceFormClient";
+
+interface PageProps {
+  params: {
+    resource: string;
+    id: string;
+  };
+}
+
+export default async function EditResourcePage({ params }: PageProps) {
+  const resourceName = params.resource;
+  const config = resources.find((r) => r.name === resourceName);
+
+  if (!config) {
+    return notFound();
+  }
+
+  const supabase = await getServerClient();
+  const { data: item, error } = await supabase
+    .from(config.table)
+    .select("*")
+    .eq("id", params.id)
+    .single();
+
+  if (error || !item) {
+    return notFound();
+  }
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold">Edit {config.singular}</h1>
+      </div>
+      <ResourceFormClient 
+        config={config} 
+        mode="update" 
+        initialData={item}
+        id={params.id}
+      />
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/[resource]/new/page.tsx

@@ -0,0 +1,32 @@
+import { resources } from "@/config/resources";
+import { notFound, redirect } from "next/navigation";
+import FormLayout from "@/components/admin/FormLayout";
+import { createResource } from "@/app/actions/resources"; // We will create this
+import ResourceFormClient from "@/components/admin/ResourceFormClient"; // Wrapper for logic
+
+interface PageProps {
+  params: {
+    resource: string;
+  };
+}
+
+export default function CreateResourcePage({ params }: PageProps) {
+  const resourceName = params.resource;
+  const config = resources.find((r) => r.name === resourceName);
+
+  if (!config) {
+    return notFound();
+  }
+
+  return (
+    <div>
+       <div className="mb-6">
+        <h1 className="text-2xl font-bold">Create {config.singular}</h1>
+      </div>
+      <ResourceFormClient 
+        config={config} 
+        mode="create"
+      />
+    </div>
+  );
+}