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

package/CONTRIBUTING.md

@@ -4,19 +4,17 @@ Thank you for considering contributing ❤️ We appreciate your help in making
 
 We welcome contributions in the form of:
 
-* 🐛 Bug fixes
-* ✨ Template improvements
-* 🆕 New templates
-* 📚 Documentation improvements
+- 🐛 Bug fixes
+- ✨ Template improvements
+- 🆕 New templates
+- 📚 Documentation improvements
 
 ---
 
 ## 🛠 Development Setup
 
-
 To get started with development, clone the repository and install dependencies:
 
-
 ```bash
 git clone [https://github.com/Asynx-Pvt-Ltd/create-asynx-next-app.git](https://github.com/Asynx-Pvt-Ltd/create-asynx-next-app.git)
 cd create-asynx-next-app
@@ -28,15 +26,16 @@ pnpm dev
 ```
 
 ## 📦 Templates
+
 The core project templates live in the templates/ directory:
 
 ```bash
 templates/
- ├─ simple/
- ├─ moderate/
- └─ saas/
- ```
- 
+ ├─ starter/
+ ├─ standard/
+ └─ advanced/
+```
+
 Each template must adhere to the following rules:
 
 - Be a valid Next.js App Router project.
@@ -44,6 +43,7 @@ Each template must adhere to the following rules:
 - Avoid external runtime dependencies on Asynx packages.
 
 ## 🧪 Testing changes
+
 Before opening a Pull Request, please ensure your changes work by building the CLI and testing it locally:
 
 ```bash
@@ -54,6 +54,7 @@ node dist/index.js test-app
 Verify the generated application in the test-app directory runs correctly.
 
 ## 📌 Guidelines
+
 When writing code, please follow these principles:
 
 - Keep code readable.
@@ -63,6 +64,7 @@ When writing code, please follow these principles:
 Follow the existing structure of the codebase.
 
 ## 📬 Pull Requests
+
 When submitting a Pull Request (PR):
 
 - Describe what you changed.
@@ -71,7 +73,6 @@ When submitting a Pull Request (PR):
 
 Thanks for helping improve the project 🚀
 
-
 ## `CODE_OF_CONDUCT.md`
 
 ---
@@ -82,9 +83,9 @@ This project is governed by a standard open-source code of conduct. We are commi
 
 We expect all contributors to adhere to the following guidelines:
 
-* Be **respectful** of differing viewpoints and experiences.
-* Be **inclusive** and encourage participation from everyone.
-* Be **constructive** in all communication and feedback.
+- Be **respectful** of differing viewpoints and experiences.
+- Be **inclusive** and encourage participation from everyone.
+- Be **constructive** in all communication and feedback.
 
 Harassment, discrimination, or abusive behavior will not be tolerated.
 

package/README.md

@@ -6,7 +6,7 @@
 
 `create-asynx-next-app` gives you a **direction**.
 
-This CLI scaffolds **real-world Next.js architectures** — from simple MVPs to
+This CLI scaffolds **real-world Next.js architectures** — from starter MVPs to
 SaaS-grade applications — without locking you into any framework or vendor.
 
 ## Quick Start
@@ -27,8 +27,8 @@ pnpm create asynx-next-app my-app
 
 During setup, you will be prompted to choose a template:
 
-- **Simple** — landing pages, MVPs, small tools
-- **Moderate** — dashboards, content platforms, startups
+- **Starter** — landing pages, MVPs, small tools
+- **Standard** — dashboards, content platforms, startups
 - **SaaS** — scalable, domain-driven architecture for real products
 
 Templates differ only in structure — you own all the code.

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/dist/cli.js

@@ -7,12 +7,12 @@ function parseArgs() {
     const args = process.argv.slice(2);
     return {
         projectName: args[0],
-        template: args.includes('--simple')
-            ? 'simple'
-            : args.includes('--moderate')
-                ? 'moderate'
-                : args.includes('--saas')
-                    ? 'saas'
+        template: args.includes('--starter')
+            ? 'starter'
+            : args.includes('--standard')
+                ? 'standard'
+                : args.includes('--advanced')
+                    ? 'advanced'
                     : undefined,
     };
 }

package/dist/constants/template.js

@@ -1,16 +1,16 @@
 export const TEMPLATES = [
     {
-        value: 'simple',
-        title: 'Simple App',
+        value: 'starter',
+        title: 'Starter App',
         description: 'Landing pages, MVPs, small tools',
     },
     {
-        value: 'moderate',
-        title: 'Moderate App',
+        value: 'standard',
+        title: 'Standard App',
         description: 'Dashboards, content platforms, startups',
     },
     {
-        value: 'saas',
+        value: 'advanced',
         title: 'SaaS / Complex App',
         description: 'Multi-tenant SaaS, role-based platforms',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@asynx/create-asynx-next-app",
-	"version": "1.0.3",
+	"version": "1.0.6",
 	"description": "Opinionated Next.js App Router scaffolder by Asynx Devs",
 	"type": "module",
 	"bin": {
@@ -20,7 +20,7 @@
 		"scaffold",
 		"boilerplate",
 		"starter",
-		"saas",
+		"advanced",
 		"mvp",
 		"asynx"
 	],

package/src/cli.ts

@@ -14,12 +14,12 @@ function parseArgs(): CliOptions {
 
 	return {
 		projectName: args[0],
-		template: args.includes('--simple')
-			? 'simple'
-			: args.includes('--moderate')
-			? 'moderate'
-			: args.includes('--saas')
-			? 'saas'
+		template: args.includes('--starter')
+			? 'starter'
+			: args.includes('--standard')
+			? 'standard'
+			: args.includes('--advanced')
+			? 'advanced'
 			: undefined,
 	};
 }

package/src/constants/template.ts

@@ -1,18 +1,18 @@
-export type TemplateType = 'simple' | 'moderate' | 'saas';
+export type TemplateType = 'starter' | 'standard' | 'advanced';
 
 export const TEMPLATES = [
 	{
-		value: 'simple',
-		title: 'Simple App',
+		value: 'starter',
+		title: 'Starter App',
 		description: 'Landing pages, MVPs, small tools',
 	},
 	{
-		value: 'moderate',
-		title: 'Moderate App',
+		value: 'standard',
+		title: 'Standard App',
 		description: 'Dashboards, content platforms, startups',
 	},
 	{
-		value: 'saas',
+		value: 'advanced',
 		title: 'SaaS / Complex App',
 		description: 'Multi-tenant SaaS, role-based platforms',
 	},

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/{simple → advanced}/package.json

@@ -13,7 +13,11 @@
 		"react-dom": "latest"
 	},
 	"devDependencies": {
+		"tailwindcss": "^4.0.0",
+		"postcss": "^8.4.0",
+		"autoprefixer": "^10.4.0",
 		"typescript": "^5.0.0",
+		"@types/node": "^20.0.0",
 		"@types/react": "^18.0.0",
 		"@types/react-dom": "^18.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>
+  )
+}