@asynx/create-asynx-next-app 1.0.4 → 1.0.6

package/create-asynx-next-app-wrapper/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import '@asynx/create-asynx-next-app';

package/create-asynx-next-app-wrapper/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "create-asynx-next-app",
+	"version": "0.1.3",
+	"description": "Create Next.js apps using Asynx Devs templates",
+	"bin": {
+		"create-asynx-next-app": "index.js"
+	},
+	"dependencies": {
+		"@asynx/create-asynx-next-app": "^0.1.0"
+	},
+	"license": "MIT"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@asynx/create-asynx-next-app",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "Opinionated Next.js App Router scaffolder by Asynx Devs",
 	"type": "module",
 	"bin": {

package/templates/advanced/.env.example

@@ -0,0 +1,23 @@
+# App Configuration
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_APP_URL/api
+
+# Authentication
+# Add your auth provider keys here
+# AUTH_SECRET=
+# NEXT_PUBLIC_AUTH_PROVIDER=
+
+# Database
+# DATABASE_URL=
+
+# Payment Provider (Stripe example)
+# STRIPE_SECRET_KEY=
+# NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+# STRIPE_WEBHOOK_SECRET=
+
+# Analytics
+# NEXT_PUBLIC_ANALYTICS_ID=
+
+# Email
+# EMAIL_FROM=
+# EMAIL_PROVIDER=

package/templates/advanced/README.md

@@ -0,0 +1,148 @@
+# Advanced Template (SaaS)
+
+This template is designed for **real SaaS products, multi-feature applications, and long-term scalable codebases**.
+
+## Architecture
+
+This template follows a **domain-driven, feature-based architecture** for maximum scalability.
+
+```
+src/
+├── app/
+│   ├── auth/                  # Auth feature routes
+│   │   ├── login/
+│   │   └── signup/
+│   ├── app/                   # Main app shell (authenticated)
+│   │   ├── billing/
+│   │   ├── settings/
+│   │   ├── layout.tsx         # App shell layout
+│   │   └── page.tsx           # Dashboard
+│   ├── layout.tsx             # Root layout
+│   ├── page.tsx               # Landing page
+│   └── globals.css
+├── features/                  # Feature modules (domains)
+│   ├── app-shell/             # Core navigation & layout
+│   │   └── components/
+│   ├── auth/                  # Authentication domain
+│   │   └── lib/
+│   ├── billing/               # Billing & subscriptions
+│   │   └── lib/
+│   └── analytics/             # Analytics tracking
+│       └── lib/
+├── lib/                       # Shared infrastructure
+│   ├── api/                   # API client
+│   │   └── client.ts
+│   └── config/                # App configuration
+│       ├── app.ts
+│       └── constants.ts
+├── types/                     # Shared TypeScript types
+│   └── index.ts
+└── utils/                     # Utility functions
+```
+
+## Key Principles
+
+### 1. Feature-Based Organization
+Each major feature/domain gets its own folder in \`features/\`:
+- Contains all feature-specific logic, components, and services
+- Self-contained and independently testable
+- Easy to extract into microservices later
+
+### 2. Server/Client Boundary
+- Services in \`lib/\` folders handle business logic
+- Components handle presentation
+- Clear separation prevents vendor lock-in
+
+### 3. Shared Infrastructure
+The \`lib/\` folder contains code shared across features:
+- API client
+- Configuration
+- Auth utilities
+- Database helpers (when added)
+
+### 4. Scalability Patterns
+This structure supports:
+- Multi-tenant architectures
+- Role-based access control
+- Feature flags
+- Background jobs
+- Webhooks and integrations
+
+## Getting Started
+
+### 1. Configure Your App
+Edit \`lib/config/app.ts\` with your app details and environment variables.
+
+### 2. Set Up Authentication
+Implement real auth in \`features/auth/lib/auth-service.ts\`:
+- Add your auth provider (Supabase, Clerk, Auth.js, etc.)
+- Update login/signup logic
+- Add middleware for route protection
+
+### 3. Add Billing
+Implement billing in \`features/billing/lib/billing-service.ts\`:
+- Integrate Stripe, Paddle, or your payment provider
+- Set up webhooks in \`app/api/webhooks/\`
+- Configure subscription plans
+
+### 4. Build Features
+Create new feature modules in \`features/\`:
+```
+features/
+  your-feature/
+    components/
+    lib/
+    types/
+```
+
+## Best Practices
+
+### Service Layer Pattern
+Keep business logic in service files:
+```typescript
+// features/your-feature/lib/your-service.ts
+export class YourService {
+  async doSomething() {
+    // Business logic here
+  }
+}
+```
+
+### API Routes
+Create API routes in \`app/api/\`:
+```typescript
+// app/api/your-feature/route.ts
+export async function POST(request: Request) {
+  // Handle request
+}
+```
+
+### Type Safety
+Define shared types in \`types/\`:
+```typescript
+// types/your-feature.ts
+export type YourType = {
+  // ...
+}
+```
+
+## Scaling Considerations
+
+This template is ready for:
+- **Multi-tenancy**: Add tenant ID to database queries
+- **RBAC**: Extend User type with permissions
+- **Feature flags**: Add feature detection to \`lib/config\`
+- **Background jobs**: Add \`lib/jobs/\` folder
+- **Webhooks**: Create \`app/api/webhooks/\` routes
+- **Monitoring**: Integrate Sentry, LogRocket, etc. in \`lib/monitoring\`
+
+## No Vendor Lock-In
+
+This template provides **structure without coupling**:
+- Auth service can use any provider
+- Billing service works with any payment platform
+- Analytics service integrates with any tool
+- Database can be added without rewriting
+
+Simply implement the service interfaces with your chosen providers.
+```

package/templates/advanced/next.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	reactStrictMode: true,
+	// Recommended for production SaaS apps
+	poweredByHeader: false,
+	typescript: {
+		ignoreBuildErrors: true,
+	},
+	images: {
+		unoptimized: true,
+	},
+};
+
+export default nextConfig;

package/templates/advanced/package.json

@@ -13,7 +13,7 @@
 		"react-dom": "latest"
 	},
 	"devDependencies": {
-		"tailwindcss": "^3.4.0",
+		"tailwindcss": "^4.0.0",
 		"postcss": "^8.4.0",
 		"autoprefixer": "^10.4.0",
 		"typescript": "^5.0.0",

package/templates/advanced/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

package/templates/advanced/src/app/app/billing/page.tsx

@@ -0,0 +1,57 @@
+// Billing feature page
+
+export default function BillingPage() {
+  return (
+    <div className="container mx-auto">
+      <h1 className="text-3xl font-bold mb-2">Billing & Subscription</h1>
+      <p className="text-muted-foreground mb-8">Manage your subscription and billing information</p>
+
+      <div className="space-y-6">
+        {/* Current Plan */}
+        <div className="border rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Current Plan</h2>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-lg">Pro Plan</p>
+              <p className="text-sm text-muted-foreground">$49/month • Renews on Jan 1, 2024</p>
+            </div>
+            <button className="px-4 py-2 border rounded-md hover:bg-muted">Manage Plan</button>
+          </div>
+        </div>
+
+        {/* Payment Method */}
+        <div className="border rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Payment Method</h2>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">•••• •••• •••• 4242</p>
+              <p className="text-sm text-muted-foreground">Expires 12/24</p>
+            </div>
+            <button className="px-4 py-2 border rounded-md hover:bg-muted">Update</button>
+          </div>
+        </div>
+
+        {/* Billing History */}
+        <div className="border rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Billing History</h2>
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium">Pro Plan</p>
+                  <p className="text-sm text-muted-foreground">Dec {i}, 2023</p>
+                </div>
+                <div className="text-right">
+                  <p className="font-medium">$49.00</p>
+                  <a href="#" className="text-sm text-blue-600 hover:underline">
+                    Download
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/advanced/src/app/app/layout.tsx

@@ -0,0 +1,25 @@
+import type React from "react"
+// App shell layout
+// This wraps the entire authenticated application
+
+import { AppSidebar } from "@/features/app-shell/components/app-sidebar"
+import { AppHeader } from "@/features/app-shell/components/app-header"
+
+export default function AppLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="min-h-screen flex">
+      {/* Sidebar navigation */}
+      <AppSidebar />
+
+      {/* Main content area */}
+      <div className="flex-1 flex flex-col">
+        <AppHeader />
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  )
+}

package/templates/advanced/src/app/app/page.tsx

@@ -0,0 +1,36 @@
+// Main app dashboard
+// Entry point after authentication
+
+export default function AppDashboard() {
+  return (
+    <div className="container mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <div className="border rounded-lg p-6">
+          <h3 className="text-sm font-medium text-muted-foreground mb-2">Total Revenue</h3>
+          <p className="text-3xl font-bold">$45,231</p>
+          <p className="text-sm text-muted-foreground mt-2">+20.1% from last month</p>
+        </div>
+
+        <div className="border rounded-lg p-6">
+          <h3 className="text-sm font-medium text-muted-foreground mb-2">Active Users</h3>
+          <p className="text-3xl font-bold">2,350</p>
+          <p className="text-sm text-muted-foreground mt-2">+180 from last month</p>
+        </div>
+
+        <div className="border rounded-lg p-6">
+          <h3 className="text-sm font-medium text-muted-foreground mb-2">Conversion Rate</h3>
+          <p className="text-3xl font-bold">3.2%</p>
+          <p className="text-sm text-muted-foreground mt-2">+0.3% from last month</p>
+        </div>
+
+        <div className="border rounded-lg p-6">
+          <h3 className="text-sm font-medium text-muted-foreground mb-2">Churn Rate</h3>
+          <p className="text-3xl font-bold">0.8%</p>
+          <p className="text-sm text-muted-foreground mt-2">-0.2% from last month</p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/advanced/src/app/app/settings/page.tsx

@@ -0,0 +1,50 @@
+// Settings page
+
+export default function SettingsPage() {
+  return (
+    <div className="container mx-auto">
+      <h1 className="text-3xl font-bold mb-8">Settings</h1>
+
+      <div className="grid gap-6">
+        {/* Profile Settings */}
+        <div className="border rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Profile</h2>
+          <form className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <label className="block text-sm font-medium mb-2">First Name</label>
+                <input type="text" className="w-full px-3 py-2 border rounded-md" placeholder="John" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-2">Last Name</label>
+                <input type="text" className="w-full px-3 py-2 border rounded-md" placeholder="Doe" />
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">Email</label>
+              <input type="email" className="w-full px-3 py-2 border rounded-md" placeholder="john@example.com" />
+            </div>
+            <button type="submit" className="px-4 py-2 bg-foreground text-background rounded-md hover:opacity-90">
+              Save Changes
+            </button>
+          </form>
+        </div>
+
+        {/* Security Settings */}
+        <div className="border rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Security</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">Change Password</label>
+              <button className="px-4 py-2 border rounded-md hover:bg-muted">Update Password</button>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">Two-Factor Authentication</label>
+              <button className="px-4 py-2 border rounded-md hover:bg-muted">Enable 2FA</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/advanced/src/app/auth/login/page.tsx

@@ -0,0 +1,41 @@
+// Auth feature - login page
+// Part of the auth domain
+
+export default function LoginPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center p-6">
+      <div className="w-full max-w-md">
+        <h1 className="text-3xl font-bold mb-2 text-center">Sign In</h1>
+        <p className="text-muted-foreground text-center mb-8">Enter your credentials to access your account</p>
+
+        <div className="border rounded-lg p-8">
+          <form className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium mb-2">Email Address</label>
+              <input type="email" className="w-full px-4 py-2 border rounded-md" placeholder="you@example.com" />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-2">Password</label>
+              <input type="password" className="w-full px-4 py-2 border rounded-md" placeholder="••••••••" />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full bg-foreground text-background py-3 rounded-md hover:opacity-90 font-medium"
+            >
+              Sign In
+            </button>
+          </form>
+
+          <p className="text-center text-sm text-muted-foreground mt-6">
+            Don't have an account?{" "}
+            <a href="/auth/signup" className="underline">
+              Sign up
+            </a>
+          </p>
+        </div>
+      </div>
+    </main>
+  )
+}

package/templates/advanced/src/app/auth/signup/page.tsx

@@ -0,0 +1,45 @@
+// Auth feature - signup page
+
+export default function SignupPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center p-6">
+      <div className="w-full max-w-md">
+        <h1 className="text-3xl font-bold mb-2 text-center">Create Account</h1>
+        <p className="text-muted-foreground text-center mb-8">Get started with your free account</p>
+
+        <div className="border rounded-lg p-8">
+          <form className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium mb-2">Full Name</label>
+              <input type="text" className="w-full px-4 py-2 border rounded-md" placeholder="John Doe" />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-2">Email Address</label>
+              <input type="email" className="w-full px-4 py-2 border rounded-md" placeholder="you@example.com" />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-2">Password</label>
+              <input type="password" className="w-full px-4 py-2 border rounded-md" placeholder="••••••••" />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full bg-foreground text-background py-3 rounded-md hover:opacity-90 font-medium"
+            >
+              Create Account
+            </button>
+          </form>
+
+          <p className="text-center text-sm text-muted-foreground mt-6">
+            Already have an account?{" "}
+            <a href="/auth/login" className="underline">
+              Sign in
+            </a>
+          </p>
+        </div>
+      </div>
+    </main>
+  )
+}

package/templates/advanced/src/app/globals.css

@@ -1,8 +1,151 @@
-* {
-	box-sizing: border-box;
-}
-
-body {
-	margin: 0;
-	font-family: system-ui, sans-serif;
-}
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: 0 0% 89.8%;
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: 0 0% 14.9%;
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+}
+
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+
+.border {
+  border: 1px solid hsl(var(--border));
+}
+
+.bg-muted {
+  background: hsl(var(--muted));
+}