Merge pull request #19 from johndoe6345789/copilot/refactor-components-to-reduce-loc

[WIP] Refactor components to be less than 150 lines of code

src/components/DocumentationView/ReadmeTab.tsx

@@ -0,0 +1,139 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Code, Database, Tree, PaintBrush, Flask, Play, Cube, Wrench, Gear, Rocket, Lightbulb, CheckCircle } from '@phosphor-icons/react'
+import { FeatureItem, AIFeatureCard } from './DocComponents'
+import readmeData from '@/data/documentation/readme-data.json'
+
+const Sparkle = ({ size }: { size: number }) => <span style={{ fontSize: size }}>✨</span>
+
+const iconMap: Record<string, any> = {
+  Code, Database, Tree, PaintBrush, Flask, Play, Cube, Wrench, Gear, Sparkle
+}
+
+export function ReadmeTab() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
+            <Code size={32} weight="duotone" className="text-white" />
+          </div>
+          <div>
+            <h1 className="text-4xl font-bold">{readmeData.title}</h1>
+            <p className="text-lg text-muted-foreground">{readmeData.subtitle}</p>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold">Overview</h2>
+          <p className="text-foreground/90 leading-relaxed">{readmeData.overview}</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Rocket size={20} weight="duotone" />
+              Key Features
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {readmeData.features.map((feature, idx) => {
+              const Icon = iconMap[feature.icon] || Code
+              return (
+                <FeatureItem
+                  key={idx}
+                  icon={<Icon size={18} />}
+                  title={feature.title}
+                  description={feature.description}
+                />
+              )
+            })}
+          </CardContent>
+        </Card>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold">Getting Started</h2>
+          <Card>
+            <CardContent className="pt-6 space-y-4">
+              {readmeData.gettingStarted.map((step) => (
+                <div key={step.step} className="space-y-2">
+                  <h3 className="text-lg font-semibold flex items-center gap-2">
+                    <span className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm">
+                      {step.step}
+                    </span>
+                    {step.title}
+                  </h3>
+                  <p className="text-muted-foreground ml-8">{step.description}</p>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold">AI-Powered Features</h2>
+          <p className="text-foreground/90 leading-relaxed">
+            CodeForge integrates OpenAI across every designer to accelerate development:
+          </p>
+          <div className="grid gap-3">
+            {readmeData.aiFeatures.map((feature, idx) => (
+              <AIFeatureCard key={idx} title={feature.title} description={feature.description} />
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold">Technology Stack</h2>
+          <div className="grid md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Frontend</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2 text-sm text-foreground/80">
+                  {readmeData.techStack.frontend.map((tech, idx) => (
+                    <li key={idx} className="flex items-center gap-2">
+                      <CheckCircle size={16} weight="fill" className="text-accent" />
+                      {tech}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Backend & Tools</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2 text-sm text-foreground/80">
+                  {readmeData.techStack.backend.map((tech, idx) => (
+                    <li key={idx} className="flex items-center gap-2">
+                      <CheckCircle size={16} weight="fill" className="text-accent" />
+                      {tech}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        <Card className="bg-accent/10 border-accent/20">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Lightbulb size={20} weight="duotone" className="text-accent" />
+              Pro Tips
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            {readmeData.proTips.map((tip, idx) => (
+              <p key={idx}>{tip}</p>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

src/data/documentation/agents-data.json

@@ -0,0 +1,162 @@
+{
+  "overview": "CodeForge uses a modular AI service architecture that integrates OpenAI's GPT models across all features. Each designer has specialized prompts and validation logic to ensure high-quality generated code.",
+  "coreServices": [
+    {
+      "filename": "ai-service.ts",
+      "path": "/src/lib/ai-service.ts",
+      "description": "Central AI service orchestrating OpenAI API calls",
+      "features": [
+        "Complete application generation from descriptions",
+        "Model generation with Prisma schema validation",
+        "Component generation with Material UI integration",
+        "Theme generation with color theory and accessibility",
+        "Code explanation and documentation",
+        "Code improvement and optimization",
+        "Test generation for Playwright, Storybook, and unit tests"
+      ]
+    },
+    {
+      "filename": "error-repair-service.ts",
+      "path": "/src/lib/error-repair-service.ts",
+      "description": "Error detection and automated repair system",
+      "features": [
+        "Syntax error detection and repair",
+        "Import statement validation and fixes",
+        "TypeScript type error resolution",
+        "ESLint violation detection and fixes",
+        "Context-aware repair using related files",
+        "Batch repair operations",
+        "Repair explanation generation"
+      ]
+    },
+    {
+      "filename": "generators.ts",
+      "path": "/src/lib/generators.ts",
+      "description": "Code generation utilities for project export",
+      "features": [
+        "Next.js project structure generation",
+        "Prisma schema file generation",
+        "Material UI theme configuration",
+        "Playwright test file generation",
+        "Storybook story file generation",
+        "Unit test file generation",
+        "Flask application structure",
+        "Package.json configuration"
+      ]
+    }
+  ],
+  "integrationPoints": [
+    {
+      "component": "ModelDesigner",
+      "capabilities": [
+        "Generate models from natural language",
+        "Suggest appropriate field types",
+        "Create relations between models",
+        "Generate realistic field names and structures"
+      ]
+    },
+    {
+      "component": "ComponentTreeBuilder",
+      "capabilities": [
+        "Generate component hierarchies",
+        "Suggest Material UI components",
+        "Create prop configurations",
+        "Build complex layouts from descriptions"
+      ]
+    },
+    {
+      "component": "StyleDesigner",
+      "capabilities": [
+        "Generate color palettes from descriptions",
+        "Ensure WCAG accessibility compliance",
+        "Create harmonious color relationships",
+        "Suggest typography pairings"
+      ]
+    },
+    {
+      "component": "CodeEditor",
+      "capabilities": [
+        "Explain code functionality",
+        "Improve code quality and performance",
+        "Suggest best practices",
+        "Generate inline documentation"
+      ]
+    },
+    {
+      "component": "PlaywrightDesigner",
+      "capabilities": [
+        "Generate E2E test scenarios",
+        "Create test steps from user flows",
+        "Suggest appropriate selectors",
+        "Generate assertions for validations"
+      ]
+    },
+    {
+      "component": "StorybookDesigner",
+      "capabilities": [
+        "Generate component stories",
+        "Create meaningful story variations",
+        "Configure args based on prop types",
+        "Organize stories by categories"
+      ]
+    },
+    {
+      "component": "UnitTestDesigner",
+      "capabilities": [
+        "Generate comprehensive test suites",
+        "Create test cases with assertions",
+        "Generate setup and teardown code",
+        "Cover edge cases and error scenarios"
+      ]
+    },
+    {
+      "component": "ErrorPanel",
+      "capabilities": [
+        "Analyze error patterns",
+        "Generate context-aware fixes",
+        "Explain error causes",
+        "Prevent similar errors in future"
+      ]
+    }
+  ],
+  "promptEngineering": [
+    {
+      "title": "Context Preservation",
+      "description": "All AI prompts include relevant project context such as existing models, components, and theme configurations to ensure generated code integrates seamlessly."
+    },
+    {
+      "title": "Format Specification",
+      "description": "Prompts specify exact output formats (JSON, TypeScript, Python) with strict schemas to ensure parseable and valid responses."
+    },
+    {
+      "title": "Best Practices Enforcement",
+      "description": "Generated code follows Next.js, React, and Flask best practices through detailed prompt instructions and post-processing validation."
+    },
+    {
+      "title": "Error Handling",
+      "description": "Fallback mechanisms and retry logic ensure graceful degradation when AI services are unavailable or responses are malformed."
+    }
+  ],
+  "futureEnhancements": [
+    {
+      "title": "Multi-Model Support",
+      "description": "Integration with Claude, Gemini, and other LLMs for specialized tasks"
+    },
+    {
+      "title": "Fine-Tuned Models",
+      "description": "Custom models trained on specific frameworks and design patterns"
+    },
+    {
+      "title": "Code Review Agent",
+      "description": "Automated code review with security and performance analysis"
+    },
+    {
+      "title": "Conversational Interface",
+      "description": "Chat-based project building with natural language commands"
+    },
+    {
+      "title": "Learning System",
+      "description": "AI that learns from user corrections and preferences over time"
+    }
+  ]
+}

src/data/documentation/cicd-data.json

@@ -0,0 +1,228 @@
+{
+  "title": "CI/CD Guide",
+  "subtitle": "Complete deployment automation for multiple platforms",
+  "overview": "CodeForge includes production-ready CI/CD configurations for GitHub Actions, GitLab CI, Jenkins, and CircleCI. Each pipeline includes linting, testing, security scanning, Docker image building, and automated deployment workflows.",
+  "platforms": [
+    {
+      "name": "GitHub Actions",
+      "file": ".github/workflows/ci.yml",
+      "description": "Complete CI/CD with GHCR Docker registry integration",
+      "features": [
+        "Parallel lint and test execution",
+        "E2E tests with Playwright",
+        "Docker build and push to GitHub Container Registry",
+        "Security scanning with Trivy",
+        "Automated staging and production deployments",
+        "Release workflow with versioned artifacts"
+      ]
+    },
+    {
+      "name": "GitLab CI",
+      "file": ".gitlab-ci.yml",
+      "description": "Multi-stage pipeline with GitLab Container Registry",
+      "features": [
+        "Dependency caching for faster builds",
+        "Coverage reporting with Cobertura",
+        "Docker-in-Docker builds",
+        "Manual production approval gates",
+        "Webhook-based deployment triggers"
+      ]
+    },
+    {
+      "name": "Jenkins",
+      "file": "Jenkinsfile",
+      "description": "Declarative pipeline with Slack notifications",
+      "features": [
+        "Node.js environment configuration",
+        "HTML report publishing for tests and coverage",
+        "Artifact archiving and fingerprinting",
+        "Manual production deployment approval",
+        "Slack integration for deployment notifications"
+      ]
+    },
+    {
+      "name": "CircleCI",
+      "file": ".circleci/config.yml",
+      "description": "Workflow orchestration with orb integrations",
+      "features": [
+        "Docker layer caching for optimization",
+        "Job dependency management",
+        "Test results and artifact storage",
+        "Approval workflows for production",
+        "Slack notifications via orb"
+      ]
+    }
+  ],
+  "pipelineStages": [
+    {
+      "stage": "Lint",
+      "description": "ESLint and TypeScript type checking to ensure code quality",
+      "duration": "~1-2 min"
+    },
+    {
+      "stage": "Test",
+      "description": "Unit tests with coverage reporting and result artifacts",
+      "duration": "~2-3 min"
+    },
+    {
+      "stage": "Build",
+      "description": "Production build with artifact generation for deployment",
+      "duration": "~2-4 min"
+    },
+    {
+      "stage": "E2E Tests",
+      "description": "Playwright end-to-end tests with HTML reports",
+      "duration": "~3-5 min"
+    },
+    {
+      "stage": "Security",
+      "description": "npm audit and Trivy vulnerability scanning",
+      "duration": "~1-2 min"
+    },
+    {
+      "stage": "Docker Build",
+      "description": "Multi-stage Docker image build and push to registry",
+      "duration": "~3-5 min"
+    },
+    {
+      "stage": "Deploy",
+      "description": "Automated deployment to staging and production environments",
+      "duration": "~1-3 min"
+    }
+  ],
+  "dockerConfig": {
+    "files": [
+      {
+        "file": "Dockerfile",
+        "description": "Multi-stage build with Node.js builder and Nginx runtime"
+      },
+      {
+        "file": "nginx.conf",
+        "description": "Production Nginx configuration with health checks and caching"
+      },
+      {
+        "file": "docker-compose.yml",
+        "description": "Local development and deployment orchestration"
+      },
+      {
+        "file": ".dockerignore",
+        "description": "Optimized build context by excluding unnecessary files"
+      }
+    ],
+    "features": [
+      "Multi-stage build reduces final image size to ~50MB",
+      "Nginx serves static files with gzip compression",
+      "Health check endpoint at /health for orchestration",
+      "Automatic cache headers for static assets",
+      "SPA routing support with fallback to index.html"
+    ]
+  },
+  "environmentVariables": [
+    {
+      "variable": "NODE_VERSION",
+      "description": "Node.js version (default: 20)",
+      "required": false
+    },
+    {
+      "variable": "REGISTRY",
+      "description": "Docker registry URL (default: ghcr.io)",
+      "required": false
+    },
+    {
+      "variable": "STAGING_WEBHOOK_URL",
+      "description": "Webhook for staging deployments",
+      "required": false
+    },
+    {
+      "variable": "PRODUCTION_WEBHOOK_URL",
+      "description": "Webhook for production deployments",
+      "required": false
+    },
+    {
+      "variable": "CODECOV_TOKEN",
+      "description": "Codecov integration token",
+      "required": false
+    },
+    {
+      "variable": "SLACK_WEBHOOK",
+      "description": "Slack webhook for notifications",
+      "required": false
+    }
+  ],
+  "branchStrategy": [
+    {
+      "branch": "main",
+      "description": "Production branch - deploys to production environment (manual approval required)",
+      "color": "green"
+    },
+    {
+      "branch": "develop",
+      "description": "Development branch - automatically deploys to staging environment",
+      "color": "blue"
+    },
+    {
+      "branch": "feature/*",
+      "description": "Feature branches - runs tests only, no deployment",
+      "color": "purple"
+    },
+    {
+      "branch": "v* tags",
+      "description": "Version tags - triggers release workflow with artifacts and changelog",
+      "color": "orange"
+    }
+  ],
+  "quickStart": [
+    {
+      "step": 1,
+      "title": "Choose Your Platform",
+      "description": "Select GitHub Actions, GitLab CI, Jenkins, or CircleCI based on your infrastructure"
+    },
+    {
+      "step": 2,
+      "title": "Configure Secrets",
+      "description": "Add required environment variables and secrets in your platform's settings"
+    },
+    {
+      "step": 3,
+      "title": "Push to Repository",
+      "description": "Push code to main or develop branch to trigger the CI/CD pipeline"
+    },
+    {
+      "step": 4,
+      "title": "Monitor Pipeline",
+      "description": "View pipeline status, test results, and deployment logs in your platform's dashboard"
+    }
+  ],
+  "bestPractices": [
+    "Never commit secrets - use environment variables and platform secret management",
+    "Enable branch protection on main and develop branches",
+    "Require code reviews and passing tests before merging",
+    "Use manual approval gates for production deployments",
+    "Monitor security scan results and fix vulnerabilities promptly",
+    "Keep dependencies updated with Dependabot or Renovate",
+    "Use semantic versioning for releases (v1.0.0, v1.1.0, etc.)",
+    "Configure Slack or email notifications for deployment status"
+  ],
+  "additionalResources": [
+    {
+      "file": "CI_CD_GUIDE.md",
+      "description": "Detailed setup guide for all platforms"
+    },
+    {
+      "file": ".github/workflows/",
+      "description": "GitHub Actions workflows"
+    },
+    {
+      "file": ".gitlab-ci.yml",
+      "description": "GitLab CI configuration"
+    },
+    {
+      "file": "Jenkinsfile",
+      "description": "Jenkins pipeline definition"
+    },
+    {
+      "file": ".circleci/config.yml",
+      "description": "CircleCI configuration"
+    }
+  ]
+}

src/data/documentation/pwa-data.json

@@ -0,0 +1,128 @@
+{
+  "title": "Progressive Web App",
+  "subtitle": "Offline-first experience with native-like capabilities",
+  "overview": "CodeForge is a fully-featured Progressive Web App that can be installed on any device and works offline. With intelligent caching, automatic updates, and native app-like features, you can build applications anywhere, anytime.",
+  "features": [
+    {
+      "title": "Installable",
+      "description": "Install on desktop or mobile for quick access from your home screen or applications menu"
+    },
+    {
+      "title": "Offline Support",
+      "description": "Work without internet connection; changes sync automatically when you reconnect"
+    },
+    {
+      "title": "Automatic Updates",
+      "description": "Get notified when new versions are available with one-click updates"
+    },
+    {
+      "title": "Push Notifications",
+      "description": "Opt-in to receive updates about builds, errors, and new features"
+    },
+    {
+      "title": "App Shortcuts",
+      "description": "Quick access to Dashboard, Code Editor, and Models from your OS"
+    },
+    {
+      "title": "Share Target",
+      "description": "Share code files directly to CodeForge from other apps"
+    }
+  ],
+  "installation": {
+    "desktop": [
+      {
+        "platform": "Chrome/Edge/Brave",
+        "steps": [
+          "Look for install icon (⊕) in address bar",
+          "Click \"Install\" or use prompt in app",
+          "App added to applications menu"
+        ]
+      },
+      {
+        "platform": "Safari (macOS)",
+        "steps": [
+          "Click File → Add to Dock",
+          "App appears in Dock"
+        ]
+      }
+    ],
+    "mobile": [
+      {
+        "platform": "iOS (Safari)",
+        "steps": [
+          "Tap Share button",
+          "Select \"Add to Home Screen\"",
+          "Confirm installation"
+        ]
+      },
+      {
+        "platform": "Android (Chrome)",
+        "steps": [
+          "Tap menu (three dots)",
+          "Select \"Install app\"",
+          "Confirm installation"
+        ]
+      }
+    ]
+  },
+  "settings": [
+    {
+      "title": "Installation Status",
+      "description": "Check if app is installed and trigger installation if available"
+    },
+    {
+      "title": "Network Status",
+      "description": "Real-time online/offline indicator with connectivity information"
+    },
+    {
+      "title": "Push Notifications",
+      "description": "Toggle notifications and manage permissions"
+    },
+    {
+      "title": "Cache Management",
+      "description": "View cache size, service worker status, and clear cached data"
+    },
+    {
+      "title": "Update Management",
+      "description": "Install pending updates when new versions are available"
+    }
+  ],
+  "offlineCapabilities": {
+    "worksOffline": [
+      "View and edit existing projects",
+      "Browse files and code",
+      "Use Monaco editor",
+      "Navigate all tabs",
+      "View documentation",
+      "Make changes locally"
+    ],
+    "requiresInternet": [
+      "AI-powered generation",
+      "External font loading",
+      "Database sync",
+      "External resources"
+    ]
+  },
+  "proTips": [
+    {
+      "title": "Install for best performance",
+      "description": "Installed apps load faster and work more reliably offline"
+    },
+    {
+      "title": "Save before going offline",
+      "description": "Ensure projects are saved to local storage before losing connection"
+    },
+    {
+      "title": "Clear cache if issues arise",
+      "description": "Use PWA settings to clear cache and reload with fresh data"
+    },
+    {
+      "title": "Enable notifications",
+      "description": "Stay informed about updates and build completions"
+    },
+    {
+      "title": "Update regularly",
+      "description": "New versions bring performance improvements and features"
+    }
+  ]
+}

src/data/documentation/readme-data.json

@@ -0,0 +1,141 @@
+{
+  "title": "CodeForge",
+  "subtitle": "Low-Code Next.js App Builder with AI",
+  "overview": "CodeForge is a comprehensive visual low-code platform for generating production-ready Next.js applications. It combines the power of visual designers with direct code editing, AI-powered generation, and a complete full-stack development toolkit.",
+  "features": [
+    {
+      "icon": "Code",
+      "title": "Monaco Code Editor",
+      "description": "Full-featured code editor with syntax highlighting, autocomplete, and AI-powered improvements"
+    },
+    {
+      "icon": "Database",
+      "title": "Prisma Schema Designer",
+      "description": "Visual database model designer with automatic schema generation and AI assistance"
+    },
+    {
+      "icon": "Tree",
+      "title": "Component Tree Builder",
+      "description": "Hierarchical component structure builder with drag-and-drop and AI generation"
+    },
+    {
+      "icon": "PaintBrush",
+      "title": "Theme Designer",
+      "description": "Material UI theme customizer with multiple variants, custom colors, and AI theme generation"
+    },
+    {
+      "icon": "Flask",
+      "title": "Flask Backend Designer",
+      "description": "Visual Python Flask API designer with blueprints, endpoints, and CORS configuration"
+    },
+    {
+      "icon": "Play",
+      "title": "Playwright Test Designer",
+      "description": "E2E test builder with step configuration and AI test generation"
+    },
+    {
+      "icon": "Cube",
+      "title": "Unit Test Designer",
+      "description": "Comprehensive test suite builder for components, functions, hooks, and integration tests"
+    },
+    {
+      "icon": "Wrench",
+      "title": "Auto Error Repair",
+      "description": "Automated error detection and AI-powered code repair system"
+    },
+    {
+      "icon": "Gear",
+      "title": "Project Settings",
+      "description": "Configure Next.js options, npm packages, scripts, and build settings"
+    },
+    {
+      "icon": "Sparkle",
+      "title": "AI Integration",
+      "description": "OpenAI-powered generation across all features for rapid development"
+    }
+  ],
+  "gettingStarted": [
+    {
+      "step": 1,
+      "title": "Create Your First Model",
+      "description": "Navigate to the Models tab and create your database schema using the visual designer or describe your data model to the AI."
+    },
+    {
+      "step": 2,
+      "title": "Design Your Components",
+      "description": "Use the Components tab to build your UI hierarchy visually or let the AI generate component structures based on your requirements."
+    },
+    {
+      "step": 3,
+      "title": "Customize Your Theme",
+      "description": "Head to the Styling tab to create custom color palettes, manage theme variants (light/dark), and configure typography."
+    },
+    {
+      "step": 4,
+      "title": "Build Your Backend",
+      "description": "Configure your Flask API in the Flask API tab by creating blueprints and endpoints with full CORS and authentication support."
+    },
+    {
+      "step": 5,
+      "title": "Export Your Project",
+      "description": "Click Export Project to generate all files including Next.js pages, Prisma schemas, Flask backend, tests, and configuration files ready for deployment."
+    }
+  ],
+  "aiFeatures": [
+    {
+      "title": "Complete App Generation",
+      "description": "Describe your application and get a full project structure with models, components, and styling"
+    },
+    {
+      "title": "Model Generation",
+      "description": "Generate Prisma models with fields and relations from natural language descriptions"
+    },
+    {
+      "title": "Component Creation",
+      "description": "Build complex React components with proper structure and Material UI integration"
+    },
+    {
+      "title": "Theme Generation",
+      "description": "Create beautiful, accessible color palettes that match your brand or description"
+    },
+    {
+      "title": "Test Generation",
+      "description": "Generate comprehensive E2E, unit, and integration tests with proper assertions"
+    },
+    {
+      "title": "Code Explanation",
+      "description": "Get detailed explanations of any code snippet to understand implementation details"
+    },
+    {
+      "title": "Code Improvement",
+      "description": "Automatically optimize code for performance, readability, and best practices"
+    },
+    {
+      "title": "Error Repair",
+      "description": "Automatically detect and fix syntax, type, import, and lint errors with context-aware fixes"
+    }
+  ],
+  "techStack": {
+    "frontend": [
+      "Next.js 14 with App Router",
+      "React 18 with TypeScript",
+      "Material UI 5",
+      "Monaco Editor",
+      "Tailwind CSS"
+    ],
+    "backend": [
+      "Flask REST API",
+      "Prisma ORM",
+      "Playwright E2E Testing",
+      "Vitest & React Testing Library",
+      "Storybook for Components"
+    ]
+  },
+  "proTips": [
+    "💡 Use the AI Generate feature to quickly scaffold entire applications from descriptions",
+    "💡 The Error Repair tab automatically scans and fixes common issues - check it before exporting",
+    "💡 Create multiple theme variants (light, dark, custom) in the Styling tab for complete theme support",
+    "💡 Test your components with Storybook stories before writing full E2E tests",
+    "💡 Flask blueprints help organize your API endpoints by feature or resource"
+  ]
+}

src/data/documentation/roadmap-data.json

@@ -0,0 +1,141 @@
+{
+  "completed": [
+    {
+      "title": "Monaco Code Editor Integration",
+      "description": "Full-featured code editor with syntax highlighting, multi-file tabs, and auto-save",
+      "version": "v1.0"
+    },
+    {
+      "title": "Prisma Schema Designer",
+      "description": "Visual database model designer with fields, relations, and schema generation",
+      "version": "v1.0"
+    },
+    {
+      "title": "Component Tree Builder",
+      "description": "Hierarchical React component structure builder with Material UI components",
+      "version": "v1.0"
+    },
+    {
+      "title": "Theme Designer",
+      "description": "Material UI theme customizer with color palettes and typography configuration",
+      "version": "v1.1"
+    },
+    {
+      "title": "OpenAI Integration",
+      "description": "AI-powered generation across models, components, themes, and code",
+      "version": "v2.0"
+    },
+    {
+      "title": "Multi-Theme Variants",
+      "description": "Support for light, dark, and custom theme variants with unlimited custom colors",
+      "version": "v2.1"
+    },
+    {
+      "title": "Playwright Test Designer",
+      "description": "Visual E2E test builder with step-by-step configuration and AI generation",
+      "version": "v3.0"
+    },
+    {
+      "title": "Storybook Story Designer",
+      "description": "Component story builder with args configuration and category organization",
+      "version": "v3.0"
+    },
+    {
+      "title": "Unit Test Designer",
+      "description": "Comprehensive test suite builder for components, functions, hooks, and integration tests",
+      "version": "v3.0"
+    },
+    {
+      "title": "Auto Error Detection & Repair",
+      "description": "Automated error scanning with AI-powered context-aware code repair",
+      "version": "v3.1"
+    },
+    {
+      "title": "Responsive UI Improvements",
+      "description": "Multi-row tab support and improved layout for complex applications",
+      "version": "v3.2"
+    },
+    {
+      "title": "Flask Backend Designer",
+      "description": "Python Flask REST API designer with blueprints, endpoints, and CORS configuration",
+      "version": "v4.0"
+    },
+    {
+      "title": "Project Settings Designer",
+      "description": "Next.js configuration, npm package management, and build script customization",
+      "version": "v4.0"
+    },
+    {
+      "title": "CI/CD Configuration",
+      "description": "Complete CI/CD pipelines for GitHub Actions, GitLab CI, Jenkins, and CircleCI",
+      "version": "v4.2"
+    },
+    {
+      "title": "Docker Containerization",
+      "description": "Multi-stage Docker builds with Nginx, docker-compose, and health checks",
+      "version": "v4.2"
+    }
+  ],
+  "planned": [
+    {
+      "title": "Real-Time Preview",
+      "description": "Live preview of generated applications with hot reload",
+      "version": "v4.1"
+    },
+    {
+      "title": "Database Seeding Designer",
+      "description": "Visual interface for creating seed data for Prisma models",
+      "version": "v4.2"
+    },
+    {
+      "title": "API Client Generator",
+      "description": "Generate TypeScript API clients from Flask backend definitions",
+      "version": "v4.2"
+    },
+    {
+      "title": "Form Builder",
+      "description": "Visual form designer with validation, field types, and submission handling",
+      "version": "v4.3"
+    },
+    {
+      "title": "Authentication Designer",
+      "description": "Configure authentication flows (JWT, OAuth, sessions) for both frontend and backend",
+      "version": "v5.0"
+    },
+    {
+      "title": "Docker Configuration",
+      "description": "Generate Docker and docker-compose files for containerized deployment",
+      "version": "v5.0"
+    },
+    {
+      "title": "GraphQL API Designer",
+      "description": "Alternative to Flask REST - design GraphQL schemas and resolvers",
+      "version": "v5.1"
+    },
+    {
+      "title": "State Management Designer",
+      "description": "Configure Redux, Zustand, or Jotai state management patterns",
+      "version": "v5.2"
+    },
+    {
+      "title": "CI/CD Pipeline Generator",
+      "description": "Generate GitHub Actions, GitLab CI, or CircleCI configuration files",
+      "version": "v5.3"
+    },
+    {
+      "title": "Component Library Export",
+      "description": "Export designed components as a standalone npm package",
+      "version": "v6.0"
+    },
+    {
+      "title": "Design System Generator",
+      "description": "Create complete design systems with tokens, components, and documentation",
+      "version": "v6.0"
+    },
+    {
+      "title": "Collaboration Features",
+      "description": "Real-time collaborative editing and commenting system",
+      "version": "v6.1"
+    }
+  ]
+}

src/data/documentation/sass-data.json

@@ -0,0 +1,153 @@
+{
+  "title": "Sass Styles Guide",
+  "subtitle": "Custom Material UI components with Sass",
+  "overview": "CodeForge includes a comprehensive Sass-based styling system for non-standard Material UI components. This system provides pre-built components, utilities, mixins, and animations that extend beyond the standard Material UI component library.",
+  "fileStructure": [
+    {
+      "file": "src/styles/_variables.scss",
+      "description": "Color palettes, spacing scales, typography, transitions, and other design tokens"
+    },
+    {
+      "file": "src/styles/_utilities.scss",
+      "description": "Mixins and functions for responsive design, colors, typography, and layout helpers"
+    },
+    {
+      "file": "src/styles/_animations.scss",
+      "description": "Keyframe animations and animation utility classes for transitions and effects"
+    },
+    {
+      "file": "src/styles/material-ui-custom.scss",
+      "description": "Custom Material UI component styles with variants and states"
+    },
+    {
+      "file": "src/styles/main.scss",
+      "description": "Main entry point that imports all Sass modules and provides layout components"
+    }
+  ],
+  "components": [
+    {
+      "name": "Buttons",
+      "classes": ["mui-custom-button--primary", "mui-custom-button--secondary", "mui-custom-button--accent", "mui-custom-button--outline", "mui-custom-button--ghost"],
+      "description": "Custom styled buttons with hover effects and variants"
+    },
+    {
+      "name": "Cards",
+      "classes": ["mui-custom-card", "mui-custom-card--gradient", "mui-custom-card--glass"],
+      "description": "Elevated cards with gradient and glassmorphism variants"
+    },
+    {
+      "name": "Inputs",
+      "classes": ["mui-custom-input", "mui-custom-input--error", "mui-custom-input--success"],
+      "description": "Form inputs with focus states and validation styling"
+    },
+    {
+      "name": "Chips",
+      "classes": ["mui-custom-chip--primary", "mui-custom-chip--success", "mui-custom-chip--error", "mui-custom-chip--warning"],
+      "description": "Status chips and tags with color variants"
+    },
+    {
+      "name": "Panels",
+      "classes": ["mui-custom-panel", "mui-custom-panel--with-header"],
+      "description": "Content panels with headers and footers"
+    },
+    {
+      "name": "Dialogs",
+      "classes": ["mui-custom-dialog"],
+      "description": "Modal dialogs with backdrop blur effects"
+    },
+    {
+      "name": "Badges",
+      "classes": ["custom-mui-badge", "custom-mui-badge--dot"],
+      "description": "Notification badges and indicators"
+    },
+    {
+      "name": "Progress",
+      "classes": ["mui-custom-progress", "mui-custom-progress--indeterminate"],
+      "description": "Loading progress bars with animations"
+    },
+    {
+      "name": "Skeletons",
+      "classes": ["mui-custom-skeleton--text", "mui-custom-skeleton--circle", "mui-custom-skeleton--rect"],
+      "description": "Loading skeleton placeholders with shimmer effect"
+    },
+    {
+      "name": "Accordions",
+      "classes": ["mui-custom-accordion"],
+      "description": "Collapsible content sections with animations"
+    }
+  ],
+  "layoutComponents": [
+    {
+      "name": "custom-mui-container",
+      "description": "Max-width container with responsive padding"
+    },
+    {
+      "name": "custom-mui-grid",
+      "description": "CSS Grid layouts with responsive columns (--cols-1 to --cols-12, --responsive)"
+    },
+    {
+      "name": "custom-mui-flex",
+      "description": "Flexbox utilities (--row, --col, --wrap, --center, --between, --around)"
+    },
+    {
+      "name": "custom-mui-stack",
+      "description": "Vertical/horizontal stacks with configurable gaps"
+    },
+    {
+      "name": "custom-mui-surface",
+      "description": "Interactive surfaces with elevation and hover effects"
+    }
+  ],
+  "utilities": [
+    {
+      "name": "@include respond-to($breakpoint)",
+      "description": "Generate media queries for xs, sm, md, lg, xl, 2xl breakpoints",
+      "example": "@include respond-to('lg') {\n  padding: 2rem;\n}"
+    },
+    {
+      "name": "@include elevation($level)",
+      "description": "Apply box shadows with levels 1-4",
+      "example": "@include elevation(2);"
+    },
+    {
+      "name": "@include glassmorphism($blur, $opacity)",
+      "description": "Create frosted glass effects with backdrop blur",
+      "example": "@include glassmorphism(16px, 0.1);"
+    },
+    {
+      "name": "get-color($palette, $shade)",
+      "description": "Access colors from predefined palettes (primary, secondary, accent, success, error, warning)",
+      "example": "color: get-color('primary', 500);"
+    },
+    {
+      "name": "@include truncate($lines)",
+      "description": "Truncate text with ellipsis after specified lines",
+      "example": "@include truncate(2);"
+    },
+    {
+      "name": "@include show-scrollbar($track, $thumb)",
+      "description": "Style webkit scrollbars with custom colors",
+      "example": "@include show-scrollbar(rgba(0,0,0,0.1), rgba(0,0,0,0.3));"
+    }
+  ],
+  "animations": [
+    { "name": "animate-fade-in", "description": "Fade in from opacity 0" },
+    { "name": "animate-slide-in-up", "description": "Slide in from bottom" },
+    { "name": "animate-slide-in-down", "description": "Slide in from top" },
+    { "name": "animate-scale-in", "description": "Scale in from 95%" },
+    { "name": "animate-pulse", "description": "Pulsing opacity effect" },
+    { "name": "animate-bounce", "description": "Bouncing effect" },
+    { "name": "animate-spin", "description": "Continuous rotation" },
+    { "name": "animate-shimmer", "description": "Shimmer effect for loading" },
+    { "name": "animate-float", "description": "Floating up and down" },
+    { "name": "animate-glow", "description": "Glowing shadow effect" }
+  ],
+  "bestPractices": [
+    "Import main.scss in your index.css to access all Sass components and utilities",
+    "Use @use instead of @import for better module encapsulation",
+    "Leverage mixins for consistent spacing, elevation, and responsive design",
+    "Extend existing component classes rather than creating from scratch",
+    "Use animation classes sparingly and respect prefers-reduced-motion",
+    "Customize variables in _variables.scss to match your design system"
+  ]
+}