@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

package/dist/templates/web/marketplace/template/README.md

@@ -0,0 +1,66 @@
+# {{titleCaseName}}
+
+{{description}} - A multi-vendor digital marketplace.
+
+## Features
+
+- **Product Listings** - Browse and search products by category
+- **Vendor Dashboard** - Sellers can manage products and view analytics
+- **Shopping Cart** - Add products and checkout with Stripe
+- **User Authentication** - Secure auth with Supabase
+- **Responsive Design** - Mobile-first approach
+
+## Quick Start
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables:**
+   ```bash
+   cp .env.example .env.local
+   ```
+   Update with your Supabase and Stripe credentials.
+
+3. **Run the development server:**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open [http://localhost:3000](http://localhost:3000)**
+
+## Tech Stack
+
+- **Framework:** Next.js 15
+- **Language:** TypeScript
+- **Styling:** Tailwind CSS
+- **Auth:** Supabase
+- **Payments:** Stripe
+- **UI Components:** @digilogiclabs/saas-factory-ui
+- **State Management:** Zustand
+
+## Project Structure
+
+```
+src/
+├── app/                 # Next.js App Router pages
+│   ├── dashboard/       # Seller dashboard
+│   ├── products/        # Product listings
+│   ├── cart/            # Shopping cart
+│   └── vendors/         # Vendor pages
+├── components/          # React components
+│   ├── marketplace/     # Marketplace-specific components
+│   └── providers/       # Context providers
+└── lib/                 # Utilities and helpers
+```
+
+## 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/marketplace/template/middleware.ts

@@ -0,0 +1,56 @@
+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') ||
+     request.nextUrl.pathname.startsWith('/products/new') ||
+     request.nextUrl.pathname.startsWith('/orders') ||
+     request.nextUrl.pathname.startsWith('/payouts'))
+  ) {
+    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/marketplace/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/marketplace/template/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} - Multi-vendor Marketplace",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "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-payments": "^1.2.9",
+    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "stripe": "^16.12.0",
+    "@stripe/react-stripe-js": "^2.8.0",
+    "@stripe/stripe-js": "^4.10.0",
+    "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",
+    "zustand": "^4.5.0"
+  },
+  "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",
+    "vitest": "^2.1.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

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

@@ -0,0 +1,147 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Trash2, Plus, Minus, ShoppingBag, ArrowRight } from 'lucide-react'
+import Link from 'next/link'
+
+interface CartItem {
+  id: number
+  name: string
+  price: number
+  vendor: string
+  quantity: number
+}
+
+const INITIAL_CART: CartItem[] = [
+  { id: 1, name: 'Premium Widget Pro', price: 49.99, vendor: 'TechCo', quantity: 1 },
+  { id: 2, name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', quantity: 1 },
+]
+
+export default function CartPage() {
+  const [cartItems, setCartItems] = useState<CartItem[]>(INITIAL_CART)
+
+  const updateQuantity = (id: number, delta: number) => {
+    setCartItems(items =>
+      items.map(item =>
+        item.id === id
+          ? { ...item, quantity: Math.max(1, item.quantity + delta) }
+          : item
+      )
+    )
+  }
+
+  const removeItem = (id: number) => {
+    setCartItems(items => items.filter(item => item.id !== id))
+  }
+
+  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const platformFee = subtotal * 0.05
+  const total = subtotal + platformFee
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <div className="flex items-center justify-between mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Shopping Cart</h1>
+          <Link href="/products">
+            <Button variant="outline" size="sm">Continue Shopping</Button>
+          </Link>
+        </div>
+
+        {cartItems.length === 0 ? (
+          <Card className="p-12 text-center">
+            <ShoppingBag className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              Your cart is empty
+            </h2>
+            <p className="text-gray-600 dark:text-gray-300 mb-6">
+              Browse our products and add items to your cart.
+            </p>
+            <Link href="/products">
+              <Button>Browse Products</Button>
+            </Link>
+          </Card>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Cart Items */}
+            <div className="lg:col-span-2 space-y-4">
+              {cartItems.map((item) => (
+                <Card key={item.id} className="p-4">
+                  <div className="flex items-center gap-4">
+                    <div className="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-lg flex-shrink-0" />
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-gray-900 dark:text-white">{item.name}</h3>
+                      <p className="text-sm text-gray-500">by {item.vendor}</p>
+                      <p className="text-lg font-bold text-blue-600 mt-1">${item.price}</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => updateQuantity(item.id, -1)}
+                      >
+                        <Minus className="w-4 h-4" />
+                      </Button>
+                      <span className="w-8 text-center">{item.quantity}</span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => updateQuantity(item.id, 1)}
+                      >
+                        <Plus className="w-4 h-4" />
+                      </Button>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeItem(item.id)}
+                      className="text-red-600 hover:text-red-700"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            {/* Order Summary */}
+            <div className="lg:col-span-1">
+              <Card className="p-6 sticky top-24">
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                  Order Summary
+                </h2>
+
+                <div className="space-y-3 mb-6">
+                  <div className="flex justify-between text-gray-600 dark:text-gray-300">
+                    <span>Subtotal</span>
+                    <span>${subtotal.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between text-gray-600 dark:text-gray-300">
+                    <span>Platform Fee (5%)</span>
+                    <span>${platformFee.toFixed(2)}</span>
+                  </div>
+                  <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
+                    <div className="flex justify-between font-bold text-gray-900 dark:text-white">
+                      <span>Total</span>
+                      <span>${total.toFixed(2)}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <Button className="w-full" size="lg">
+                  Checkout
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+
+                <p className="text-xs text-gray-500 text-center mt-4">
+                  Secure checkout powered by Stripe
+                </p>
+              </Card>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,149 @@
+import { Suspense } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Package, DollarSign, ShoppingBag, TrendingUp, Plus } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+async function getSellerStats(userId: string) {
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return {
+    totalProducts: 12,
+    totalSales: 45,
+    revenue: 2340.50,
+    views: 1520,
+  }
+}
+
+function StatCard({ title, value, icon: Icon, trend }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+  trend?: string
+}) {
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
+          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+          {trend && <p className="text-sm text-green-600 mt-1">{trend}</p>}
+        </div>
+        <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
+          <Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+async function SellerStats({ userId }: { userId: string }) {
+  const stats = await getSellerStats(userId)
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatCard title="Total Products" value={stats.totalProducts} icon={Package} />
+      <StatCard title="Total Sales" value={stats.totalSales} icon={ShoppingBag} trend="+12% this week" />
+      <StatCard title="Revenue" value={`$${stats.revenue.toFixed(2)}`} icon={DollarSign} trend="+8% this month" />
+      <StatCard title="Product Views" value={stats.views.toLocaleString()} icon={TrendingUp} />
+    </div>
+  )
+}
+
+function StatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {[...Array(4)].map((_, i) => (
+        <Card key={i} className="p-6">
+          <div className="animate-pulse">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Seller Dashboard
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mt-1">
+              Welcome back, {user.name || user.email}
+            </p>
+          </div>
+          <Link href="/products/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Product
+            </Button>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <Suspense fallback={<StatsSkeleton />}>
+          <SellerStats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <Package className="h-6 w-6 text-blue-600 mr-3" />
+              <h3 className="text-lg font-semibold">My Products</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              Manage your product listings and inventory.
+            </p>
+            <Link href="/products/manage">
+              <Button className="w-full">View Products</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <ShoppingBag className="h-6 w-6 text-blue-600 mr-3" />
+              <h3 className="text-lg font-semibold">Orders</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              View and manage customer orders.
+            </p>
+            <Link href="/orders">
+              <Button variant="outline" className="w-full">View Orders</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <DollarSign className="h-6 w-6 text-blue-600 mr-3" />
+              <h3 className="text-lg font-semibold">Payouts</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              View earnings and payout history.
+            </p>
+            <Link href="/payouts">
+              <Button variant="outline" className="w-full">View Payouts</Button>
+            </Link>
+          </Card>
+        </div>
+
+        {/* Recent Orders */}
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold mb-4">Recent Orders</h3>
+          <div className="text-center py-8 text-gray-500">
+            <ShoppingBag className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No orders yet. Share your products to start selling!</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/marketplace/template/src/app/globals.css

@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: oklch(24% 0.15 256);
+  --color-background: oklch(100% 0 0);
+  --color-foreground: oklch(10% 0 0);
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --color-background: oklch(15% 0.02 256);
+  --color-foreground: oklch(95% 0 0);
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}

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

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}} - Digital Marketplace',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          {children}
+        </AppProviders>
+      </body>
+    </html>
+  )
+}