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

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

@@ -0,0 +1,151 @@
+@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));
+}

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

@@ -0,0 +1,19 @@
+import type React from "react"
+import "./globals.css"
+
+export const metadata = {
+  title: "Asynx SaaS",
+  description: "Production-ready SaaS template",
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

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

@@ -0,0 +1,25 @@
+// Landing page - public facing
+// In advanced apps, this is often separate from the app shell
+
+import Link from "next/link"
+
+export default function LandingPage() {
+  return (
+    <main className="min-h-screen">
+      <section className="container mx-auto px-6 py-20 text-center">
+        <h1 className="text-5xl font-bold mb-6">Welcome to Your SaaS Platform</h1>
+        <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+          Built with a scalable, production-ready architecture
+        </p>
+        <div className="flex gap-4 justify-center">
+          <Link href="/app" className="px-6 py-3 bg-foreground text-background rounded-md hover:opacity-90">
+            Get Started
+          </Link>
+          <Link href="/auth/login" className="px-6 py-3 border rounded-md hover:bg-muted">
+            Sign In
+          </Link>
+        </div>
+      </section>
+    </main>
+  )
+}

package/templates/advanced/src/lib/api/client.ts

@@ -0,0 +1,67 @@
+// Shared infrastructure - API client
+// Centralized HTTP client for all features
+
+export class ApiError extends Error {
+	constructor(message: string, public status: number, public data?: unknown) {
+		super(message);
+		this.name = 'ApiError';
+	}
+}
+
+export class ApiClient {
+	private baseUrl: string;
+
+	constructor(baseUrl = '/api') {
+		this.baseUrl = baseUrl;
+	}
+
+	private async request<T>(
+		endpoint: string,
+		options?: RequestInit,
+	): Promise<T> {
+		const url = `${this.baseUrl}${endpoint}`;
+
+		const response = await fetch(url, {
+			...options,
+			headers: {
+				'Content-Type': 'application/json',
+				...options?.headers,
+			},
+		});
+
+		if (!response.ok) {
+			const error = await response.json().catch(() => ({}));
+			throw new ApiError(
+				error.message || 'Request failed',
+				response.status,
+				error,
+			);
+		}
+
+		return response.json();
+	}
+
+	async get<T>(endpoint: string): Promise<T> {
+		return this.request<T>(endpoint, { method: 'GET' });
+	}
+
+	async post<T>(endpoint: string, data?: unknown): Promise<T> {
+		return this.request<T>(endpoint, {
+			method: 'POST',
+			body: data ? JSON.stringify(data) : undefined,
+		});
+	}
+
+	async put<T>(endpoint: string, data?: unknown): Promise<T> {
+		return this.request<T>(endpoint, {
+			method: 'PUT',
+			body: data ? JSON.stringify(data) : undefined,
+		});
+	}
+
+	async delete<T>(endpoint: string): Promise<T> {
+		return this.request<T>(endpoint, { method: 'DELETE' });
+	}
+}
+
+export const apiClient = new ApiClient();

package/templates/advanced/src/lib/api/config/app.ts

@@ -0,0 +1,19 @@
+// Shared infrastructure - App configuration
+// Environment-aware configuration
+
+export const appConfig = {
+	name: 'Your SaaS',
+	description: 'Production-ready SaaS template',
+	url: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
+	api: {
+		baseUrl: process.env.NEXT_PUBLIC_API_URL || '/api',
+	},
+	features: {
+		auth: true,
+		billing: true,
+		analytics: true,
+	},
+} as const;
+
+export const isProduction = process.env.NODE_ENV === 'production';
+export const isDevelopment = process.env.NODE_ENV === 'development';

package/templates/advanced/src/lib/api/config/constants.ts

@@ -0,0 +1,38 @@
+// Shared infrastructure - Constants
+// Application-wide constants
+
+export const ROUTES = {
+	// Public routes
+	HOME: '/',
+	LOGIN: '/auth/login',
+	SIGNUP: '/auth/signup',
+
+	// App routes
+	APP: '/app',
+	DASHBOARD: '/app',
+	BILLING: '/app/billing',
+	SETTINGS: '/app/settings',
+	ANALYTICS: '/app/analytics',
+} as const;
+
+export const API_ROUTES = {
+	AUTH_LOGIN: '/api/auth/login',
+	AUTH_SIGNUP: '/api/auth/signup',
+	AUTH_LOGOUT: '/api/auth/logout',
+	USER_PROFILE: '/api/user/profile',
+	BILLING_SUBSCRIPTION: '/api/billing/subscription',
+} as const;
+
+export const SUBSCRIPTION_PLANS = {
+	FREE: { name: 'Free', price: 0, features: ['Basic features'] },
+	PRO: {
+		name: 'Pro',
+		price: 49,
+		features: ['All features', 'Priority support'],
+	},
+	ENTERPRISE: {
+		name: 'Enterprise',
+		price: 199,
+		features: ['Custom everything'],
+	},
+} as const;

package/templates/advanced/src/lib/api/features/analytics/lib/analytics-service.ts

@@ -0,0 +1,26 @@
+// Analytics feature - Service layer
+// Track events and metrics
+
+export type AnalyticsEvent = {
+  name: string
+  properties?: Record<string, unknown>
+}
+
+export class AnalyticsService {
+  track(event: AnalyticsEvent) {
+    // TODO: Send to analytics provider
+    console.log("Analytics event:", event)
+  }
+
+  identify(userId: string, traits?: Record<string, unknown>) {
+    // TODO: Identify user
+    console.log("Identify user:", userId, traits)
+  }
+
+  page(name: string) {
+    // TODO: Track page view
+    console.log("Page view:", name)
+  }
+}
+
+export const analytics = new AnalyticsService()

package/templates/advanced/src/lib/api/features/app-shell/components/app-header.tsx

@@ -0,0 +1,18 @@
+// App shell feature - Header component
+
+export function AppHeader() {
+  return (
+    <header className="border-b px-6 py-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <input type="search" placeholder="Search..." className="px-4 py-2 border rounded-md w-80" />
+        </div>
+
+        <div className="flex items-center gap-4">
+          <button className="p-2 hover:bg-muted rounded-md">🔔</button>
+          <button className="p-2 hover:bg-muted rounded-md">👤</button>
+        </div>
+      </div>
+    </header>
+  )
+}

package/templates/advanced/src/lib/api/features/app-shell/components/app-sidebar.tsx

@@ -0,0 +1,38 @@
+// App shell feature - Sidebar component
+// This is part of the core app navigation infrastructure
+
+import Link from "next/link"
+
+export function AppSidebar() {
+  const navigation = [
+    { name: "Dashboard", href: "/app", icon: "📊" },
+    { name: "Analytics", href: "/app/analytics", icon: "📈" },
+    { name: "Billing", href: "/app/billing", icon: "💳" },
+    { name: "Settings", href: "/app/settings", icon: "⚙️" },
+  ]
+
+  return (
+    <aside className="w-64 border-r flex flex-col">
+      <div className="p-6 border-b">
+        <h1 className="text-xl font-bold">Your SaaS</h1>
+      </div>
+
+      <nav className="flex-1 p-4">
+        <ul className="space-y-2">
+          {navigation.map((item) => (
+            <li key={item.name}>
+              <Link href={item.href} className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted">
+                <span>{item.icon}</span>
+                <span>{item.name}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+
+      <div className="p-4 border-t">
+        <button className="w-full px-3 py-2 text-left hover:bg-muted rounded-md">Sign Out</button>
+      </div>
+    </aside>
+  )
+}

package/templates/advanced/src/lib/api/features/auth/lib/auth-service.ts

@@ -0,0 +1,36 @@
+// Auth feature - Service layer
+// Business logic for authentication
+
+export class AuthService {
+  async login(email: string, password: string) {
+    // TODO: Implement actual authentication
+    // This is a placeholder structure
+    console.log("Login attempt:", email)
+
+    // Example: call your auth API
+    // const response = await fetch('/api/auth/login', {
+    //   method: 'POST',
+    //   body: JSON.stringify({ email, password })
+    // });
+
+    return { success: true }
+  }
+
+  async signup(email: string, password: string, name: string) {
+    // TODO: Implement signup
+    console.log("Signup attempt:", email, name)
+    return { success: true }
+  }
+
+  async logout() {
+    // TODO: Implement logout
+    console.log("Logout")
+  }
+
+  async getCurrentUser() {
+    // TODO: Get current user session
+    return null
+  }
+}
+
+export const authService = new AuthService()

package/templates/advanced/src/lib/api/features/billing/lib/billing-service.ts

@@ -0,0 +1,38 @@
+// Billing feature - Service layer
+// Business logic for subscription and payments
+
+export type SubscriptionPlan = "free" | "pro" | "enterprise"
+
+export interface Subscription {
+  plan: SubscriptionPlan
+  status: "active" | "canceled" | "past_due"
+  currentPeriodEnd: Date
+}
+
+export class BillingService {
+  async getSubscription(): Promise<Subscription | null> {
+    // TODO: Fetch from your billing provider (Stripe, etc.)
+    return {
+      plan: "pro",
+      status: "active",
+      currentPeriodEnd: new Date("2024-01-01"),
+    }
+  }
+
+  async updateSubscription(plan: SubscriptionPlan) {
+    // TODO: Update subscription via API
+    console.log("Updating to plan:", plan)
+  }
+
+  async cancelSubscription() {
+    // TODO: Cancel subscription
+    console.log("Canceling subscription")
+  }
+
+  async getInvoices() {
+    // TODO: Fetch invoice history
+    return []
+  }
+}
+
+export const billingService = new BillingService()

package/templates/advanced/src/types/index.ts

@@ -0,0 +1,21 @@
+export type User = {
+	id: string;
+	email: string;
+	name: string;
+	role: 'user' | 'admin';
+	createdAt: Date;
+};
+
+export type ApiResponse<T> = {
+	data: T;
+	message?: string;
+};
+
+export type PaginatedResponse<T> = {
+	data: T[];
+	pagination: {
+		page: number;
+		limit: number;
+		total: number;
+	};
+};

package/templates/advanced/tsconfig.json

@@ -0,0 +1,29 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./src/*"],
+			"@/features/*": ["./src/features/*"],
+			"@/lib/*": ["./src/lib/*"]
+		}
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"exclude": ["node_modules"]
+}

package/templates/standard/README.md

@@ -0,0 +1,53 @@
+# Standard Template
+
+This template is designed for **dashboards, content platforms, and early-stage startups**.
+
+## Structure
+
+```
+src/
+├── app/
+│   ├── (public)/          # Public routes (landing, login, signup)
+│   │   ├── login/
+│   │   └── layout.tsx
+│   ├── (dashboard)/       # Authenticated routes
+│   │   ├── dashboard/
+│   │   └── layout.tsx
+│   ├── layout.tsx         # Root layout
+│   ├── page.tsx           # Homepage
+│   └── globals.css
+├── components/
+│   ├── ui/                # Reusable UI components
+│   │   ├── button.tsx
+│   │   └── card.tsx
+│   └── layout/            # Layout components
+│       ├── header.tsx
+│       └── footer.tsx
+├── lib/
+│   ├── api.ts             # API client utilities
+│   └── constants.ts       # App constants
+└── utils/                 # Utility functions
+```
+
+## Key Features
+
+- **Route Groups**: Separate public and authenticated layouts
+- **Component Library**: Basic UI components to get started
+- **API Client**: Centralized API utilities
+- **Layout Hierarchy**: Header, footer, and sidebar examples
+- **TypeScript**: Full type safety
+
+## Getting Started
+
+1. Customize the layouts in \`app/(public)\` and \`app/(dashboard)\`
+2. Add your UI components in \`components/ui\`
+3. Configure API endpoints in \`lib/constants.ts\`
+4. Build your features!
+
+## Auth-Ready Structure
+
+This template is structured to easily integrate authentication:
+- Public routes for unauthenticated users
+- Dashboard routes for authenticated users
+- Add middleware for route protection when ready
+```

package/templates/{moderate → standard}/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/standard/postcss.config.mjs

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