create-varity-app 2.0.0-beta.1

package/template/README.md

@@ -0,0 +1,241 @@
+# TaskFlow — SaaS Starter Template
+
+[![Built with Varity](https://img.shields.io/badge/built%20with-Varity-7C3AED)](https://varity.so)
+
+A full-featured project management app built with [Varity](https://varity.so). Everything works immediately — no configuration, no API keys, no setup.
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+That's it. Open [http://localhost:3000](http://localhost:3000) and your app is fully functional:
+
+- **Auth** works instantly (email + Google login)
+- **Database** works instantly (create, read, update, delete)
+- **Dashboard** is fully interactive with real data persistence
+
+No `.env` file needed. No accounts to create. No credentials to configure.
+
+## Make This Your Own (5 Minutes)
+
+Transform this into your own branded SaaS app:
+
+1. **App name** — Edit `APP_NAME` in `src/lib/constants.ts`
+2. **Logo** — Replace `public/logo.svg` with your logo
+3. **Colors** — Open `src/app/globals.css` and uncomment a color preset (Purple, Green, or Orange) or set your own
+4. **Meta title** — Update the `title` and `description` in `src/app/layout.tsx`
+5. **Navigation** — Edit `NAVIGATION_ITEMS` in `src/lib/constants.ts` to rename or add sidebar links
+6. **Landing page** — Edit the sections in `src/components/landing/` (Hero, Features, Pricing, etc.)
+
+## Built-in Color Themes
+
+Switch your entire app's color scheme by editing `src/app/globals.css`:
+
+| Theme | How |
+|-------|-----|
+| **Blue** (default) | Active by default |
+| **Purple** | Uncomment the Purple `:root` block, comment out Blue |
+| **Green** | Uncomment the Green `:root` block, comment out Blue |
+| **Orange** | Uncomment the Orange `:root` block, comment out Blue |
+| **Custom** | Set your own `--color-primary-*` values using any [Tailwind palette](https://tailwindcss.com/docs/customizing-colors) |
+
+## What's Included
+
+- **Zero-Config Auth** — Email and social login works out of the box
+- **Zero-Config Database** — Data persistence with isolated dev environment
+- **Dashboard** — KPI cards, data tables, status badges, getting started guide
+- **Full CRUD** — Create, read, update, delete for projects, tasks, and team members
+- **Command Palette** — Cmd+K search across all data
+- **Protected Routes** — Automatic redirect for unauthenticated users
+- **Landing Page** — Professional marketing page with hero, features, pricing, testimonials
+- **Mobile Responsive** — Hamburger menu, responsive layouts, touch-friendly
+- **TypeScript** — Full type safety throughout
+- **Tailwind CSS** — Utility-first styling with CSS variable theming
+
+## ✅ Zero Configuration Required
+
+This template works immediately with **zero setup**:
+
+### Instant Auth
+- ✅ Email login (Privy)
+- ✅ Google/Apple social login
+- ✅ Dev credentials built-in
+- ❌ No env vars needed
+
+### Instant Database
+- ✅ Create, read, update, delete data
+- ✅ Dev token built-in
+- ✅ Production-ready proxy
+- ❌ No credentials needed
+
+### Instant Deploy
+```bash
+npm run deploy
+```
+- ✅ Deploys to IPFS
+- ✅ Auto-fetches credentials
+- ❌ No thirdweb account needed
+
+---
+
+## 🏗️ Architecture
+
+### Workspace Dependencies
+This template uses `workspace:^` protocol for Varity packages:
+```json
+{
+  "dependencies": {
+    "@varity-labs/sdk": "workspace:^",
+    "@varity-labs/ui-kit": "workspace:^",
+    "@varity-labs/types": "workspace:^"
+  }
+}
+```
+
+**Why?** Ensures you always use the latest local package versions during development.
+
+**Publishing:** When published to npm, `workspace:^` converts to `^2.0.0-alpha.1` automatically.
+
+### Static Export Ready
+- ✅ `output: 'export'` in next.config.js
+- ✅ All pages pre-rendered to static HTML
+- ✅ No server-side dependencies
+- ✅ IPFS/CDN deployable
+
+### Type Safety
+- ✅ TypeScript strict mode enabled
+- ✅ All errors surface during build
+- ✅ No `ignoreBuildErrors` flag
+
+## Project Structure
+
+```
+src/
+  app/                    # Pages (Next.js App Router)
+    dashboard/            # Protected dashboard pages
+      projects/           # Project management (list + detail views)
+      tasks/              # Task management (status filters, CSV export)
+      team/               # Team management (invite, roles)
+      settings/           # User settings (4-tab layout with backend persistence)
+    login/                # Login page
+  components/             # Reusable components
+    dashboard/            # Dashboard-specific components
+    landing/              # Landing page sections (Hero, Features, Pricing, etc.)
+    shared/               # Shared components (Navbar, Footer)
+    providers/            # App providers (auth, database, toast)
+  lib/                    # Core utilities
+    varity.ts             # SDK initialization
+    database.ts           # Typed database collections
+    hooks.ts              # Data hooks (useProjects, useTasks, useTeam)
+    constants.ts          # App name, navigation, option lists
+    utils.ts              # Helpers (CSV export, formatting)
+  types/                  # TypeScript type definitions
+```
+
+## Add a New Page
+
+Example: adding a `/dashboard/reports` page.
+
+**1. Create the page file:**
+
+```tsx
+// src/app/dashboard/reports/page.tsx
+'use client';
+
+import { useProjects } from '@/lib/hooks';
+
+export default function ReportsPage() {
+  const { data: projects, loading } = useProjects();
+
+  if (loading) return <div className="p-6">Loading...</div>;
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold text-gray-900">Reports</h1>
+      <p className="text-gray-600">{projects.length} projects total</p>
+    </div>
+  );
+}
+```
+
+**2. Add navigation item** in `src/lib/constants.ts`:
+
+```ts
+{ label: 'Reports', icon: 'chart', path: '/dashboard/reports' },
+```
+
+Done. The page is automatically protected by auth and appears in the sidebar.
+
+## Add a New Data Collection
+
+Example: adding an `invoices` collection.
+
+**1. Define the type** in `src/types/index.ts`:
+
+```ts
+export interface Invoice {
+  id: string;
+  projectId: string;
+  amount: number;
+  status: 'draft' | 'sent' | 'paid';
+  createdAt: string;
+}
+```
+
+**2. Create the collection** in `src/lib/database.ts`:
+
+```ts
+export const invoices = () => db.collection<Invoice>('invoices');
+```
+
+**3. Create a hook** in `src/lib/hooks.ts` (copy the `useProjects` pattern):
+
+```ts
+export function useInvoices(): UseCollectionReturn<Invoice> {
+  // ... same pattern as useProjects, using invoices() instead of projects()
+}
+```
+
+**4. Use it in any page:**
+
+```tsx
+const { data, loading, create, update, remove } = useInvoices();
+```
+
+The database collection is created automatically on first use — no migrations needed.
+
+## Environment Variables
+
+**For development:** Leave everything blank. Shared development credentials are used automatically.
+
+**For production:** Run `varitykit app deploy` — it injects all credentials into your build automatically. You never need to manually set API keys.
+
+| Variable | Required | Notes |
+|----------|----------|-------|
+| `NEXT_PUBLIC_PRIVY_APP_ID` | No | Auth provider (auto-configured) |
+| `NEXT_PUBLIC_THIRDWEB_CLIENT_ID` | No | Infrastructure (auto-configured) |
+| `NEXT_PUBLIC_VARITY_APP_TOKEN` | No | Database token (auto-configured) |
+| `NEXT_PUBLIC_VARITY_APP_ID` | No | App ID (auto-configured) |
+
+## Deployment
+
+```bash
+# Deploy to production with a live URL
+varitykit app deploy
+
+# Deploy and submit to the Varity App Store
+varitykit app deploy --submit-to-store
+```
+
+The CLI builds your app, provisions a private database, injects production credentials, and deploys — all in one command.
+
+**Deploy from your AI editor:** Set up the [Varity MCP server](https://docs.varity.so/mcp) (`npx @varity-labs/mcp`) and ask your AI to "deploy this project".
+
+## Learn More
+
+- [Varity Documentation](https://docs.varity.so)
+- [UI Kit Components](https://docs.varity.so/ui-kit)
+- [SDK Reference](https://docs.varity.so/sdk)

package/template/gitignore

@@ -0,0 +1,42 @@
+# Dependencies
+node_modules/
+
+# Build output
+.next/
+out/
+dist/
+build/
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# Environment variables (secrets)
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Test results
+test-results/
+playwright-report/
+blob-report/
+
+# Vercel (if ejected)
+.vercel

package/template/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/next.config.js

@@ -0,0 +1,21 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
+  trailingSlash: true,
+  productionBrowserSourceMaps: false,
+  webpack: (config, { isServer, dev }) => {
+    // Suppress MetaMask SDK warning for @react-native-async-storage
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      '@react-native-async-storage/async-storage': false,
+    };
+    // Force production devtool to avoid 35MB eval-source-map chunks
+    if (!dev && !isServer) {
+      config.devtool = false;
+    }
+    return config;
+  },
+};
+
+module.exports = nextConfig;

package/template/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "my-saas-app",
+  "version": "0.1.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "prepare": "husky install",
+    "deploy": "varitykit app deploy"
+  },
+  "dependencies": {
+    "@varity-labs/sdk": "workspace:^",
+    "@varity-labs/types": "workspace:^",
+    "@varity-labs/ui-kit": "workspace:^",
+    "lucide-react": "^0.400.0",
+    "next": "^15.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.0.0",
+    "husky": "^9.1.7",
+    "postcss": "^8.0.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.0.0"
+  }
+}

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/public/logo.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="14" fill="#4f46e5"/>
+  <path d="M10 16L14.5 20.5L22 11.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+Disallow: /dashboard/
+Disallow: /login/

package/template/public/sitemap.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://example.com/</loc></url>
+</urlset>

package/template/src/app/dashboard/layout.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { APP_NAME, NAVIGATION_ITEMS } from '@/lib/constants';
+import { useProjects, useTasks, useTeam } from '@/lib/hooks';
+import { CommandPalette } from '@varity-labs/ui-kit';
+import { Menu, X } from 'lucide-react';
+
+// Conditionally import Privy/UI-Kit components
+let DashboardLayout: any = null;
+let PrivyProtectedRoute: any = null;
+let PrivyStackComponent: any = null;
+let usePrivyHook: any = null;
+
+try {
+  const uiKit = require('@varity-labs/ui-kit');
+  DashboardLayout = uiKit.DashboardLayout;
+  PrivyProtectedRoute = uiKit.PrivyProtectedRoute;
+  PrivyStackComponent = uiKit.PrivyStack;
+  usePrivyHook = uiKit.usePrivy;
+} catch {}
+
+function RedirectToLogin() {
+  const router = useRouter();
+  useEffect(() => {
+    router.push('/login');
+  }, [router]);
+  return null;
+}
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    function check() {
+      setIsMobile(window.innerWidth < 768);
+    }
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+
+  return isMobile;
+}
+
+function MobileNav({
+  open,
+  onToggle,
+  onClose,
+  navItems,
+  userEmail,
+  onLogout,
+  onNavigate,
+}: {
+  open: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  navItems: { path: string; label: string; active: boolean }[];
+  userEmail: string;
+  onLogout: () => void;
+  onNavigate: (path: string) => void;
+}) {
+  return (
+    <>
+      <button
+        onClick={onToggle}
+        className="fixed top-4 left-4 z-[60] rounded-lg bg-white p-2 shadow-md border border-gray-200"
+        aria-label={open ? 'Close menu' : 'Open menu'}
+      >
+        {open ? <X className="h-5 w-5 text-gray-700" /> : <Menu className="h-5 w-5 text-gray-700" />}
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-[55] bg-black/50" onClick={onClose} />
+          <div className="fixed inset-y-0 left-0 z-[56] w-64 bg-white shadow-xl overflow-y-auto">
+            <div className="p-4 pt-16">
+              <div className="mb-6">
+                <h2 className="text-lg font-semibold text-gray-900">{APP_NAME}</h2>
+                <p className="text-sm text-gray-500">{userEmail || 'Not signed in'}</p>
+              </div>
+              <nav className="space-y-1">
+                {navItems.map((item) => (
+                  <button
+                    key={item.path}
+                    onClick={() => { onNavigate(item.path); onClose(); }}
+                    className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+                      item.active ? 'bg-primary-50 text-primary-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                    }`}
+                  >
+                    {item.label}
+                  </button>
+                ))}
+              </nav>
+              <div className="mt-8 border-t border-gray-200 pt-4">
+                <button
+                  onClick={onLogout}
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors"
+                >
+                  Sign Out
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+function DashboardShell({ children }: { children: React.ReactNode }) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
+  const privy = usePrivyHook ? usePrivyHook() : { user: null, logout: async () => {} };
+  const { user, logout } = privy;
+  const pathname = usePathname();
+  const router = useRouter();
+  const isMobile = useIsMobile();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+
+  // Data for command palette search
+  const { data: projects } = useProjects();
+  const { data: tasks } = useTasks();
+  const { data: team } = useTeam();
+
+  // Cmd+K / Ctrl+K keyboard shortcut
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      setCommandPaletteOpen((prev) => !prev);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  // Close mobile menu on navigation
+  useEffect(() => {
+    setMobileMenuOpen(false);
+  }, [pathname]);
+
+  const navWithActive = NAVIGATION_ITEMS.map((item) => ({
+    ...item,
+    active: item.path === '/dashboard'
+      ? pathname === '/dashboard'
+      : pathname === item.path || pathname.startsWith(item.path + '/'),
+  }));
+
+  const userName = user?.email?.address?.split('@')[0] || 'User';
+  const userEmail = user?.email?.address || '';
+
+  const handleLogout = async () => {
+    await logout();
+    router.push('/');
+  };
+
+  // Fallback layout when DashboardLayout from ui-kit isn't available
+  if (!DashboardLayout) {
+    return (
+      <>
+        <CommandPalette
+          open={commandPaletteOpen}
+          onClose={() => setCommandPaletteOpen(false)}
+          onNavigate={(path: string) => router.push(path)}
+          projects={projects}
+          tasks={tasks}
+          team={team}
+        />
+        <div className="flex min-h-screen">
+          {/* Simple sidebar */}
+          {!isMobile && (
+            <div className="w-64 shrink-0 border-r border-gray-200 bg-white">
+              <div className="p-4">
+                <h2 className="text-lg font-semibold text-gray-900">{APP_NAME}</h2>
+                <p className="text-sm text-gray-500">{userEmail || 'Not signed in'}</p>
+              </div>
+              <nav className="px-3 space-y-1">
+                {navWithActive.map((item) => (
+                  <button
+                    key={item.path}
+                    onClick={() => router.push(item.path)}
+                    className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+                      item.active
+                        ? 'bg-primary-50 text-primary-700'
+                        : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                    }`}
+                  >
+                    {item.label}
+                  </button>
+                ))}
+              </nav>
+              <div className="mt-8 px-3 border-t border-gray-200 pt-4">
+                <button
+                  onClick={handleLogout}
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors"
+                >
+                  Sign Out
+                </button>
+              </div>
+            </div>
+          )}
+
+          {isMobile && (
+            <MobileNav
+              open={mobileMenuOpen}
+              onToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
+              onClose={() => setMobileMenuOpen(false)}
+              navItems={navWithActive}
+              userEmail={userEmail}
+              onLogout={handleLogout}
+              onNavigate={(path) => router.push(path)}
+            />
+          )}
+
+          <main className={`flex-1 bg-gray-50 p-6 ${isMobile ? 'pt-16' : ''}`}>
+            {children}
+          </main>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <CommandPalette
+        open={commandPaletteOpen}
+        onClose={() => setCommandPaletteOpen(false)}
+        onNavigate={(path: string) => router.push(path)}
+        projects={projects}
+        tasks={tasks}
+        team={team}
+      />
+
+      {isMobile && (
+        <MobileNav
+          open={mobileMenuOpen}
+          onToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
+          onClose={() => setMobileMenuOpen(false)}
+          navItems={navWithActive}
+          userEmail={userEmail}
+          onLogout={handleLogout}
+          onNavigate={(path) => router.push(path)}
+        />
+      )}
+
+      {/* Desktop layout */}
+      <div className={isMobile ? '[&>div>div:first-child]:hidden' : ''}>
+        <DashboardLayout
+          companyName={APP_NAME}
+          logoUrl="/logo.svg"
+          navigationItems={navWithActive}
+          showSidebar={!isMobile}
+          user={{
+            name: userName,
+            address: userEmail,
+          }}
+          onLogout={handleLogout}
+          onNavigateToProfile={() => router.push('/dashboard/settings')}
+          onNavigateToSettings={() => router.push('/dashboard/settings')}
+          onSearchClick={() => setCommandPaletteOpen(true)}
+          searchPlaceholder="Search projects, tasks, team..."
+        >
+          <div className={isMobile ? 'pt-14' : ''}>
+            {children}
+          </div>
+        </DashboardLayout>
+      </div>
+    </>
+  );
+}
+
+export default function DashboardRootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Always wrap in PrivyStack + PrivyProtectedRoute - uses dev credentials automatically when env vars are empty
+  if (!PrivyProtectedRoute || !PrivyStackComponent) {
+    // Fallback if ui-kit package isn't installed
+    return <DashboardShell>{children}</DashboardShell>;
+  }
+
+  return (
+    <PrivyStackComponent
+      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
+      thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
+      loginMethods={['email', 'google']}
+      appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
+    >
+      <PrivyProtectedRoute fallback={<RedirectToLogin />}>
+        <DashboardShell>{children}</DashboardShell>
+      </PrivyProtectedRoute>
+    </PrivyStackComponent>
+  );
+}