@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

package/dist/templates/web/marketplace/template/src/app/page.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import { ShoppingCart, Store, Search, Star, ArrowRight, User, LogOut } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+
+const FEATURED_PRODUCTS = [
+  { id: 1, name: 'Premium Widget', price: 49.99, vendor: 'TechCo', rating: 4.8, image: '/placeholder.jpg' },
+  { id: 2, name: 'Pro Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, image: '/placeholder.jpg' },
+  { id: 3, name: 'Designer Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, image: '/placeholder.jpg' },
+  { id: 4, name: 'Analytics Suite', price: 199.99, vendor: 'DataCorp', rating: 4.6, image: '/placeholder.jpg' },
+]
+
+const CATEGORIES = [
+  { name: 'Software', count: 234, icon: '💻' },
+  { name: 'Templates', count: 156, icon: '📄' },
+  { name: 'Services', count: 89, icon: '🔧' },
+  { name: 'Courses', count: 67, icon: '📚' },
+]
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const projectName = "{{titleCaseName}}"
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
+              {projectName}
+            </Link>
+
+            {/* Search */}
+            <div className="flex-1 max-w-xl mx-8">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Search products..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+                />
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-4">
+              <Link href="/cart">
+                <Button variant="outline" size="sm">
+                  <ShoppingCart className="w-4 h-4 mr-2" />
+                  Cart
+                </Button>
+              </Link>
+              {loading ? (
+                <div className="text-sm text-gray-600">Loading...</div>
+              ) : user ? (
+                <div className="flex items-center gap-2">
+                  <Link href="/dashboard">
+                    <Button variant="outline" size="sm">
+                      <User className="w-4 h-4 mr-2" />
+                      Dashboard
+                    </Button>
+                  </Link>
+                  <Button variant="ghost" size="sm" onClick={handleSignOut}>
+                    <LogOut className="w-4 h-4" />
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex gap-2">
+                  <Link href="/login">
+                    <Button variant="outline" size="sm">Sign In</Button>
+                  </Link>
+                  <Link href="/signup">
+                    <Button size="sm">Get Started</Button>
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Hero */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            Your Digital Marketplace
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+            Discover amazing products from verified vendors. Buy and sell with confidence.
+          </p>
+        </div>
+
+        {/* Categories */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+          {CATEGORIES.map((category) => (
+            <Card key={category.name} className="p-6 text-center hover:shadow-lg transition-shadow cursor-pointer">
+              <div className="text-4xl mb-3">{category.icon}</div>
+              <h3 className="font-semibold text-gray-900 dark:text-white">{category.name}</h3>
+              <p className="text-sm text-gray-500">{category.count} items</p>
+            </Card>
+          ))}
+        </div>
+
+        {/* Featured Products */}
+        <div className="mb-12">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Featured Products</h2>
+            <Link href="/products">
+              <Button variant="ghost">
+                View All
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Link>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {FEATURED_PRODUCTS.map((product) => (
+              <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+                <div className="aspect-square bg-gray-100 dark:bg-gray-700" />
+                <div className="p-4">
+                  <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{product.name}</h3>
+                  <p className="text-sm text-gray-500 mb-2">by {product.vendor}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-lg font-bold text-blue-600">${product.price}</span>
+                    <div className="flex items-center text-yellow-500">
+                      <Star className="w-4 h-4 fill-current" />
+                      <span className="text-sm ml-1">{product.rating}</span>
+                    </div>
+                  </div>
+                  <Button className="w-full mt-3" size="sm">Add to Cart</Button>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Become a Vendor CTA */}
+        <Card className="p-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
+          <Store className="w-12 h-12 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold mb-2">Become a Vendor</h2>
+          <p className="mb-6 opacity-90 max-w-md mx-auto">
+            Start selling your products to thousands of customers. Low fees, powerful tools.
+          </p>
+          <Link href="/vendors/apply">
+            <Button variant="secondary" size="lg">Apply Now</Button>
+          </Link>
+        </Card>
+      </div>
+    </main>
+  )
+}

package/dist/templates/web/marketplace/template/src/app/products/page.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Search, Filter, Star, ShoppingCart } from 'lucide-react'
+import Link from 'next/link'
+
+const PRODUCTS = [
+  { id: 1, name: 'Premium Widget Pro', price: 49.99, vendor: 'TechCo', rating: 4.8, category: 'Software', sales: 234 },
+  { id: 2, name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, category: 'Software', sales: 156 },
+  { id: 3, name: 'UI Design Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, category: 'Templates', sales: 89 },
+  { id: 4, name: 'Analytics Dashboard', price: 199.99, vendor: 'DataCorp', rating: 4.6, category: 'Software', sales: 67 },
+  { id: 5, name: 'Marketing Templates', price: 39.99, vendor: 'GrowthLab', rating: 4.5, category: 'Templates', sales: 312 },
+  { id: 6, name: 'API Integration Kit', price: 149.99, vendor: 'APIExperts', rating: 4.8, category: 'Software', sales: 178 },
+  { id: 7, name: 'SEO Course Bundle', price: 99.99, vendor: 'SEOMasters', rating: 4.9, category: 'Courses', sales: 245 },
+  { id: 8, name: 'Cloud Consulting', price: 299.99, vendor: 'CloudPros', rating: 4.7, category: 'Services', sales: 45 },
+]
+
+const CATEGORIES = ['All', 'Software', 'Templates', 'Courses', 'Services']
+
+export default function ProductsPage() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('All')
+  const [sortBy, setSortBy] = useState('popular')
+
+  const filteredProducts = PRODUCTS
+    .filter(p => selectedCategory === 'All' || p.category === selectedCategory)
+    .filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
+    .sort((a, b) => {
+      if (sortBy === 'popular') return b.sales - a.sales
+      if (sortBy === 'price-low') return a.price - b.price
+      if (sortBy === 'price-high') return b.price - a.price
+      if (sortBy === 'rating') return b.rating - a.rating
+      return 0
+    })
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Products</h1>
+
+          {/* Search and Filters */}
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search products..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value)}
+                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+              >
+                <option value="popular">Most Popular</option>
+                <option value="rating">Highest Rated</option>
+                <option value="price-low">Price: Low to High</option>
+                <option value="price-high">Price: High to Low</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Categories */}
+          <div className="flex gap-2 mt-4 overflow-x-auto pb-2">
+            {CATEGORIES.map((category) => (
+              <Button
+                key={category}
+                variant={selectedCategory === category ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setSelectedCategory(category)}
+              >
+                {category}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Products Grid */}
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="flex items-center justify-between mb-6">
+          <p className="text-gray-600 dark:text-gray-300">
+            {filteredProducts.length} products found
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {filteredProducts.map((product) => (
+            <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+              <div className="aspect-square bg-gray-100 dark:bg-gray-700 relative">
+                <span className="absolute top-2 left-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">
+                  {product.category}
+                </span>
+              </div>
+              <div className="p-4">
+                <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{product.name}</h3>
+                <p className="text-sm text-gray-500 mb-2">by {product.vendor}</p>
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-lg font-bold text-blue-600">${product.price}</span>
+                  <div className="flex items-center text-yellow-500">
+                    <Star className="w-4 h-4 fill-current" />
+                    <span className="text-sm ml-1">{product.rating}</span>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button className="flex-1" size="sm">
+                    <ShoppingCart className="w-4 h-4 mr-1" />
+                    Add
+                  </Button>
+                  <Link href={`/products/${product.id}`} className="flex-1">
+                    <Button variant="outline" size="sm" className="w-full">View</Button>
+                  </Link>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/marketplace/template/src/components/providers/app-providers.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { DLLProvider } from '@digilogiclabs/app-sdk'
+
+interface AppProvidersProps {
+  children: React.ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <DLLProvider
+        config={{
+          auth: {
+            provider: 'supabase',
+          },
+          payments: {
+            provider: 'stripe',
+          },
+        }}
+      >
+        {children}
+      </DLLProvider>
+    </ThemeProvider>
+  )
+}

package/dist/templates/web/marketplace/template/src/lib/auth-server.ts

@@ -0,0 +1,33 @@
+import { redirect } from 'next/navigation'
+import { createClient } from './supabase/server'
+
+export interface AuthUser {
+  id: string
+  email: string | null
+  name?: string | null
+}
+
+export async function getUser(): Promise<AuthUser | null> {
+  const supabase = await createClient()
+  const { data: { user }, error } = await supabase.auth.getUser()
+
+  if (error || !user) {
+    return null
+  }
+
+  return {
+    id: user.id,
+    email: user.email ?? null,
+    name: user.user_metadata?.name ?? user.user_metadata?.full_name ?? null,
+  }
+}
+
+export async function requireAuth(): Promise<AuthUser> {
+  const user = await getUser()
+
+  if (!user) {
+    redirect('/login')
+  }
+
+  return user
+}

package/dist/templates/web/marketplace/template/src/lib/supabase/client.ts

@@ -0,0 +1,8 @@
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+}

package/dist/templates/web/marketplace/template/src/lib/supabase/server.ts

@@ -0,0 +1,27 @@
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export async function createClient() {
+  const cookieStore = await cookies()
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            )
+          } catch {
+            // Server Component context
+          }
+        },
+      },
+    }
+  )
+}

package/dist/templates/web/marketplace/template/src/lib/utils.ts

@@ -0,0 +1,19 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatCurrency(amount: number, currency = 'USD') {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  }).format(amount)
+}
+
+export function formatDate(date: Date | string) {
+  return new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'medium',
+  }).format(new Date(date))
+}

package/dist/templates/web/marketplace/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "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/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/templates/web/micro-saas/template/.env.example

@@ -0,0 +1,10 @@
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+
+# Application
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+
+# Optional: Analytics
+# NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id

package/dist/templates/web/micro-saas/template/README.md

@@ -0,0 +1,63 @@
+# {{titleCaseName}}
+
+{{description}}
+
+## Quick Start
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables:**
+   ```bash
+   cp .env.example .env.local
+   ```
+   Then update `.env.local` with your Supabase credentials.
+
+3. **Run the development server:**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open [http://localhost:3000](http://localhost:3000)**
+
+## Features
+
+- **Authentication** - Secure auth with Supabase
+- **Dashboard** - User dashboard with stats
+- **Responsive Design** - Mobile-first approach
+- **Dark Mode** - Built-in theme support
+
+## Tech Stack
+
+- **Framework:** Next.js 15
+- **Language:** TypeScript
+- **Styling:** Tailwind CSS
+- **Auth:** Supabase
+- **UI Components:** @digilogiclabs/saas-factory-ui
+- **Hooks:** @digilogiclabs/app-sdk
+
+## Project Structure
+
+```
+src/
+├── app/                 # Next.js App Router pages
+│   ├── dashboard/       # Protected dashboard
+│   ├── login/           # Authentication
+│   └── signup/          # User registration
+├── components/          # React components
+│   └── providers/       # Context providers
+└── lib/                 # Utilities and helpers
+    └── supabase/        # Supabase client setup
+```
+
+## Deployment
+
+Deploy to Vercel with one click:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new)
+
+## License
+
+MIT - Built with DLL Platform

package/dist/templates/web/micro-saas/template/middleware.ts

@@ -0,0 +1,53 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({
+    request,
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value }) =>
+            request.cookies.set(name, value)
+          )
+          supabaseResponse = NextResponse.next({
+            request,
+          })
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options)
+          )
+        },
+      },
+    }
+  )
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  // Redirect to login if accessing protected route without auth
+  if (
+    !user &&
+    request.nextUrl.pathname.startsWith('/dashboard')
+  ) {
+    const url = request.nextUrl.clone()
+    url.pathname = '/login'
+    return NextResponse.redirect(url)
+  }
+
+  return supabaseResponse
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}

package/dist/templates/web/micro-saas/template/next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.supabase.co',
+      },
+    ],
+  },
+}
+
+module.exports = nextConfig

package/dist/templates/web/micro-saas/template/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} - Micro SaaS MVP",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@digilogiclabs/platform-core": "^1.1.0",
+    "@digilogiclabs/app-sdk": "^1.0.0",
+    "@digilogiclabs/saas-factory-auth": "^1.0.7",
+    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "tailwindcss": "^4.0.0",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.0.0",
+    "next-themes": "^0.4.0",
+    "lucide-react": "^0.460.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^15.0.0",
+    "prettier": "^3.4.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}