Spaces:

Jensin
/

anycoder-376bb63e

Running

App Files Files Community

Jensin commited on Nov 29, 2025

Commit

2203154

verified ·

1 Parent(s): 89c93e0

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +994 -19

index.html CHANGED Viewed

@@ -1,19 +1,994 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+FROM node:20-alpine AS base
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=7860
+ENV HOSTNAME="0.0.0.0"
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+USER nextjs
+EXPOSE 7860
+CMD ["node", "server.js"]
+=== package.json ===
+{
+  "name": "ai-backend-generator",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.2.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "openai": "4.52.0",
+    "zod": "3.23.8",
+    "prismjs": "1.29.0",
+    "react-flow-renderer": "10.3.17",
+    "lucide-react": "0.378.0",
+    "jszip": "3.10.1",
+    "file-saver": "2.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "20.12.12",
+    "@types/react": "18.3.2",
+    "@types/react-dom": "18.3.0",
+    "@types/prismjs": "1.26.4",
+    "@types/file-saver": "2.0.7",
+    "typescript": "5.4.5",
+    "tailwindcss": "3.4.3",
+    "postcss": "8.4.38",
+    "autoprefixer": "10.4.19"
+  }
+}
+=== next.config.js ===
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  reactStrictMode: true,
+  swcMinify: true,
+  experimental: {
+    serverComponentsExternalPackages: ['openai']
+  }
+}
+module.exports = nextConfig
+=== postcss.config.js ===
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+=== tailwind.config.js ===
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+        dark: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        }
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'float': 'float 6s ease-in-out infinite',
+        'glow': 'glow 2s ease-in-out infinite alternate',
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        glow: {
+          '0%': { boxShadow: '0 0 5px rgba(14, 165, 233, 0.5)' },
+          '100%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.8)' },
+        }
+      }
+    },
+  },
+  plugins: [],
+}
+=== tsconfig.json ===
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
+=== styles/globals.css ===
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-dark-950 text-dark-100 antialiased;
+  }
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    @apply bg-dark-900;
+  }
+  ::-webkit-scrollbar-thumb {
+    @apply bg-dark-600 rounded-full;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-500;
+  }
+}
+@layer components {
+  .glass-panel {
+    @apply bg-dark-900/80 backdrop-blur-xl border border-dark-700/50 rounded-2xl;
+  }
+  .gradient-border {
+    @apply relative;
+  }
+  .gradient-border::before {
+    content: '';
+    @apply absolute inset-0 rounded-2xl p-[1px];
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.5));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+  .btn-primary {
+    @apply px-6 py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white font-semibold rounded-xl
+           hover:from-primary-600 hover:to-primary-700 transition-all duration-300 shadow-lg shadow-primary-500/25
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  .btn-secondary {
+    @apply px-6 py-3 bg-dark-800 text-dark-100 font-semibold rounded-xl border border-dark-600
+           hover:bg-dark-700 hover:border-dark-500 transition-all duration-300;
+  }
+  .input-field {
+    @apply w-full px-4 py-3 bg-dark-800/50 border border-dark-600 rounded-xl text-dark-100
+           placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
+           transition-all duration-300;
+  }
+  .code-block {
+    @apply bg-dark-900 rounded-xl p-4 font-mono text-sm overflow-x-auto border border-dark-700;
+  }
+}
+/* Prism.js custom theme */
+code[class*="language-"],
+pre[class*="language-"] {
+  @apply text-dark-100 font-mono text-sm;
+  text-shadow: none;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  @apply text-dark-500;
+}
+.token.punctuation {
+  @apply text-dark-300;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  @apply text-pink-400;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  @apply text-green-400;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  @apply text-yellow-400;
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  @apply text-primary-400;
+}
+.token.function,
+.token.class-name {
+  @apply text-purple-400;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  @apply text-orange-400;
+}
+=== components/Header.jsx ===
+import { Database, Sparkles } from 'lucide-react';
+export default function Header() {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 glass-panel border-t-0 rounded-t-none">
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-purple-600 rounded-xl flex items-center justify-center">
+                <Database className="w-5 h-5 text-white" />
+              </div>
+              <div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center">
+                <Sparkles className="w-2.5 h-2.5 text-white" />
+              </div>
+            </div>
+            <div>
+              <h1 className="text-xl font-bold bg-gradient-to-r from-white to-dark-300 bg-clip-text text-transparent">
+                AI Backend Generator
+              </h1>
+              <p className="text-xs text-dark-400">Database + API Design Copilot</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <a
+              href="https://huggingface.co/spaces/akhaliq/anycoder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-dark-400 hover:text-primary-400 transition-colors"
+            >
+              Built with anycoder
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+=== components/ProjectWizard.jsx ===
+import { useState } from 'react';
+import { ArrowRight, Loader2, Wand2, FileCode, Database, Server } from 'lucide-react';
+export default function ProjectWizard({ onGenerate, isLoading }) {
+  const [projectDescription, setProjectDescription] = useState('');
+  const [projectName, setProjectName] = useState('');
+  const [targetStack, setTargetStack] = useState('nestjs-prisma');
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!projectDescription.trim() || !projectName.trim()) return;
+    onGenerate({ projectName, projectDescription, targetStack });
+  };
+  const examples = [
+    {
+      name: 'E-commerce Platform',
+      description: 'An e-commerce platform with products, categories, users, orders, shopping cart, reviews, and payment tracking. Include inventory management and order status tracking.',
+    },
+    {
+      name: 'Project Management Tool',
+      description: 'A project management tool like Jira with workspaces, projects, tasks, sprints, users, comments, attachments, and time tracking. Include role-based permissions.',
+    },
+    {
+      name: 'Social Media App',
+      description: 'A social media application with users, posts, comments, likes, followers/following relationships, direct messages, and notifications.',
+    },
+  ];
+  return (
+    <div className="glass-panel gradient-border p-8">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-12 h-12 bg-gradient-to-br from-primary-500/20 to-purple-500/20 rounded-xl flex items-center justify-center">
+          <Wand2 className="w-6 h-6 text-primary-400" />
+        </div>
+        <div>
+          <h2 className="text-2xl font-bold text-white">Describe Your Project</h2>
+          <p className="text-dark-400">Tell us what you're building and we'll design the backend</p>
+        </div>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div>
+          <label className="block text-sm font-medium text-dark-300 mb-2">
+            Project Name
+          </label>
+          <input
+            type="text"
+            value={projectName}
+            onChange={(e) => setProjectName(e.target.value)}
+            placeholder="my-awesome-app"
+            className="input-field"
+            disabled={isLoading}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-dark-300 mb-2">
+            Project Description
+          </label>
+          <textarea
+            value={projectDescription}
+            onChange={(e) => setProjectDescription(e.target.value)}
+            placeholder="Describe your project in detail. What entities do you need? What are the main features? What relationships exist between data?"
+            rows={6}
+            className="input-field resize-none"
+            disabled={isLoading}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-dark-300 mb-2">
+            Target Stack
+          </label>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <button
+              type="button"
+              onClick={() => setTargetStack('nestjs-prisma')}
+              disabled={isLoading}
+              className={`p-4 rounded-xl border transition-all duration-300 text-left ${
+                targetStack === 'nestjs-prisma'
+                  ? 'border-primary-500 bg-primary-500/10'
+                  : 'border-dark-600 bg-dark-800/50 hover:border-dark-500'
+              }`}
+            >
+              <div className="flex items-center gap-3 mb-2">
+                <Server className="w-5 h-5 text-primary-400" />
+                <span className="font-semibold text-white">NestJS + Prisma</span>
+              </div>
+              <p className="text-sm text-dark-400">
+                TypeScript, NestJS framework, Prisma ORM, PostgreSQL
+              </p>
+            </button>
+            <button
+              type="button"
+              onClick={() => setTargetStack('express-drizzle')}
+              disabled={isLoading}
+              className={`p-4 rounded-xl border transition-all duration-300 text-left ${
+                targetStack === 'express-drizzle'
+                  ? 'border-primary-500 bg-primary-500/10'
+                  : 'border-dark-600 bg-dark-800/50 hover:border-dark-500'
+              }`}
+            >
+              <div className="flex items-center gap-3 mb-2">
+                <FileCode className="w-5 h-5 text-green-400" />
+                <span className="font-semibold text-white">Express + Drizzle</span>
+              </div>
+              <p className="text-sm text-dark-400">
+                TypeScript, Express.js, Drizzle ORM, PostgreSQL
+              </p>
+            </button>
+          </div>
+        </div>
+        <div>
+          <p className="text-sm text-dark-400 mb-3">Quick examples:</p>
+          <div className="flex flex-wrap gap-2">
+            {examples.map((example) => (
+              <button
+                key={example.name}
+                type="button"
+                onClick={() => {
+                  setProjectName(example.name.toLowerCase().replace(/\s+/g, '-'));
+                  setProjectDescription(example.description);
+                }}
+                disabled={isLoading}
+                className="px-3 py-1.5 text-sm bg-dark-800 text-dark-300 rounded-lg border border-dark-600
+                         hover:border-primary-500/50 hover:text-primary-400 transition-all duration-300"
+              >
+                {example.name}
+              </button>
+            ))}
+          </div>
+        </div>
+        <button
+          type="submit"
+          disabled={isLoading || !projectDescription.trim() || !projectName.trim()}
+          className="btn-primary w-full flex items-center justify-center gap-2"
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              Generating Backend...
+            </>
+          ) : (
+            <>
+              Generate Backend
+              <ArrowRight className="w-5 h-5" />
+            </>
+          )}
+        </button>
+      </form>
+    </div>
+  );
+}
+=== components/SchemaVisualizer.jsx ===
+import { useCallback, useMemo } from 'react';
+import ReactFlow, {
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';
+import { Database, Key, Link2 } from 'lucide-react';
+const EntityNode = ({ data }) => {
+  return (
+    <div className="bg-dark-800 border border-dark-600 rounded-xl shadow-xl min-w-[200px] overflow-hidden">
+      <div className="bg-gradient-to-r from-primary-600 to-purple-600 px-4 py-2 flex items-center gap-2">
+        <Database className="w-4 h-4 text-white" />
+        <span className="font-bold text-white text-sm">{data.name}</span>
+      </div>
+      <div className="p-3 space-y-1.5">
+        {data.fields?.map((field, idx) => (
+          <div key={idx} className="flex items-center gap-2 text-xs">
+            {field.isPrimary && <Key className="w-3 h-3 text-yellow-400" />}
+            {field.isRelation && <Link2 className="w-3 h-3 text-primary-400" />}
+            <span className={`${field.isPrimary ? 'text-yellow-400' : 'text-dark-200'}`}>
+              {field.name}
+            </span>
+            <span className="text-dark-500">{field.type}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+const nodeTypes = {
+  entity: EntityNode,
+};
+export default function SchemaVisualizer({ schema }) {
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(() => {
+    if (!schema?.entities) return { nodes: [], edges: [] };
+    const nodes = schema.entities.map((entity, idx) => ({
+      id: entity.name,
+      type: 'entity',
+      position: {
+        x: (idx % 3) * 300 + 50,
+        y: Math.floor(idx / 3) * 250 + 50,
+      },
+      data: {
+        name: entity.name,
+        fields: entity.fields,
+      },
+    }));
+    const edges = [];
+    schema.entities.forEach((entity) => {
+      entity.fields
+        ?.filter((f) => f.isRelation && f.relationTo)
+        .forEach((field, idx) => {
+          edges.push({
+            id: `${entity.name}-${field.relationTo}-${idx}`,
+            source: entity.name,
+            target: field.relationTo,
+            type: 'smoothstep',
+            animated: true,
+            style: { stroke: '#0ea5e9', strokeWidth: 2 },
+          });
+        });
+    });
+    return { nodes, edges };
+  }, [schema]);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  if (!schema?.entities?.length) {
+    return (
+      <div className="h-[400px] flex items-center justify-center text-dark-400">
+        <p>No schema to visualize yet</p>
+      </div>
+    );
+  }
+  return (
+    <div className="h-[500px] bg-dark-900 rounded-xl border border-dark-700 overflow-hidden">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={nodeTypes}
+        fitView
+        attributionPosition="bottom-left"
+      >
+        <Background color="#334155" gap={20} />
+        <Controls className="bg-dark-800 border-dark-600" />
+        <MiniMap
+          nodeColor="#0ea5e9"
+          maskColor="rgba(15, 23, 42, 0.8)"
+          className="bg-dark-800 border-dark-600"
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+=== components/CodeViewer.jsx ===
+import { useEffect, useRef, useState } from 'react';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-sql';
+import { Copy, Check, FileCode } from 'lucide-react';
+export default function CodeViewer({ code, language = 'typescript', filename }) {
+  const codeRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (codeRef.current) {
+      Prism.highlightElement(codeRef.current);
+    }
+  }, [code]);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <div className="rounded-xl border border-dark-700 overflow-hidden">
+      <div className="bg-dark-800 px-4 py-2 flex items-center justify-between border-b border-dark-700">
+        <div className="flex items-center gap-2">
+          <FileCode className="w-4 h-4 text-dark-400" />
+          <span className="text-sm text-dark-300 font-mono">{filename}</span>
+        </div>
+        <button
+          onClick={handleCopy}
+          className="p-1.5 rounded-lg hover:bg-dark-700 transition-colors"
+        >
+          {copied ? (
+            <Check className="w-4 h-4 text-green-400" />
+          ) : (
+            <Copy className="w-4 h-4 text-dark-400" />
+          )}
+        </button>
+      </div>
+      <div className="code-block max-h-[400px] overflow-auto">
+        <pre className="!bg-transparent !p-0 !m-0">
+          <code ref={codeRef} className={`language-${language}`}>
+            {code}
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+}
+=== components/GeneratedOutput.jsx ===
+import { useState } from 'react';
+import { Download, Github, Database, Server, FileJson, Code2, Layers, ChevronDown, ChevronUp } from 'lucide-react';
+import CodeViewer from './CodeViewer';
+import SchemaVisualizer from './SchemaVisualizer';
+export default function GeneratedOutput({ result, onDownload }) {
+  const [activeTab, setActiveTab] = useState('schema');
+  const [expandedFiles, setExpandedFiles] = useState({});
+  const tabs = [
+    { id: 'schema', label: 'Schema Diagram', icon: Database },
+    { id: 'prisma', label: 'Prisma Schema', icon: Layers },
+    { id: 'api', label: 'API Routes', icon: Server },
+    { id: 'openapi', label: 'OpenAPI Spec', icon: FileJson },
+    { id: 'code', label: 'Generated Code', icon: Code2 },
+  ];
+  const toggleFile = (filename) => {
+    setExpandedFiles((prev) => ({
+      ...prev,
+      [filename]: !prev[filename],
+    }));
+  };
+  return (
+    <div className="space-y-6">
+      <div className="glass-panel gradient-border p-6">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-bold text-white">Generated Backend</h2>
+          <div className="flex gap-3">
+            <button onClick={onDownload} className="btn-secondary flex items-center gap-2">
+              <Download className="w-4 h-4" />
+              Download ZIP
+            </button>
+          </div>
+        </div>
+        <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap ${
+                activeTab === tab.id
+                  ? 'bg-primary-500/20 text-primary-400 border border-primary-500/50'
+                  : 'bg-dark-800 text-dark-400 border border-dark-700 hover:border-dark-500'
+              }`}
+            >
+              <tab.icon className="w-4 h-4" />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="min-h-[400px]">
+          {activeTab === 'schema' && (
+            <SchemaVisualizer schema={result.schema} />
+          )}
+          {activeTab === 'prisma' && result.prismaSchema && (
+            <CodeViewer
+              code={result.prismaSchema}
+              language="typescript"
+              filename="prisma/schema.prisma"
+            />
+          )}
+          {activeTab === 'api' && result.apiRoutes && (
+            <div className="space-y-4">
+              {result.apiRoutes.map((route, idx) => (
+                <div
+                  key={idx}
+                  className="bg-dark-800/50 rounded-xl border border-dark-700 p-4"
+                >
+                  <div className="flex items-center gap-3 mb-2">
+                    <span
+                      className={`px-2 py-0.5 rounded text-xs font-bold ${
+                        route.method === 'GET'
+                          ? 'bg-green-500/20 text-green-400'
+                          : route.method === 'POST'
+                          ? 'bg-blue-500/20 text-blue-400'
+                          : route.method === 'PUT' || route.method === 'PATCH'
+                          ? 'bg-yellow-500/20 text-yellow-400'
+                          : 'bg-red-500/20 text-red-400'
+                      }`}
+                    >
+                      {route.method}
+                    </span>
+                    <code className="text-dark-200 font-mono text-sm">
+                      {route.path}
+                    </code>
+                  </div>
+                  <p className="text-dark-400 text-sm">{route.description}</p>
+                </div>
+              ))}
+            </div>
+          )}
+          {activeTab === 'openapi' && result.openApiSpec && (
+            <CodeViewer
+              code={JSON.stringify(result.openApiSpec, null, 2)}
+              language="json"
+              filename="openapi.json"
+            />
+          )}
+          {activeTab === 'code' && result.generatedFiles && (
+            <div className="space-y-3">
+              {result.generatedFiles.map((file, idx) => (
+                <div
+                  key={idx}
+                  className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden"
+                >
+                  <button
+                    onClick={() => toggleFile(file.filename)}
+                    className="w-full px-4 py-3 flex items-center justify-between hover:bg-dark-700/50 transition-colors"
+                  >
+                    <div className="flex items-center gap-2">
+                      <Code2 className="w-4 h-4 text-primary-400" />
+                      <span className="text-dark-200 font-mono text-sm">
+                        {file.filename}
+                      </span>
+                    </div>
+                    {expandedFiles[file.filename] ? (
+                      <ChevronUp className="w-4 h-4 text-dark-400" />
+                    ) : (
+                      <ChevronDown className="w-4 h-4 text-dark-400" />
+                    )}
+                  </button>
+                  {expandedFiles[file.filename] && (
+                    <div className="border-t border-dark-700">
+                      <CodeViewer
+                        code={file.content}
+                        language={file.language || 'typescript'}
+                        filename={file.filename}
+                      />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+=== components/LoadingState.jsx ===
+import { Database, Server, FileCode, Sparkles, Check } from 'lucide-react';
+export default function LoadingState({ currentStep }) {
+  const steps = [
+    { id: 'analyzing', label: 'Analyzing requirements', icon: Sparkles },
+    { id: 'schema', label: 'Designing database schema', icon: Database },
+    { id: 'api', label: 'Generating API routes', icon: Server },
+    { id: 'code', label: 'Writing backend code', icon: FileCode },
+  ];
+  const currentIndex = steps.findIndex((s) => s.id === currentStep);
+  return (
+    <div className="glass-panel gradient-border p-8">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 mx-auto mb-4 relative">
+          <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-purple-500 rounded-full animate-pulse-slow" />
+          <div className="absolute inset-1 bg-dark-900 rounded-full flex items-center justify-center">
+            <Sparkles className="w-6 h-6 text-primary-400 animate-float" />
+          </div>
+        </div>
+        <h3 className="text-xl font-bold text-white mb-2">AI is working its magic</h3>
+        <p className="text-dark-400">Designing your backend architecture...</p>
+      </div>
+      <div className="space-y-4">
+        {steps.map((step, idx) => {
+          const isCompleted = idx < currentIndex;
+          const isCurrent = idx === currentIndex;
+          return (
+            <div
+              key={step.id}
+              className={`flex items-center gap-4 p-4 rounded-xl transition-all duration-500 ${
+                isCurrent
+                  ? 'bg-primary-500/10 border border-primary-500/30'
+                  : isCompleted
+                  ? 'bg-green-500/10 border border-green-500/30'
+                  : 'bg-dark-800/50 border border-dark-700'
+              }`}
+            >
+              <div
+                className={`w-10 h-10 rounded-xl flex items-center justify-center ${
+                  isCurrent
+                    ? 'bg-primary-500/20'
+                    : isCompleted
+                    ? 'bg-green-500/20'
+                    : 'bg-dark-700'
+                }`}
+              >
+                {isCompleted ? (
+                  <Check className="w-5 h-5 text-green-400" />
+                ) : (
+                  <step.icon
+                    className={`w-5 h-5 ${
+                      isCurrent ? 'text-primary-400 animate-pulse' : 'text-dark-500'
+                    }`}
+                  />
+                )}
+              </div>
+              <span
+                className={`font-medium ${
+                  isCurrent
+                    ? 'text-primary-400'
+                    : isCompleted
+                    ? 'text-green-400'
+                    : 'text-dark-500'
+                }`}
+              >
+                {step.label}
+              </span>
+              {isCurrent && (
+                <div className="ml-auto">
+                  <div className="w-5 h-5 border-2 border-primary-400 border-t-transparent rounded-full animate-spin" />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+=== components/FeatureCards.jsx ===
+import { Database, Server, Code2, Zap, Shield, Layers } from 'lucide-react';
+export default function FeatureCards() {
+  const features = [
+    {
+      icon: Database,
+      title: 'Smart Schema Design',
+      description: 'AI analyzes your requirements and designs optimal database schemas with proper relationships.',
+      color: 'from-blue-500 to-cyan-500',
+    },
+    {
+      icon: Server,
+      title: 'Auto API Generation',
+      description: 'Generates RESTful APIs with CRUD operations, validation, and error handling built-in.',
+      color: 'from-purple-500 to-pink-500',
+    },
+    {
+      icon: Code2,
+      title: 'Production-Ready Code',
+      description: 'Clean, typed TypeScript code following best practices with NestJS or Express.',
+      color: 'from-green-500 to-emerald-500',
+    },
+    {
+      icon: Zap,
+      title: 'Instant Setup',
+      description: 'Download and run immediately with Docker support and migration scripts included.',
+      color: 'from-yellow-500 to-orange-500',
+    },
+    {
+      icon: Shield,
+      title: 'Type Safety',
+      description: 'Full TypeScript support with Prisma/Drizzle for type-safe database operations.',
+      color: 'from-red-500 to-rose-500',
+    },
+    {
+      icon: Layers,
+      title: 'OpenAPI Docs',
+      description: 'Auto-generated OpenAPI/Swagger documentation for all your endpoints.',
+      color: 'from-indigo-500 to-violet-500',
+    },
+  ];
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {features.map((feature, idx) => (
+        <div
+          key={idx}
+          className="glass-panel p-6 hover:border-dark-500 transition-all duration-300 group"
+        >
+          <div
+            className={`w-12 h-12 rounded-xl bg-gradient-to-br ${feature.color} p-0.5 mb-4
+                       group-hover:scale-110 transition-transform duration-300`}
+          >
+            <div className="w-full h-full bg-dark-900 rounded-[10px] flex items-center justify-center">
+              <feature.icon className="w-5 h-5 text-white" />
+            </div>
+          </div>
+          <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+          <p className="text-dark-400 text-sm">{feature.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+=== pages/_app.js ===
+import '../styles/globals.css';
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+=== pages/index.js ===
+import { useState, useCallback } from 'react';
+import Head from 'next/head';
+import Header from '../components/Header';
+import ProjectWizard from '../components/ProjectWizard';
+import GeneratedOutput from '../components/GeneratedOutput';
+import LoadingState from '../components/LoadingState';
+import FeatureCards from '../components/FeatureCards';
+export default function Home() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentStep, setCurrentStep] = useState('');
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const handleGenerate = useCallback(async (projectData) => {
+    setIsLoading(true);
+    setError(