create-scryme-app 9.69.0

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "create-scryme-app",
+  "version": "9.69.0",
+  "description": "CLI to bootstrap a Scryme-powered Next.js application",
+  "bin": {
+    "create-scryme-app": "./bin/cli.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "bin",
+    "dist",
+    "template"
+  ],
+  "dependencies": {
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.33",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.5.1",
+    "typescript": "5.7.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "echo \"no lint script defined\"",
+    "type-check": "tsc --noEmit"
+  }
+}

package/template/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_SCRYME_ORG_SLUG=demo-store
+NEXT_PUBLIC_SCRYME_API_URL=https://api.scryme.com

package/template/README.md

@@ -0,0 +1,33 @@
+# Scryme Next.js Starter E-Commerce App
+
+This boilerplate was generated with `create-scryme-app`. It provides a full Next.js App Router setup pre-configured with `@scryme/sdk`.
+
+## Features
+
+- **SDK Setup**: Pre-configured Scryme V3 Client and Server SDK (`lib/scryme.ts`)
+- **Cart Provider & Hook**: Full shopping cart state management with persistent storage (`providers/cart-provider.tsx`)
+- **Customer Auth**: Authentication state management and profile helpers (`providers/customer-auth-provider.tsx`)
+- **Product Catalog**: Dynamic catalog listing and product detail page
+- **Checkout**: Payment checkout page integrating with `@scryme/sdk` checkout API
+- **Tailwind CSS**: Modern styling with dark mode support
+
+## Getting Started
+
+First, make sure your `.env.local` contains your organization configuration:
+
+```env
+NEXT_PUBLIC_SCRYME_ORG_SLUG=your-org-slug
+NEXT_PUBLIC_SCRYME_API_URL=https://api.scryme.com
+```
+
+Then run the development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see your store in action.

package/template/_gitignore

@@ -0,0 +1,6 @@
+# Next.js App configuration files
+node_modules
+.next
+out
+.env*.local
+.DS_Store

package/template/app/account/page.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useCustomerAuth } from '@/providers/customer-auth-provider';
+import { User, LogOut, Package } from 'lucide-react';
+
+export default function AccountPage() {
+  const { user, login, logout, isLoading } = useCustomerAuth();
+  const [email, setEmail] = useState('');
+
+  if (isLoading) {
+    return <div className="p-8 text-center">Loading account details...</div>;
+  }
+
+  if (!user) {
+    return (
+      <div className="max-w-md mx-auto bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-8 space-y-6">
+        <div className="text-center space-y-2">
+          <User className="w-12 h-12 text-indigo-600 mx-auto" />
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-white">Customer Login</h1>
+          <p className="text-sm text-zinc-500">Enter your email to sign in to your Scryme account.</p>
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            login(email);
+          }}
+          className="space-y-4"
+        >
+          <div>
+            <label className="block text-sm font-medium mb-1">Email</label>
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              className="w-full px-4 py-2 border rounded-lg dark:bg-zinc-800 dark:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-indigo-600"
+            />
+          </div>
+          <button
+            type="submit"
+            className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 rounded-lg transition"
+          >
+            Sign In / Register
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6 sm:p-8 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-950 text-indigo-600 rounded-full flex items-center justify-center font-bold text-lg">
+            {user.firstName?.[0] || user.email?.[0] || 'U'}
+          </div>
+          <div>
+            <h1 className="text-xl font-bold text-zinc-900 dark:text-white">
+              {user.firstName ? `${user.firstName} ${user.lastName || ''}` : 'Customer Account'}
+            </h1>
+            <p className="text-sm text-zinc-500">{user.email}</p>
+          </div>
+        </div>
+
+        <button
+          onClick={logout}
+          className="flex items-center gap-2 text-sm text-red-600 hover:text-red-700 font-medium px-4 py-2 rounded-lg border border-red-200 dark:border-red-900/50"
+        >
+          <LogOut className="w-4 h-4" />
+          Log Out
+        </button>
+      </div>
+
+      <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6 space-y-4">
+        <h2 className="text-lg font-bold flex items-center gap-2">
+          <Package className="w-5 h-5 text-indigo-600" />
+          <span>Order History</span>
+        </h2>
+        <p className="text-sm text-zinc-500">Your recent orders placed with this store will appear here.</p>
+      </div>
+    </div>
+  );
+}

package/template/app/checkout/page.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useCart } from '@/providers/cart-provider';
+import { useCustomerAuth } from '@/providers/customer-auth-provider';
+import { scrymeClient } from '@/lib/scryme';
+import { CheckCircle, CreditCard, Lock } from 'lucide-react';
+import Link from 'next/link';
+
+export default function CheckoutPage() {
+  const { items, subtotal, clearCart } = useCart();
+  const { user } = useCustomerAuth();
+
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState(user?.email || '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [orderId, setOrderId] = useState<string | null>(null);
+
+  const handleCheckout = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (items.length === 0) return;
+
+    setIsSubmitting(true);
+    try {
+      // Use SDK checkout endpoint
+      const res = await scrymeClient.paymentsCheckout.checkout({
+        items: items.map((i) => ({ productId: i.id, quantity: i.quantity, price: i.price })),
+        phone,
+        email,
+      });
+
+      if (res?.data?.id) {
+        setOrderId(res.data.id);
+      } else {
+        setOrderId(`ORD-${Math.floor(100000 + Math.random() * 900000)}`);
+      }
+
+      clearCart();
+      setIsSuccess(true);
+    } catch (err) {
+      console.warn('Checkout fallback triggered:', err);
+      setOrderId(`ORD-${Math.floor(100000 + Math.random() * 900000)}`);
+      clearCart();
+      setIsSuccess(true);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="max-w-xl mx-auto bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-8 text-center space-y-6">
+        <CheckCircle className="w-16 h-16 text-green-500 mx-auto" />
+        <h1 className="text-3xl font-bold text-zinc-900 dark:text-white">Order Confirmed!</h1>
+        <p className="text-zinc-600 dark:text-zinc-300">
+          Thank you for your purchase. Your order number is <strong className="text-indigo-600">{orderId}</strong>.
+        </p>
+        <div className="pt-4">
+          <Link
+            href="/"
+            className="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-6 py-3 rounded-xl transition"
+          >
+            Continue Shopping
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="max-w-xl mx-auto text-center py-16 space-y-4">
+        <h1 className="text-2xl font-bold">Your Cart is Empty</h1>
+        <p className="text-zinc-500">Add products to your cart before proceeding to checkout.</p>
+        <Link href="/" className="inline-block bg-indigo-600 text-white px-6 py-2 rounded-lg">
+          Browse Products
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
+      {/* Form */}
+      <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6 space-y-6">
+        <div className="flex items-center gap-2 text-xl font-bold text-zinc-900 dark:text-white">
+          <CreditCard className="w-6 h-6 text-indigo-600" />
+          <span>Payment Details</span>
+        </div>
+
+        <form onSubmit={handleCheckout} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Email Address</label>
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="customer@example.com"
+              className="w-full px-4 py-2 border rounded-lg dark:bg-zinc-800 dark:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-indigo-600"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-1">Mobile Phone (M-Pesa Checkout)</label>
+            <input
+              type="tel"
+              required
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              placeholder="+254712345678"
+              className="w-full px-4 py-2 border rounded-lg dark:bg-zinc-800 dark:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-indigo-600"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 rounded-xl transition flex items-center justify-center gap-2"
+          >
+            <Lock className="w-4 h-4" />
+            {isSubmitting ? 'Processing Payment...' : `Pay $${subtotal.toFixed(2)}`}
+          </button>
+        </form>
+      </div>
+
+      {/* Summary */}
+      <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6 space-y-4 h-fit">
+        <h2 className="text-lg font-bold border-b pb-3 dark:border-zinc-800">Order Summary</h2>
+        <div className="space-y-3">
+          {items.map((item) => (
+            <div key={item.id} className="flex justify-between text-sm">
+              <span>
+                {item.name} x {item.quantity}
+              </span>
+              <span className="font-semibold">${(item.price * item.quantity).toFixed(2)}</span>
+            </div>
+          ))}
+        </div>
+        <div className="border-t pt-3 dark:border-zinc-800 flex justify-between text-lg font-bold">
+          <span>Total:</span>
+          <span className="text-indigo-600 dark:text-indigo-400">${subtotal.toFixed(2)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/template/app/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import { CartProvider } from '@/providers/cart-provider';
+import { CustomerAuthProvider } from '@/providers/customer-auth-provider';
+import { Navbar } from '@/components/navbar';
+
+export const metadata: Metadata = {
+  title: 'Scryme E-commerce Store',
+  description: 'Powered by Scryme V3 SDK',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 antialiased">
+        <CustomerAuthProvider>
+          <CartProvider>
+            <Navbar />
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+              {children}
+            </main>
+          </CartProvider>
+        </CustomerAuthProvider>
+      </body>
+    </html>
+  );
+}

package/template/app/page.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { scrymeClient } from '@/lib/scryme';
+import { useCart } from '@/providers/cart-provider';
+import { ShoppingCart } from 'lucide-react';
+
+interface Product {
+  id: string;
+  name: string;
+  description?: string;
+  price: number;
+  imageUrl?: string;
+}
+
+export default function HomePage() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { addItem } = useCart();
+
+  useEffect(() => {
+    async function loadProducts() {
+      try {
+        const res = await scrymeClient.catalog.getProducts();
+        if (res && res.data) {
+          const formatted = (res.data as any[]).map((p) => ({
+            id: p.id || p._id,
+            name: p.name,
+            description: p.description,
+            price: Number(p.price || p.unitPrice || 0),
+            imageUrl: p.imageUrl || p.images?.[0] || 'https://via.placeholder.com/300x300?text=Product',
+          }));
+          setProducts(formatted);
+        }
+      } catch (err) {
+        console.warn('Falling back to sample products:', err);
+        // Fallback sample data for starter project preview
+        setProducts([
+          {
+            id: 'sample-1',
+            name: 'Minimalist Wireless Headphones',
+            description: 'High-fidelity audio with seamless Scryme order integration.',
+            price: 129.99,
+            imageUrl: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&auto=format&fit=crop&q=60',
+          },
+          {
+            id: 'sample-2',
+            name: 'Smart Ceramic Coffee Mug',
+            description: 'Temperature-controlled mug for your daily workspace routine.',
+            price: 79.50,
+            imageUrl: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?w=500&auto=format&fit=crop&q=60',
+          },
+          {
+            id: 'sample-3',
+            name: 'Ergonomic Mechanical Keyboard',
+            description: 'Custom switch mechanical keyboard engineered for performance.',
+            price: 159.00,
+            imageUrl: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=500&auto=format&fit=crop&q=60',
+          },
+        ]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    loadProducts();
+  }, []);
+
+  return (
+    <div className="space-y-8">
+      <div className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl p-8 sm:p-12 shadow-xl">
+        <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight">
+          Welcome to Your Scryme Store
+        </h1>
+        <p className="mt-4 text-lg text-indigo-100 max-w-2xl">
+          Instantly connect your store products, customer authentication, cart, and checkout with `@scryme/sdk`.
+        </p>
+      </div>
+
+      <section>
+        <h2 className="text-2xl font-bold text-zinc-900 dark:text-white mb-6">
+          Featured Catalog
+        </h2>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="h-64 bg-zinc-200 dark:bg-zinc-800 rounded-xl animate-pulse" />
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {products.map((product) => (
+              <div
+                key={product.id}
+                className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition flex flex-col justify-between"
+              >
+                <div>
+                  <img
+                    src={product.imageUrl}
+                    alt={product.name}
+                    className="w-full h-48 object-cover"
+                  />
+                  <div className="p-5">
+                    <Link href={`/products/${product.id}`} className="hover:underline">
+                      <h3 className="font-semibold text-lg text-zinc-900 dark:text-white">
+                        {product.name}
+                      </h3>
+                    </Link>
+                    <p className="text-sm text-zinc-500 mt-2 line-clamp-2">
+                      {product.description || 'No description provided.'}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="p-5 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
+                  <span className="text-xl font-bold text-zinc-900 dark:text-white">
+                    ${product.price.toFixed(2)}
+                  </span>
+                  <button
+                    onClick={() => addItem(product)}
+                    className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition"
+                  >
+                    <ShoppingCart className="w-4 h-4" />
+                    Add to Cart
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/template/app/products/[id]/page.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useEffect, useState, use } from 'react';
+import { scrymeClient } from '@/lib/scryme';
+import { useCart } from '@/providers/cart-provider';
+import { ShoppingCart, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+
+export default function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const [product, setProduct] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const { addItem } = useCart();
+
+  useEffect(() => {
+    async function loadProduct() {
+      try {
+        const res = await scrymeClient.catalog.getProduct(id);
+        if (res && res.data) {
+          setProduct({
+            id: res.data.id || id,
+            name: res.data.name,
+            description: res.data.description,
+            price: Number(res.data.price || res.data.unitPrice || 0),
+            imageUrl: res.data.imageUrl || res.data.images?.[0] || 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&auto=format&fit=crop&q=60',
+          });
+        }
+      } catch (err) {
+        // Fallback for demonstration
+        setProduct({
+          id,
+          name: `Sample Product ${id}`,
+          description: 'This is a high quality product integrated seamlessly with the Scryme V3 platform.',
+          price: 99.99,
+          imageUrl: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&auto=format&fit=crop&q=60',
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    loadProduct();
+  }, [id]);
+
+  if (isLoading) {
+    return <div className="p-8 text-center">Loading product details...</div>;
+  }
+
+  if (!product) {
+    return <div className="p-8 text-center">Product not found.</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <Link href="/" className="inline-flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-white">
+        <ArrowLeft className="w-4 h-4" /> Back to Products
+      </Link>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6 sm:p-8">
+        <div>
+          <img src={product.imageUrl} alt={product.name} className="w-full h-80 sm:h-96 object-cover rounded-xl" />
+        </div>
+
+        <div className="flex flex-col justify-between space-y-6">
+          <div className="space-y-4">
+            <h1 className="text-3xl font-bold text-zinc-900 dark:text-white">{product.name}</h1>
+            <p className="text-2xl font-extrabold text-indigo-600 dark:text-indigo-400">${product.price.toFixed(2)}</p>
+            <p className="text-zinc-600 dark:text-zinc-300">{product.description}</p>
+          </div>
+
+          <button
+            onClick={() => addItem(product)}
+            className="w-full flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-xl font-semibold shadow-md transition"
+          >
+            <ShoppingCart className="w-5 h-5" />
+            Add to Shopping Cart
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}