@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/base/template/src/app/error.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    // Log error to error reporting service
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          {/* Error icon */}
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+          
+          {/* Error content */}
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+            
+            {/* Error details in development */}
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong>Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong>Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong>Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+          
+          {/* Action buttons */}
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button
+              onClick={reset}
+              className="flex-1"
+              size="lg"
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            
+            <Link href="/" className="flex-1">
+              <Button
+                variant="outline"
+                className="w-full"
+                size="lg"
+              >
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+          
+          {/* Help text */}
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            If this problem persists, please{' '}
+            <Link href="/contact" className="text-blue-600 hover:underline dark:text-blue-400">
+              contact support
+            </Link>
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/base/template/src/app/globals.css

@@ -0,0 +1,157 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/styles.css';
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Mobile-first optimizations */
+@media (max-width: 768px) {
+  .mobile-optimized {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  /* Better touch targets */
+  button, 
+  a, 
+  input, 
+  select, 
+  textarea {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Smooth scrolling for mobile */
+  html {
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Network-aware styles */
+@media (prefers-reduced-data: reduce) {
+  .high-bandwidth-content {
+    display: none;
+  }
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Custom animations for mobile interactions */
+@keyframes haptic-feedback {
+  0% { transform: scale(1); }
+  50% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+.haptic-feedback {
+  animation: haptic-feedback 0.1s ease-in-out;
+}
+
+/* Offline indicator styles */
+.offline-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #f59e0b;
+  color: white;
+  text-align: center;
+  padding: 8px;
+  font-size: 14px;
+  z-index: 9999;
+}
+
+/* Loading states */
+.loading-skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Progressive image loading */
+.progressive-image {
+  filter: blur(5px);
+  transition: filter 0.3s;
+}
+
+.progressive-image.loaded {
+  filter: blur(0);
+}
+

package/src/templates/web/base/template/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
+import { Footer } from '@/components/shared/footer'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          <div className="min-h-screen flex flex-col">
+            <Header />
+            <main className="flex-1">
+              {children}
+            </main>
+            <Footer />
+          </div>
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

package/src/templates/web/base/template/src/app/loading.tsx

@@ -0,0 +1,52 @@
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header skeleton */}
+        <div className="mb-8">
+          <SkeletonText className="h-8 w-64 mb-4" />
+          <SkeletonText className="h-4 w-96" />
+        </div>
+
+        {/* Cards grid skeleton */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Centered loading spinner */}
+        <div className="flex justify-center">
+          <Card className="p-8 max-w-sm w-full mx-4">
+            <div className="flex flex-col items-center space-y-4">
+              {/* Animated spinner */}
+              <div className="relative">
+                <div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-700 rounded-full animate-spin"></div>
+                <div className="absolute top-0 left-0 w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+              </div>
+              
+              {/* Loading text */}
+              <div className="text-center">
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  Loading...
+                </h2>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Please wait while we prepare your content
+                </p>
+              </div>
+              
+              {/* Pulsing dots */}
+              <div className="flex space-x-1">
+                <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
+                <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
+                <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/base/template/src/app/login/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { 
+  LoginForm,
+  PageTransition,
+  MobileContainer,
+  NetworkAwareContent,
+  OfflineWrapper
+} from '@digilogiclabs/saas-factory-ui';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+
+export default function LoginPage() {
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleLogin = async (values: any) => {
+    await supabase.auth.signInWithPassword({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleLogin = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: `${location.origin}/auth/callback`,
+      },
+    });
+  };
+
+  return (
+    <PageTransition type="slide" direction="horizontal" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="network-first"
+        showOfflineIndicator={true}
+      >
+        <NetworkAwareContent
+          showOnOffline={
+            <div className="flex items-center justify-center min-h-screen bg-gray-100">
+              <div className="text-center p-6">
+                <h2 className="text-xl font-semibold mb-2">You're offline</h2>
+                <p className="text-gray-600">Please check your connection to sign in.</p>
+              </div>
+            </div>
+          }
+        >
+          <div className="flex items-center justify-center min-h-screen bg-gray-100">
+            <MobileContainer className="w-full max-w-md">
+              <LoginForm
+                onSubmit={handleLogin}
+                onGoogleSignIn={handleGoogleLogin}
+                authProvider={AuthProvider.SUPABASE}
+                mobileOptimized={true}
+                touchFriendly={true}
+              />
+            </MobileContainer>
+          </div>
+        </NetworkAwareContent>
+      </OfflineWrapper>
+    </PageTransition>
+  );
+}

package/src/templates/web/base/template/src/app/page.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { ArrowRight, Zap, Shield, Rocket, LogOut } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { 
+  MobileHero, 
+  LazyImage, 
+  ProgressiveImage, 
+  NetworkAwareContent,
+  PageTransition,
+  ResponsiveGrid,
+  MobileContainer 
+} from '@digilogiclabs/saas-factory-ui'
+import Link from 'next/link'
+
+export default function Home() {
+  const { user, signOut } = useAuth()
+  
+  const projectName = "{{titleCaseName}}"
+  const projectDescription = "{{description}}"
+  
+  const gridConfig = {
+    columns_1_2: { base: 1, md: 2 },
+    columns_1_3: { base: 1, md: 3 },
+    columns_1_sm2: { base: 1, sm: 2 },
+    columns_1_sm2_md3: { base: 1, sm: 2, md: 3 },
+    columns_1_sm2_md4: { base: 1, sm: 2, md: 4 },
+    columns_2: { base: 2 },
+    columns_2_md3: { base: 2, md: 3 },
+    columns_2_2: { base: 2 },
+    columns_2_md4: { base: 2, md: 4 }
+  }
+  
+  const heroConfig = {
+    badge: {
+      text: "Built with Digi Logic Labs",
+      variant: "secondary" as const
+    },
+    title: {
+      text: `Welcome to ${projectName}`,
+      highlight: projectName,
+      size: "xl" as const
+    },
+    description: `${projectDescription}. Get started by editing src/app/page.tsx`
+  }
+
+  return (
+    <PageTransition type="fade" duration={300}>
+      <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+        <MobileContainer className="py-16">
+        {/* Hero Section */}
+        <MobileHero
+          badge={heroConfig.badge}
+          title={heroConfig.title}
+          description={heroConfig.description}
+          actions={!user ? [
+            {
+              label: "Get Started",
+              href: "/signup",
+              icon: ArrowRight,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Learn More", 
+              href: "/login",
+              variant: "outline",
+              size: "lg"
+            }
+          ] : [
+            {
+              label: "Go to Dashboard",
+              href: "/dashboard", 
+              icon: ArrowRight,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Sign Out",
+              onClick: signOut,
+              icon: LogOut,
+              variant: "outline", 
+              size: "lg"
+            }
+          ]}
+          className="text-center mb-16"
+        />
+
+        {/* Features Grid */}
+        <NetworkAwareContent
+          showOnSlow={
+            <ResponsiveGrid columns={gridConfig.columns_1_2} gap="md" className="mb-16">
+              <Card className="text-center">
+                <CardHeader>
+                  <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                    <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                  </div>
+                  <CardTitle>Lightning Fast</CardTitle>
+                  <CardDescription>
+                    Built with Next.js 15 and optimized for performance
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+              <Card className="text-center">
+                <CardHeader>
+                  <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+                    <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+                  </div>
+                  <CardTitle>Secure by Default</CardTitle>
+                  <CardDescription>
+                    {{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} authentication and security best practices
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </ResponsiveGrid>
+          }
+        >
+          <ResponsiveGrid columns={gridConfig.columns_1_3} gap="lg" className="mb-16">
+            <Card className="text-center">
+              <CardHeader>
+                <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                  <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                </div>
+                <CardTitle>Lightning Fast</CardTitle>
+                <CardDescription>
+                  Built with Next.js 15 and optimized for performance
+                </CardDescription>
+              </CardHeader>
+            </Card>
+
+            <Card className="text-center">
+              <CardHeader>
+                <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+                  <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+                </div>
+                <CardTitle>Secure by Default</CardTitle>
+                <CardDescription>
+                  {{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} authentication and security best practices
+                </CardDescription>
+              </CardHeader>
+            </Card>
+
+            <Card className="text-center">
+              <CardHeader>
+                <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                  <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <CardTitle>Ready to Scale</CardTitle>
+                <CardDescription>
+                  Production-ready with TypeScript, Tailwind CSS, and modern tooling
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </ResponsiveGrid>
+        </NetworkAwareContent>
+
+        {/* Tech Stack */}
+        <Card className="max-w-4xl mx-auto">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl">Built with Modern Technologies</CardTitle>
+            <CardDescription>
+              This template includes everything you need to build a modern SaaS application
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
+              <div className="p-4">
+                <div className="font-semibold">Next.js 15</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">React Framework</div>
+              </div>
+              <div className="p-4">
+                <div className="font-semibold">TypeScript</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Type Safety</div>
+              </div>
+              <div className="p-4">
+                <div className="font-semibold">Tailwind CSS</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Styling</div>
+              </div>
+              <div className="p-4">
+                <div className="font-semibold">{{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}}</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Authentication</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        </MobileContainer>
+      </main>
+    </PageTransition>
+  )
+}

package/src/templates/web/base/template/src/app/signup/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { 
+  SignupForm,
+  PageTransition,
+  MobileContainer,
+  NetworkAwareContent,
+  OfflineWrapper
+} from '@digilogiclabs/saas-factory-ui';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+
+export default function SignupPage() {
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleSignup = async (values: any) => {
+    await supabase.auth.signUp({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleSignup = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: `${location.origin}/auth/callback`,
+      },
+    });
+  };
+
+  return (
+    <PageTransition type="slide" direction="horizontal" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="network-first"
+        showOfflineIndicator={true}
+      >
+        <NetworkAwareContent
+          showOnOffline={
+            <div className="flex items-center justify-center min-h-screen bg-gray-100">
+              <div className="text-center p-6">
+                <h2 className="text-xl font-semibold mb-2">You're offline</h2>
+                <p className="text-gray-600">Please check your connection to sign up.</p>
+              </div>
+            </div>
+          }
+        >
+          <div className="flex items-center justify-center min-h-screen bg-gray-100">
+            <MobileContainer className="w-full max-w-md">
+              <SignupForm
+                onSubmit={handleSignup}
+                onGoogleSignIn={handleGoogleSignup}
+                authProvider={AuthProvider.SUPABASE}
+                mobileOptimized={true}
+                touchFriendly={true}
+              />
+            </MobileContainer>
+          </div>
+        </NetworkAwareContent>
+      </OfflineWrapper>
+    </PageTransition>
+  );
+}