starter-structure-cli 0.2.1 → 0.2.2

package/templates/frontend-only/react-admin-dashboard/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.0",
+    "vite": "^6.2.0"
+
+  }
+}

package/templates/frontend-only/react-admin-dashboard/src/App.jsx

@@ -0,0 +1,105 @@
+const stats = [
+  { label: "Revenue", value: "$128,340", change: "+12.4%" },
+  { label: "Orders", value: "1,284", change: "+7.1%" },
+  { label: "Active users", value: "9,402", change: "+4.3%" },
+  { label: "Refund rate", value: "1.8%", change: "-0.4%" }
+];
+
+const tasks = [
+  { id: "INV-3912", customer: "Northwind LLC", status: "Pending", total: "$1,240" },
+  { id: "INV-3913", customer: "Apex Labs", status: "Paid", total: "$890" },
+  { id: "INV-3914", customer: "Sunset Retail", status: "Review", total: "$2,110" },
+  { id: "INV-3915", customer: "Zenbyte", status: "Paid", total: "$640" }
+];
+
+const activity = [
+  "New user segment synced from CRM",
+  "Weekly revenue report exported",
+  "Inventory alert: 3 products below threshold",
+  "Payment retry succeeded for 6 subscriptions"
+];
+
+export default function App() {
+  const appName = import.meta.env.VITE_APP_NAME || "__APP_NAME__";
+
+  return (
+    <main className="min-h-screen bg-slate-950 p-4 text-slate-100 md:p-8">
+      <div className="mx-auto grid max-w-7xl gap-4 md:grid-cols-[240px_1fr]">
+        <aside className="rounded-3xl border border-white/10 bg-slate-900/80 p-6">
+          <p className="text-xs uppercase tracking-[0.2em] text-slate-400">Workspace</p>
+          <h1 className="mt-3 text-2xl font-semibold">{appName}</h1>
+          <nav className="mt-8 space-y-2 text-sm">
+            {["Overview", "Orders", "Customers", "Reports", "Settings"].map((item) => (
+              <a
+                key={item}
+                href="#"
+                className="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-white/10 hover:text-white"
+              >
+                {item}
+              </a>
+            ))}
+          </nav>
+        </aside>
+
+        <section className="space-y-4">
+          <header className="rounded-3xl border border-white/10 bg-slate-900/80 p-6">
+            <p className="text-xs uppercase tracking-[0.2em] text-slate-400">Dashboard</p>
+            <p className="mt-2 text-3xl font-semibold">Operations snapshot</p>
+            <p className="mt-2 text-sm text-slate-400">
+              Start with a clean admin shell and plug in real API data as your next step.
+            </p>
+          </header>
+
+          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+            {stats.map((item) => (
+              <article key={item.label} className="rounded-2xl border border-white/10 bg-slate-900/70 p-5">
+                <p className="text-sm text-slate-400">{item.label}</p>
+                <p className="mt-2 text-2xl font-semibold text-white">{item.value}</p>
+                <p className="mt-1 text-sm text-emerald-300">{item.change}</p>
+              </article>
+            ))}
+          </div>
+
+          <div className="grid gap-4 xl:grid-cols-[1.3fr_0.7fr]">
+            <section className="rounded-3xl border border-white/10 bg-slate-900/70 p-6">
+              <h2 className="text-lg font-semibold text-white">Recent invoices</h2>
+              <div className="mt-4 overflow-x-auto">
+                <table className="w-full text-left text-sm">
+                  <thead className="text-slate-400">
+                    <tr>
+                      <th className="pb-3">Invoice</th>
+                      <th className="pb-3">Customer</th>
+                      <th className="pb-3">Status</th>
+                      <th className="pb-3 text-right">Total</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {tasks.map((row) => (
+                      <tr key={row.id} className="border-t border-white/10 text-slate-200">
+                        <td className="py-3">{row.id}</td>
+                        <td className="py-3">{row.customer}</td>
+                        <td className="py-3">{row.status}</td>
+                        <td className="py-3 text-right">{row.total}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </section>
+
+            <section className="rounded-3xl border border-white/10 bg-slate-900/70 p-6">
+              <h2 className="text-lg font-semibold text-white">Activity</h2>
+              <ul className="mt-4 space-y-3 text-sm text-slate-300">
+                {activity.map((item) => (
+                  <li key={item} className="rounded-xl border border-white/10 bg-white/5 p-3">
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

package/templates/frontend-only/react-admin-dashboard/src/components/feature-grid/index.jsx

@@ -0,0 +1,32 @@
+const cards = [
+  {
+    title: "Intentional look",
+    body: "Warm neutrals, sharp typography, and layered surfaces give the starter a point of view immediately."
+  },
+  {
+    title: "Fast edits",
+    body: "Sections are plain React components, so changing copy and layout stays straightforward."
+  },
+  {
+    title: "Portable setup",
+    body: "You can turn this into a SaaS page, agency site, waitlist, or docs front page without redoing the base."
+  }
+];
+
+export default function FeatureGrid() {
+  return (
+    <section className="mx-auto mt-10 max-w-6xl">
+      <div className="grid gap-4 md:grid-cols-3">
+        {cards.map((card) => (
+          <article
+            key={card.title}
+            className="rounded-[1.75rem] border border-[var(--line)] bg-white/70 p-6 shadow-sm"
+          >
+            <p className="text-lg font-semibold text-slate-900">{card.title}</p>
+            <p className="mt-3 text-sm leading-7 text-slate-600">{card.body}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/frontend-only/react-admin-dashboard/src/index.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+
+:root {
+  color-scheme: light;
+  --canvas: #f4efe4;
+  --ink: #1f2937;
+  --muted: #6b7280;
+  --panel: rgba(255, 255, 255, 0.82);
+  --line: rgba(31, 41, 55, 0.12);
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(240, 107, 70, 0.16), transparent 28%),
+    radial-gradient(circle at 85% 20%, rgba(22, 163, 74, 0.12), transparent 22%),
+    linear-gradient(180deg, #fcfaf5 0%, var(--canvas) 100%);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/templates/frontend-only/react-admin-dashboard/src/main.jsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/frontend-only/react-admin-dashboard/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()]
+});

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_APP_NAME=__APP_NAME__
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+MONGODB_URI=mongodb://127.0.0.1:27017/__APP_NAME__

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/README.md

@@ -0,0 +1,35 @@
+# __APP_NAME__
+
+Next.js App Router starter with Tailwind CSS v4.
+
+## Features
+
+- Next.js App Router
+- Tailwind CSS v4
+- ESLint flat config
+- Reusable landing page sections
+- Alias support with `@/*`
+
+## Project structure
+
+```text
+.
+├── app/
+├── components/
+├── lib/
+├── public/
+├── .env.example
+├── eslint.config.mjs
+├── jsconfig.json
+├── next.config.mjs
+├── package.json
+└── postcss.config.mjs
+```
+
+## Getting started
+
+```bash
+npm install
+cp .env.example .env
+npm run dev
+```

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/app/api/health/route.js

@@ -0,0 +1,7 @@
+export function GET() {
+  return Response.json({
+    ok: true,
+    app: "__APP_NAME__",
+    stack: "nextjs-mongoose"
+  });
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/app/api/users/route.js

@@ -0,0 +1,46 @@
+import bcrypt from "bcryptjs";
+
+import { connectToDatabase } from "../../../lib/mongoose";
+import User from "../../../models/User";
+
+export async function GET() {
+  await connectToDatabase();
+
+  const users = await User.find({}, "name email role createdAt").sort({ createdAt: -1 }).limit(10).lean();
+  return Response.json({ users });
+}
+
+export async function POST(request) {
+  await connectToDatabase();
+
+  const body = await request.json();
+
+  if (!body.name || !body.email || !body.password) {
+    return Response.json({ error: "Name, email, and password are required." }, { status: 400 });
+  }
+
+  const existing = await User.findOne({ email: body.email.toLowerCase() });
+  if (existing) {
+    return Response.json({ error: "User already exists." }, { status: 409 });
+  }
+
+  const passwordHash = await bcrypt.hash(body.password, 10);
+  const user = await User.create({
+    name: body.name,
+    email: body.email.toLowerCase(),
+    role: body.role || "user",
+    passwordHash
+  });
+
+  return Response.json(
+    {
+      user: {
+        id: user._id.toString(),
+        name: user.name,
+        email: user.email,
+        role: user.role
+      }
+    },
+    { status: 201 }
+  );
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/app/globals.css

@@ -0,0 +1,56 @@
+@import "tailwindcss";
+
+:root {
+  --color-ink: #07111d;
+  --color-panel: rgba(13, 24, 44, 0.76);
+  --color-paper: #eef5ff;
+  --color-muted: #9db6d5;
+  --color-line: rgba(173, 201, 232, 0.18);
+  --color-accent: #8bf2cc;
+  --color-accent-strong: #2be0a5;
+  --color-sun: #ffd36e;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgba(139, 242, 204, 0.12), transparent 28%),
+    radial-gradient(circle at 78% 18%, rgba(255, 211, 110, 0.14), transparent 26%),
+    linear-gradient(180deg, #06101c 0%, #07111d 48%, #0b1627 100%);
+  color: var(--color-paper);
+  font-family: var(--font-body), sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font: inherit;
+}
+
+.shell {
+  width: min(1120px, calc(100% - 2rem));
+  margin: 0 auto;
+}
+
+.card-grid {
+  display: grid;
+  gap: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/app/layout.js

@@ -0,0 +1,28 @@
+import { Geist, Space_Grotesk } from "next/font/google";
+
+import "./globals.css";
+
+const bodyFont = Geist({
+  variable: "--font-body",
+  subsets: ["latin"]
+});
+
+const displayFont = Space_Grotesk({
+  variable: "--font-display",
+  subsets: ["latin"]
+});
+
+export const metadata = {
+  title: "__APP_NAME__",
+  description: "A Next.js and Tailwind CSS starter for fast product launches."
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={`${bodyFont.variable} ${displayFont.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/app/page.js

@@ -0,0 +1,15 @@
+import { CalloutStrip } from "@/components/home/callout-strip";
+import { FeatureGrid } from "@/components/home/feature-grid";
+import { HeroSection } from "@/components/home/hero-section";
+import { SiteHeader } from "@/components/site-header";
+
+export default function HomePage() {
+  return (
+    <main className="min-h-screen bg-[var(--color-ink)] text-[var(--color-paper)]">
+      <SiteHeader />
+      <HeroSection />
+      <FeatureGrid />
+      <CalloutStrip />
+    </main>
+  );
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/components/home/callout-strip/index.js

@@ -0,0 +1,22 @@
+export function CalloutStrip() {
+  return (
+    <section className="py-16 md:py-24" id="cta">
+      <div className="shell">
+        <div className="overflow-hidden rounded-[2rem] border border-[var(--color-line)] bg-[linear-gradient(135deg,_rgba(139,242,204,0.12),_rgba(255,211,110,0.08)_55%,_rgba(255,255,255,0.03))] p-8 md:p-12">
+          <div className="max-w-3xl space-y-5">
+            <p className="text-sm uppercase tracking-[0.28em] text-[var(--color-sun)]">
+              Ready to adapt
+            </p>
+            <h2 className="font-[family-name:var(--font-display)] text-3xl font-semibold text-white md:text-5xl">
+              Swap the copy, adjust the palette, and ship a branded landing page in one sprint.
+            </h2>
+            <p className="max-w-2xl text-base leading-7 text-[var(--color-muted)] md:text-lg">
+              This starter is intentionally small, fast, and easy to reshape into a SaaS homepage,
+              agency site, product launch page, or internal marketing shell.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/components/home/feature-grid/index.js

@@ -0,0 +1,33 @@
+import { siteConfig } from "@/lib/site-config";
+
+export function FeatureGrid() {
+  return (
+    <section className="py-8 md:py-12" id="features">
+      <div className="shell">
+        <div className="max-w-2xl space-y-4">
+          <p className="text-sm uppercase tracking-[0.28em] text-[var(--color-accent)]">
+            Why this starter
+          </p>
+          <h2 className="font-[family-name:var(--font-display)] text-3xl font-semibold text-white md:text-5xl">
+            A clean structure you can extend without rewriting the basics.
+          </h2>
+        </div>
+
+        <div className="card-grid mt-10">
+          {siteConfig.features.map((feature) => (
+            <article
+              className="rounded-[1.75rem] border border-[var(--color-line)] bg-[var(--color-panel)] p-6"
+              key={feature.title}
+            >
+              <div className="mb-5 inline-flex rounded-2xl bg-[rgba(139,242,204,0.12)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-[var(--color-accent)]">
+                {feature.tag}
+              </div>
+              <h3 className="text-xl font-semibold text-white">{feature.title}</h3>
+              <p className="mt-3 text-sm leading-7 text-[var(--color-muted)]">{feature.copy}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/components/home/hero-section/index.js

@@ -0,0 +1,81 @@
+import Link from "next/link";
+
+import { siteConfig } from "@/lib/site-config";
+
+export function HeroSection() {
+  return (
+    <section className="relative overflow-hidden py-20 md:py-28">
+      <div className="shell grid items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
+        <div className="space-y-8">
+          <div className="inline-flex items-center gap-3 rounded-full border border-[var(--color-line)] bg-[rgba(255,255,255,0.04)] px-4 py-2 text-sm text-[var(--color-muted)]">
+            <span className="h-2.5 w-2.5 rounded-full bg-[var(--color-accent)]" />
+            Designed to turn ideas into launch-ready websites fast
+          </div>
+
+          <div className="space-y-5">
+            <h1 className="max-w-3xl font-[family-name:var(--font-display)] text-5xl font-semibold tracking-tight text-white md:text-7xl">
+              Build a polished product site before momentum disappears.
+            </h1>
+            <p className="max-w-2xl text-lg leading-8 text-[var(--color-muted)] md:text-xl">
+              {siteConfig.tagline}
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <Link
+              className="inline-flex items-center justify-center rounded-full bg-[var(--color-accent)] px-6 py-3 text-sm font-semibold text-[var(--color-ink)] transition hover:bg-[var(--color-accent-strong)]"
+              href="#cta"
+            >
+              Launch the Starter
+            </Link>
+            <Link
+              className="inline-flex items-center justify-center rounded-full border border-[var(--color-line)] px-6 py-3 text-sm font-semibold text-white transition hover:border-[var(--color-sun)] hover:text-[var(--color-sun)]"
+              href="#features"
+            >
+              Explore Structure
+            </Link>
+          </div>
+        </div>
+
+        <div className="relative">
+          <div className="absolute inset-0 rounded-[2rem] bg-[radial-gradient(circle_at_top,_rgba(139,242,204,0.2),_transparent_55%)] blur-2xl" />
+          <div className="relative overflow-hidden rounded-[2rem] border border-[var(--color-line)] bg-[var(--color-panel)] p-6 shadow-2xl shadow-black/30">
+            <div className="flex items-center justify-between border-b border-[var(--color-line)] pb-4">
+              <div>
+                <p className="text-sm uppercase tracking-[0.3em] text-[var(--color-muted)]">
+                  Starter Preview
+                </p>
+                <p className="mt-2 font-[family-name:var(--font-display)] text-2xl text-white">
+                  {siteConfig.name}
+                </p>
+              </div>
+              <div className="rounded-full bg-[rgba(139,242,204,0.12)] px-3 py-1 text-xs font-semibold text-[var(--color-accent)]">
+                App Router
+              </div>
+            </div>
+
+            <div className="mt-6 space-y-4">
+              {siteConfig.previewCards.map((card) => (
+                <div
+                  className="rounded-2xl border border-[var(--color-line)] bg-[rgba(255,255,255,0.03)] p-4"
+                  key={card.title}
+                >
+                  <div className="flex items-center justify-between gap-4">
+                    <div>
+                      <p className="text-sm text-[var(--color-muted)]">{card.eyebrow}</p>
+                      <h2 className="mt-1 text-lg font-semibold text-white">{card.title}</h2>
+                    </div>
+                    <div className="rounded-full bg-[rgba(255,211,110,0.12)] px-3 py-1 text-xs font-semibold text-[var(--color-sun)]">
+                      {card.badge}
+                    </div>
+                  </div>
+                  <p className="mt-3 text-sm leading-6 text-[var(--color-muted)]">{card.copy}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/components/site-header/index.js

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+import { siteConfig } from "@/lib/site-config";
+
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-20 border-b border-[var(--color-line)] bg-[rgba(7,17,29,0.82)] backdrop-blur">
+      <div className="shell flex items-center justify-between py-4">
+        <Link className="flex items-center gap-3" href="/">
+          <span className="flex h-10 w-10 items-center justify-center rounded-2xl border border-[var(--color-line)] bg-[var(--color-panel)] text-lg font-semibold text-[var(--color-accent)]">
+            {siteConfig.brandMark}
+          </span>
+          <div>
+            <p className="font-[family-name:var(--font-display)] text-sm uppercase tracking-[0.3em] text-[var(--color-muted)]">
+              Launch Kit
+            </p>
+            <p className="text-sm font-medium text-white">{siteConfig.name}</p>
+          </div>
+        </Link>
+
+        <nav className="hidden items-center gap-6 text-sm text-[var(--color-muted)] md:flex">
+          {siteConfig.navItems.map((item) => (
+            <a className="transition hover:text-white" href={item.href} key={item.label}>
+              {item.label}
+            </a>
+          ))}
+        </nav>
+
+        <Link
+          className="rounded-full border border-[var(--color-line)] bg-[var(--color-panel)] px-4 py-2 text-sm font-medium text-white transition hover:border-[var(--color-accent)] hover:text-[var(--color-accent)]"
+          href="#cta"
+        >
+          Start Now
+        </Link>
+      </div>
+    </header>
+  );
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/eslint.config.mjs

@@ -0,0 +1,13 @@
+import { FlatCompat } from "@eslint/eslintrc";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname
+});
+
+const eslintConfig = [
+  ...compat.config({
+    extends: ["next/core-web-vitals"]
+  })
+];
+
+export default eslintConfig;

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  }
+}

package/templates/fullstack/nextjs-tailwind-mongoose-mongodb/lib/mongoose/index.js

@@ -0,0 +1,28 @@
+import mongoose from "mongoose";
+
+const MONGODB_URI = process.env.MONGODB_URI;
+
+if (!MONGODB_URI) {
+  throw new Error("MONGODB_URI is not configured.");
+}
+
+let cached = global.mongoose;
+
+if (!cached) {
+  cached = global.mongoose = { conn: null, promise: null };
+}
+
+export async function connectToDatabase() {
+  if (cached.conn) {
+    return cached.conn;
+  }
+
+  if (!cached.promise) {
+    cached.promise = mongoose.connect(MONGODB_URI, {
+      bufferCommands: false
+    });
+  }
+
+  cached.conn = await cached.promise;
+  return cached.conn;
+}