Interactive Demos

$ architech new my-app --genome hello-world
 
🚀 Creating new project with genome: hello-world
🔍 Resolving genome...
✅ Resolved genome: hello-world
📁 Source: local-marketplace
📊 Complexity: simple (3 modules)
⏱️  Estimated time: ~30 seconds
 
🔍 Validating Genome
   Checking project configuration and dependencies
✅ Completed in 3ms
 
📋 Planning Execution
   Analyzing dependencies and creating execution plan
🔍 Building dependency graph for 3 modules
✅ Dependency graph built successfully
  📊 Nodes: 3
  🔗 Total dependencies: 0
 
🎯 Executing blueprint: Next.js 15+ Base Setup
  ⚡ Running command: npx create-next-app@latest...
  ✅ Next.js installed
 
🎯 Executing blueprint: Shadcn UI Components
  📄 Creating src/components/ui/button.tsx
  📄 Creating src/components/ui/card.tsx
  ✅ Shadcn UI configured
 
🎯 Executing blueprint: Welcome Screen
  📄 Creating src/app/page.tsx
  ✅ Welcome screen added
 
✨ Project created successfully!
 
📦 Next steps:
   cd my-app
   npm install
   npm run dev
 
🌐 Your app will be running at http://localhost:3000

npm install better-auth @better-auth/nextjs

// src/lib/auth/config.ts - 120 lines
// Manually write all configuration

// src/app/api/auth/[...all]/route.ts - 80 lines
// Handle all auth endpoints

// src/hooks/use-auth.ts - 200 lines
// Wrap with TanStack Query
// Handle sessions, login, logout, etc.

// src/components/auth/LoginForm.tsx - 150 lines
// src/components/auth/RegisterForm.tsx - 180 lines
// src/components/auth/ProfileEditor.tsx - 200 lines

architech new my-saas --genome saas-starter

// Uses fetch directly
const [products, setProducts] = useState([]);
 
useEffect(() => {
  fetch('/api/products')
    .then(res => res.json())
    .then(setProducts);
}, []);

// Uses SWR
import useSWR from 'swr';
const { data: orders } = useSWR('/api/orders', fetcher);

// Uses TanStack Query
import { useQuery } from '@tanstack/react-query';
const { data: users } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers
});

// Feature 1
const { data: products } = useProducts();
 
// Feature 2
const { data: orders } = useOrders();
 
// Feature 3
const { data: users } = useUsers();

my-saas-app/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── (auth)/
│   │   │   ├── login/
│   │   │   ├── register/
│   │   │   └── profile/
│   │   ├── (dashboard)/
│   │   │   ├── teams/
│   │   │   └── settings/
│   │   ├── api/
│   │   │   ├── auth/[...all]/    # Better Auth routes
│   │   │   ├── teams/            # Teams API
│   │   │   ├── payments/         # Stripe webhooks
│   │   │   └── users/            # User API
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/                   # shadcn/ui (40+ components)
│   │   ├── auth/                 # Auth components
│   │   ├── teams/                # Team components
│   │   └── layouts/              # Layout components
│   ├── features/
│   │   ├── auth/                 # Auth feature
│   │   │   ├── hooks/            # TanStack Query hooks
│   │   │   ├── stores/           # Zustand stores
│   │   │   ├── types/            # TypeScript types
│   │   │   └── schemas/          # Zod schemas
│   │   ├── teams/                # Teams feature
│   │   └── payments/             # Payments feature
│   ├── lib/
│   │   ├── db/
│   │   │   ├── schema/           # Drizzle schemas
│   │   │   └── client.ts         # Database client
│   │   ├── auth/
│   │   │   └── config.ts         # Auth configuration
│   │   ├── stripe/
│   │   │   └── client.ts         # Stripe configuration
│   │   └── query/
│   │       └── client.ts         # TanStack Query setup
│   ├── hooks/                    # Shared hooks
│   └── stores/                   # Shared stores
├── __tests__/
│   ├── unit/
│   └── e2e/
├── .env.example                  # Environment template
├── drizzle.config.ts             # Database config
├── next.config.js                # Next.js config
├── tailwind.config.ts            # Tailwind config
├── tsconfig.json                 # TypeScript config
├── vitest.config.ts              # Test config
└── package.json

Files generated: 150+
Lines of code: 8,000+
All yours to modify: 100%

/**
 * Products Data Hook
 * 
 * Auto-generated by The Architech from Drizzle schema
 * Follows Golden Core pattern (TanStack Query)
 */
 
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import type { Product, InsertProduct } from '@/lib/db/schema';
 
// Query keys for consistent caching
const productKeys = {
  all: ['products'] as const,
  detail: (id: string) => [...productKeys.all, id] as const,
};
 
/**
 * Fetch all products
 * 
 * @example
 * ```tsx
 * function ProductList() {
 *   const { data: products, isLoading } = useProducts();
 *   if (isLoading) return <Spinner />;
 *   return products.map(p => <ProductCard key={p.id} product={p} />);
 * }
 * ```
 */
export function useProducts() {
  return useQuery({
    queryKey: productKeys.all,
    queryFn: async (): Promise<Product[]> => {
      const response = await fetch('/api/products');
      if (!response.ok) throw new Error('Failed to fetch products');
      return response.json();
    },
    staleTime: 5 * 60 * 1000, // 5 minutes
    gcTime: 10 * 60 * 1000,   // 10 minutes
  });
}
 
/**
 * Create a new product
 */
export function useCreateProduct() {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: async (data: InsertProduct): Promise<Product> => {
      const response = await fetch('/api/products', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      
      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'Failed to create product');
      }
      
      return response.json();
    },
    onSuccess: () => {
      // Automatically invalidate cache to show new product
      queryClient.invalidateQueries({ queryKey: productKeys.all });
    },
  });
}
 
// ✅ Full TypeScript typing
// ✅ JSDoc comments
// ✅ Error handling
// ✅ Cache invalidation
// ✅ Consistent pattern
// ✅ Production-ready

00:00 - Command entered
00:01 - Genome resolved (local-marketplace)
00:02 - Dependency graph built (15 modules, 0 conflicts)
00:03 - Next.js base created (create-next-app)
00:35 - npm packages installed (332 packages)
00:40 - Drizzle ORM configured
00:42 - Better Auth set up
00:45 - Stripe integration added
00:50 - TanStack Query configured
00:55 - Zustand stores generated
01:02 - shadcn/ui components added
01:15 - Auth feature generated (12 components)
01:30 - Teams feature generated (15 components)
01:45 - Payments feature generated (18 components)
02:00 - Testing suite configured (Vitest + Playwright)
02:10 - ESLint + Prettier configured
02:15 - Sentry monitoring added
02:20 - Docker + Vercel deployment config
02:30 - Final validation
02:32 - ✅ Generation complete

Total: 2 minutes 32 seconds

import { useTeams } from '../hooks/use-teams';  // ← Headless hook
import { Button } from '@/components/ui/button';  // ← shadcn
import { Card } from '@/components/ui/card';
 
export function TeamsDashboard() {
  const { data: teams } = useTeams();  // ← No UI dependency
  
  return (
    <div>
      {teams?.map(team => (
        <Card key={team.id}>{/* shadcn Card */}</Card>
      ))}
    </div>
  );
}

import { useTeams } from '../hooks/use-teams';  // ← Same hook!
import { Button, Card } from '@mui/material';  // ← MUI instead
 
export function TeamsDashboard() {
  const { data: teams } = useTeams();  // ← Unchanged!
  
  return (
    <div>
      {teams?.map(team => (
        <Card key={team.id}>{/* MUI Card */}</Card>
      ))}
    </div>
  );
}

// src/features/auth/hooks/use-auth.ts
// ↑ YOU OWN THIS FILE - Modify freely!
 
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
// ↑ Standard libraries you already know
 
import type { User, LoginData } from '../types';
// ↑ Generated types from your feature contract
 
/**
 * Hook to get current user session
 * 
 * CUSTOMIZE: Add caching strategy, add optimistic updates, etc.
 */
export function useSession() {
  return useQuery({
    queryKey: ['session'],
    queryFn: async (): Promise<User | null> => {
      const res = await fetch('/api/auth/session');
      if (!res.ok) return null;
      return res.json();
    },
    staleTime: 5 * 60 * 1000,  // ← CHANGE THIS if you want
  });
}
 
/**
 * Hook to login
 * 
 * CUSTOMIZE: Add 2FA, add remember me, add rate limiting, etc.
 */
export function useLogin() {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: async (credentials: LoginData) => {
      // ← ADD YOUR CUSTOM VALIDATION HERE
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials),
      });
      if (!res.ok) throw new Error('Login failed');
      return res.json();
    },
    onSuccess: (user) => {
      // ← ADD YOUR CUSTOM SUCCESS LOGIC
      queryClient.setQueryData(['session'], user);
      queryClient.invalidateQueries({ queryKey: ['user'] });
    },
  });
}
 
// ✅ No magic
// ✅ No black boxes
// ✅ Just clean TypeScript
// ✅ Modify anything you want
// ✅ YOU OWN THIS

$ architech new my-app --genome sas-starter
 
❌ Genome not found: "sas-starter"
 
🔍 Searched in:
  ✗ local-marketplace
  ✗ npm-package
  ✗ custom-local (none configured)
 
💡 Did you mean one of these?
  • architech new my-app --genome saas-starter
  • architech new my-app --genome saas
  • architech new my-app --genome full-saas
 
📖 Available genomes:
  • hello-world
  • saas-starter
  • blog
  • ai-app
  • web3
  ... and 1 more
 
📋 List all genomes:
  architech list-genomes
 
🛠️ Or use a file path:
  architech new /path/to/my-genome.genome.ts

$ architech new my-app --genome saas-starter
# ... generation starts ...
 
❌ Error: Database configuration required
 
💡 Action needed:
  1. Sign up for database (free tier available):
     → Neon: https://neon.tech
     → Supabase: https://supabase.com
  
  2. Get connection string
  
  3. Add to .env:
     DATABASE_URL="postgresql://user:pass@host:5432/db"
 
📖 See troubleshooting guide:
  https://docs.architech.dev/troubleshooting#database-issues

modules: [
  { id: 'features/teams-management/frontend/shadcn' },  // Requires many things!
]

🔍 Analyzing dependencies...

teams-management/frontend/shadcn requires:
  → features/teams-management/backend (auto-added)
  → ui/shadcn-ui (auto-added)
  → framework/nextjs (auto-added)

teams-management/backend requires:
  → database/drizzle (auto-added)
  → auth/better-auth (auto-added)

Execution order (topological sort):
  1. framework/nextjs
  2. database/drizzle
  3. auth/better-auth  
  4. ui/shadcn-ui
  5. features/teams-management/backend
  6. features/teams-management/frontend/shadcn

✅ All prerequisites satisfied
✅ No conflicts detected

// marketplace/features/my-feature/contract.ts
 
export interface Task {
  id: string;
  title: string;
  completed: boolean;
  createdAt: string;
}
 
export interface CreateTaskData {
  title: string;
}

export const TaskSchema = z.object({
  id: z.string().uuid(),
  title: z.string().min(1),
  completed: z.boolean(),
  createdAt: z.string().datetime(),
});

export function useTasks() {
  return useQuery({
    queryKey: ['tasks'],
    queryFn: fetchTasks,
  });
}

export const useTaskStore = create<TaskState>()(...);

$ architech new my-project
 
🎯 Choose a genome for your project:
 
? Select a genome: (Use arrow keys)
❯ 🟢 Hello World - Minimal Next.js starter (60 seconds)
  🟡 SaaS Starter - Full-featured SaaS platform (10 minutes)
  🟡 Blog - Modern blog with CMS (5 minutes)
  🟡 AI App - AI-powered application (8 minutes)
  🔴 Web3 DApp - Blockchain application (12 minutes)
  🔴 Ultimate Showcase - Everything enabled (15 minutes)
  📁 Use custom genome file path...
 
[↑/↓ to move, Enter to select]

# Install (5 minutes)
git clone https://github.com/the-architech-xyz/cli.git
cd cli && npm install && npm run build && npm link
 
# Generate (60 seconds)
architech new demo-app --genome hello-world
cd demo-app && npm install && npm run dev
 
# Open browser
open http://localhost:3000