create-varity-app 2.0.0-beta.14 → 2.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-varity-app",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.16",
   "description": "Create production-ready apps with auth, database, and payments built in",
   "license": "MIT",
   "repository": {

package/template/next.config.js

@@ -3,7 +3,6 @@ const nextConfig = {
   output: 'export',
   images: { unoptimized: true },
   trailingSlash: true,
-  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
   productionBrowserSourceMaps: false,
   webpack: (config, { isServer, dev }) => {
     // Suppress MetaMask SDK warning for @react-native-async-storage

package/template/package.json

@@ -13,8 +13,7 @@
     "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"
+    "prepare": "husky install"
   },
   "dependencies": {
     "@varity-labs/sdk": "workspace:^",

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

@@ -4,7 +4,6 @@ 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 { withBasePath } from '@/lib/utils';
 import { CommandPalette } from '@varity-labs/ui-kit';
 import { Menu, X } from 'lucide-react';
 
@@ -25,7 +24,7 @@ try {
 function RedirectToLogin() {
   const router = useRouter();
   useEffect(() => {
-    router.push(withBasePath('/login'));
+    router.push('/login');
   }, [router]);
   return null;
 }
@@ -114,8 +113,8 @@ 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 pathname = usePathname();
   const isMobile = useIsMobile();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
@@ -155,7 +154,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
 
   const handleLogout = async () => {
     await logout();
-    window.location.href = withBasePath('/');
+    window.location.href = '/';
   };
 
   // Fallback layout when DashboardLayout from ui-kit isn't available
@@ -165,7 +164,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
         <CommandPalette
           open={commandPaletteOpen}
           onClose={() => setCommandPaletteOpen(false)}
-          onNavigate={(path: string) => router.push(withBasePath(path))}
+          onNavigate={(path: string) => router.push(path)}
           projects={projects}
           tasks={tasks}
           team={team}
@@ -182,7 +181,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
                 {navWithActive.map((item) => (
                   <button
                     key={item.path}
-                    onClick={() => router.push(withBasePath(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'
@@ -212,7 +211,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
               navItems={navWithActive}
               userEmail={userEmail}
               onLogout={handleLogout}
-              onNavigate={(path) => router.push(withBasePath(path))}
+              onNavigate={(path) => router.push(path)}
             />
           )}
 
@@ -229,7 +228,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
       <CommandPalette
         open={commandPaletteOpen}
         onClose={() => setCommandPaletteOpen(false)}
-        onNavigate={(path: string) => router.push(withBasePath(path))}
+        onNavigate={(path: string) => router.push(path)}
         projects={projects}
         tasks={tasks}
         team={team}
@@ -243,7 +242,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
           navItems={navWithActive}
           userEmail={userEmail}
           onLogout={handleLogout}
-          onNavigate={(path) => router.push(withBasePath(path))}
+          onNavigate={(path) => router.push(path)}
         />
       )}
 
@@ -258,9 +257,10 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
             name: userName,
             address: userEmail,
           }}
+          onNavigate={(path: string) => router.push(path)}
           onLogout={handleLogout}
-          onNavigateToProfile={() => router.push(withBasePath('/dashboard/settings'))}
-          onNavigateToSettings={() => router.push(withBasePath('/dashboard/settings'))}
+          onNavigateToProfile={() => router.push('/dashboard/settings')}
+          onNavigateToSettings={() => router.push('/dashboard/settings')}
           onSearchClick={() => setCommandPaletteOpen(true)}
           searchPlaceholder="Search projects, tasks, team..."
         >
@@ -289,7 +289,7 @@ export default function DashboardRootLayout({
       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' }}
+      appearance={{ theme: 'light', accentColor: '#2563EB' }}
     >
       <PrivyProtectedRoute fallback={<RedirectToLogin />}>
         <DashboardShell>{children}</DashboardShell>

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

@@ -9,7 +9,6 @@ import { FolderKanban, ListTodo, Users, ArrowRight } from 'lucide-react';
 
 function QuickActions() {
   const router = useRouter();
-
   const actions = [
     {
       label: 'New Project',
@@ -138,7 +137,6 @@ function GettingStarted({
 }
 
 export default function DashboardPage() {
-  const router = useRouter();
   const { name } = useCurrentUser();
   const { data: projects, loading: projectsLoading, error: projectsError, refresh: refreshProjects } = useProjects();
   const { data: tasks, loading: tasksLoading, error: tasksError, refresh: refreshTasks } = useTasks();
@@ -163,14 +161,14 @@ export default function DashboardPage() {
         </p>
       </div>
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load data. Please check your connection and try again.</p>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your data...</p>
           <button
             onClick={() => { refreshProjects(); refreshTasks(); refreshTeam(); }}
-            className="text-sm font-medium text-red-700 hover:text-red-800 underline"
+            className="text-sm font-medium text-amber-700 hover:text-amber-800 underline"
           >
-            Retry
+            Refresh
           </button>
         </div>
       )}

package/template/src/app/dashboard/projects/page.tsx

@@ -606,10 +606,10 @@ export default function ProjectsPage() {
         </div>
       </Dialog>
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load projects. Please check your connection and try again.</p>
-          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your projects...</p>
+          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
         </div>
       )}
 

package/template/src/app/dashboard/tasks/page.tsx

@@ -258,10 +258,10 @@ export default function TasksPage() {
         )}
       </div>
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load tasks. Please check your connection and try again.</p>
-          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your tasks...</p>
+          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
         </div>
       )}
 

package/template/src/app/dashboard/team/page.tsx

@@ -246,10 +246,10 @@ export default function TeamPage() {
         loading={removeSubmitting}
       />
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load team data. Please check your connection and try again.</p>
-          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your team data...</p>
+          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
         </div>
       )}
 

package/template/src/app/layout.tsx

@@ -1,20 +1,23 @@
 import type { Metadata } from 'next';
 import { Providers } from '@/components/providers';
+import { APP_NAME } from '@/lib/constants';
 import './globals.css';
 
+const description = 'Built with Varity — auth, database, and deployment included.';
+
 export const metadata: Metadata = {
-  title: 'TaskFlow - Project Management',
-  description: 'Manage projects, track tasks, and collaborate with your team.',
-  metadataBase: new URL('https://example.com'),
+  title: APP_NAME,
+  description,
+  metadataBase: new URL('https://varity.app'),
   openGraph: {
-    title: 'TaskFlow - Project Management',
-    description: 'Manage projects, track tasks, and collaborate with your team.',
+    title: APP_NAME,
+    description,
     type: 'website',
   },
   twitter: {
     card: 'summary',
-    title: 'TaskFlow - Project Management',
-    description: 'Manage projects, track tasks, and collaborate with your team.',
+    title: APP_NAME,
+    description,
   },
 };
 

package/template/src/app/login/page.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { CheckCircle } from 'lucide-react';
 import { APP_NAME } from '@/lib/constants';
-import { withBasePath } from '@/lib/utils';
 
 let PrivyStackComponent: any = null;
 let usePrivyHook: (() => { authenticated: boolean; ready: boolean; login: () => void }) | null = null;
@@ -16,6 +15,12 @@ try {
   usePrivyHook = uiKit.usePrivy;
 } catch {}
 
+function loginButtonLabel(privy: { ready: boolean; authenticated: boolean }): string {
+  if (!privy.ready) return 'Loading...';
+  if (privy.authenticated) return 'Already Signed In';
+  return 'Sign In with Email or Social';
+}
+
 function LoginContent() {
   const router = useRouter();
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
@@ -23,7 +28,7 @@ function LoginContent() {
 
   useEffect(() => {
     if (privy?.authenticated) {
-      router.push(withBasePath('/dashboard'));
+      router.push('/dashboard');
     }
   }, [privy?.authenticated, router]);
 
@@ -56,11 +61,7 @@ function LoginContent() {
               disabled={!privy.ready || privy.authenticated}
               className="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors shadow-sm"
             >
-              {!privy.ready
-                ? 'Loading...'
-                : privy.authenticated
-                ? 'Already Signed In'
-                : 'Sign In with Email or Social'}
+              {loginButtonLabel(privy)}
             </button>
           ) : (
             <div className="text-center space-y-4">
@@ -80,7 +81,6 @@ function LoginContent() {
 }
 
 export default function LoginPage() {
-  // Always wrap in PrivyStack - it uses dev credentials automatically when no appId is provided
   if (PrivyStackComponent) {
     return (
       <PrivyStackComponent
@@ -94,6 +94,5 @@ export default function LoginPage() {
     );
   }
 
-  // Fallback if ui-kit package isn't installed
   return <LoginContent />;
 }

package/template/src/app/not-found.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Link from 'next/link';
 
 export default function NotFound() {

package/template/src/app/page.tsx

@@ -2,7 +2,6 @@ import { Navbar } from '@/components/shared/Navbar';
 import { Hero } from '@/components/landing/Hero';
 import { Features } from '@/components/landing/Features';
 import { HowItWorks } from '@/components/landing/HowItWorks';
-import { Testimonials } from '@/components/landing/Testimonials';
 import { Pricing } from '@/components/landing/Pricing';
 import { CTA } from '@/components/landing/CTA';
 import { Footer } from '@/components/shared/Footer';
@@ -14,7 +13,7 @@ export default function HomePage() {
       <Hero />
       <Features />
       <HowItWorks />
-      <Testimonials />
+
       <Pricing />
       <CTA />
       <Footer />

package/template/src/components/dashboard/RecentActivity.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { DataTable } from '@varity-labs/ui-kit';
-import { TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
+import { DataTable, TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
 import { formatRelativeDate } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
 import type { Task } from '@/types';

package/template/src/components/landing/Pricing.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Check } from 'lucide-react';
 
 const plans = [
@@ -52,6 +53,12 @@ const plans = [
   },
 ];
 
+function buttonStyle(plan: (typeof plans)[number]): string {
+  if (plan.popular) return 'bg-primary-600 text-white hover:bg-primary-700';
+  if (plan.price === 0) return 'bg-gray-100 text-gray-900 hover:bg-gray-200';
+  return 'bg-gray-900 text-white hover:bg-gray-800';
+}
+
 export function Pricing() {
   return (
     <section id="pricing" className="py-24 bg-white">
@@ -102,18 +109,12 @@ export function Pricing() {
               </ul>
 
               <div className="mt-8">
-                <a
+                <Link
                   href="/login"
-                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${
-                    plan.popular
-                      ? 'bg-primary-600 text-white hover:bg-primary-700'
-                      : plan.price === 0
-                        ? 'bg-gray-100 text-gray-900 hover:bg-gray-200'
-                        : 'bg-gray-900 text-white hover:bg-gray-800'
-                  }`}
+                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${buttonStyle(plan)}`}
                 >
                   {plan.cta}
-                </a>
+                </Link>
               </div>
             </div>
           ))}

package/template/src/components/shared/Navbar.tsx

@@ -46,7 +46,6 @@ export function Navbar() {
             >
               Get Started
             </Link>
-            {/* Mobile menu toggle */}
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
               className="rounded-lg p-2 text-gray-600 hover:bg-gray-100 sm:hidden"
@@ -58,7 +57,6 @@ export function Navbar() {
         </div>
       </div>
 
-      {/* Mobile dropdown */}
       {mobileOpen && (
         <div className="border-t border-gray-100 bg-white px-4 pb-4 pt-2 sm:hidden">
           <div className="space-y-1">

package/template/src/lib/constants.ts

@@ -1,6 +1,6 @@
 import type { NavigationItem } from '@varity-labs/ui-kit';
 
-export const APP_NAME = 'TaskFlow';
+export const APP_NAME = 'My App';
 
 export const NAVIGATION_ITEMS: NavigationItem[] = [
   { label: 'Dashboard', icon: 'dashboard', path: '/dashboard' },

package/template/src/lib/hooks.ts

@@ -10,6 +10,18 @@ try {
   usePrivyHook = uiKit.usePrivy;
 } catch {}
 
+async function fetchWithRetry<T>(fn: () => Promise<T>, retries = 3, delay = 1500): Promise<T> {
+  for (let i = 0; i < retries; i++) {
+    try {
+      return await fn();
+    } catch (err) {
+      if (i === retries - 1) throw err;
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+  throw new Error('Unexpected');
+}
+
 export function useCurrentUser() {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
   const privy = usePrivyHook ? usePrivyHook() : { user: null, authenticated: false, logout: async () => {} };
@@ -54,7 +66,7 @@ export function useProjects(): UseCollectionReturn<Project> {
     try {
       setLoading(true);
       setError(null);
-      const result = await projects().get();
+      const result = await fetchWithRetry(() => projects().get());
       setData(result as Project[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load projects');
@@ -126,7 +138,7 @@ export function useTasks(projectId?: string): UseCollectionReturn<Task> {
     try {
       setLoading(true);
       setError(null);
-      const result = await tasks().get();
+      const result = await fetchWithRetry(() => tasks().get());
       setAllTasks(result as Task[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load tasks');
@@ -202,7 +214,7 @@ export function useTeam(): UseCollectionReturn<TeamMember> {
     try {
       setLoading(true);
       setError(null);
-      const result = await teamMembers().get();
+      const result = await fetchWithRetry(() => teamMembers().get());
       setData(result as TeamMember[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load team');
@@ -289,7 +301,7 @@ export function useUserSettings() {
     try {
       setLoading(true);
       setError(null);
-      const all = await userSettings().get();
+      const all = await fetchWithRetry(() => userSettings().get());
       const mine = (all as UserSettings[]).find((s) => s.user_id === userId);
       if (mine) {
         setSettings(mine);

package/template/src/lib/utils.ts

@@ -1,18 +1,3 @@
-/**
- * Navigate using Next.js basePath-aware paths.
- * In static export with basePath, router.push does NOT prepend basePath
- * automatically, so we do it manually.
- */
-export function getBasePath(): string {
-  return process.env.NEXT_PUBLIC_BASE_PATH || '';
-}
-
-export function withBasePath(path: string): string {
-  const base = getBasePath();
-  if (!base) return path;
-  return `${base}${path}`;
-}
-
 export function formatDate(dateString: string | undefined | null): string {
   if (!dateString) return '—';
   const date = new Date(dateString);