From 797f2e8657d7c68a01dd4256562e1f9ce8823261 Mon Sep 17 00:00:00 2001 From: Chandini Date: Tue, 23 Sep 2025 12:52:39 +0530 Subject: [PATCH] frontend changes before tech stack --- src/components/ai/AICustomFeatureCreator.tsx | 34 +- src/components/main-dashboard.tsx | 510 ++++----- src/components/tech-stack-summary.tsx | 1005 ++++++++++++++++++ src/config/backend.ts | 4 +- 4 files changed, 1222 insertions(+), 331 deletions(-) create mode 100644 src/components/tech-stack-summary.tsx diff --git a/src/components/ai/AICustomFeatureCreator.tsx b/src/components/ai/AICustomFeatureCreator.tsx index 2b2fdca..ec3c8d3 100644 --- a/src/components/ai/AICustomFeatureCreator.tsx +++ b/src/components/ai/AICustomFeatureCreator.tsx @@ -119,7 +119,7 @@ export function AICustomFeatureCreator({ const hasAnyAnalysis = !!aiAnalysis || requirements.some(r => (r.rules || []).length > 0) const handleAnalyze = async () => { - if (hasAnyAnalysis) return + // Allow analyze even if some analysis exists; we'll only analyze missing items if (!featureDescription.trim() && requirements.every(r => !r.text.trim())) return setIsAnalyzing(true) setAnalysisError(null) @@ -146,13 +146,17 @@ export function AICustomFeatureCreator({ }) - // Generate logic rules per requirement in parallel and attach to each requirement + // Generate logic rules per requirement in parallel; analyze only those missing rules const perRequirementRules = await Promise.all( requirements.map(async (r) => { + // Preserve existing rules if already analyzed + if (Array.isArray(r.rules) && r.rules.length > 0) { + return r.rules + } try { const res = await analyzeFeatureWithAI( - featureName, - featureDescription, + r.text || featureName, + r.text || featureDescription, r.text ? [r.text] : [], projectType ) @@ -172,15 +176,14 @@ export function AICustomFeatureCreator({ const handleAnalyzeRequirement = async (idx: number) => { const req = requirements[idx] - if (hasAnyAnalysis) return if (!req?.text?.trim()) return if ((req.rules || []).length > 0) return setAnalyzingIdx(idx) setAnalysisError(null) try { const res = await analyzeFeatureWithAI( - featureName, - featureDescription, + req.text || featureName, + req.text || featureDescription, [req.text], projectType ) @@ -269,10 +272,10 @@ export function AICustomFeatureCreator({ type="button" variant="outline" onClick={() => handleAnalyzeRequirement(idx)} - disabled={isAnalyzing || analyzingIdx === idx || !r.text.trim() || hasAnyAnalysis || (r.rules || []).length > 0} + disabled={isAnalyzing || analyzingIdx === idx || !r.text.trim() || (r.rules || []).length > 0} className="border-white/20 text-white hover:bg-white/10" > - {analyzingIdx === idx ? 'Analyzing…' : (((r.rules || []).length > 0) || hasAnyAnalysis ? 'Analyzed' : 'Analyze With AI')} + {analyzingIdx === idx ? 'Analyzing…' : ((r.rules || []).length > 0 ? 'Analyzed' : 'Analyze With AI')} + {analysisError && ( {analysisError} diff --git a/src/components/main-dashboard.tsx b/src/components/main-dashboard.tsx index ae4fae2..96f1a1a 100644 --- a/src/components/main-dashboard.tsx +++ b/src/components/main-dashboard.tsx @@ -21,6 +21,7 @@ import WireframeCanvas from "@/components/wireframe-canvas" import PromptSidePanel from "@/components/prompt-side-panel" import { DualCanvasEditor } from "@/components/dual-canvas-editor" import { getAccessToken } from "@/components/apis/authApiClients" +import TechStackSummary from "@/components/tech-stack-summary" interface Template { id: string @@ -1308,14 +1309,11 @@ function BusinessQuestionsStep({ logicRules: (selected as any[]).flatMap((f: any) => f.logicRules || []), } - const resp = await fetch(`${BACKEND_URL}/api/v1/select`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(completeData), - }) - if (!resp.ok) throw new Error(`HTTP ${resp.status}`) - const recommendations = await resp.json() - onDone(completeData, recommendations) + // TODO: Store business context Q&A responses in backend (temporarily disabled) + console.log('πŸ“ Business context answers:', businessAnswers) + + // Proceed directly to next step with complete data + onDone(completeData, null) } catch (e) { console.error('Tech stack selection failed', e) } finally { @@ -1375,316 +1373,190 @@ function BusinessQuestionsStep({ ) } -// Tech Stack Summary Step -function TechStackSummaryStep({ - recommendations, - completeData, - onBack, - onGenerate, -}: { recommendations: any; completeData: any; onBack: () => void; onGenerate: () => void }) { - const functional = recommendations?.functional_requirements || {} - const claude = recommendations?.claude_recommendations || {} - const tech = claude?.technology_recommendations || {} - - return ( -
-
-

Technology Stack Recommendations

-

AI-powered recommendations for your project

-
- - {functional?.feature_name && ( -
-

Functional Requirements Analysis

-
-
-

Core Feature

-
-
{functional.feature_name}
-
{functional.description}
-
-
-
- {/*

Complexity Level

-
- - {(functional.complexity_level || 'medium').toUpperCase()} - -
*/} -
-
- - {Array.isArray(functional.technical_requirements) && functional.technical_requirements.length > 0 && ( -
-

Technical Requirements

-
- {functional.technical_requirements.map((req: string, i: number) => ( - {req} - ))} -
-
- )} - - {Array.isArray(functional.business_logic_rules) && functional.business_logic_rules.length > 0 && ( -
-

Business Logic Rules

-
- {functional.business_logic_rules.map((rule: string, i: number) => ( -
{rule}
- ))} -
-
- )} -
- )} - -
-

AI Technology Recommendations

-
- {tech?.frontend && ( -
-
Frontend
-
Framework: {tech.frontend.framework}
- {Array.isArray(tech.frontend.libraries) && ( -
Libraries: {tech.frontend.libraries.join(', ')}
- )} - {tech.frontend.reasoning &&
{tech.frontend.reasoning}
} -
- )} - {tech?.backend && ( -
-
Backend
-
Language: {tech.backend.language}
-
Framework: {tech.backend.framework}
- {Array.isArray(tech.backend.libraries) && ( -
Libraries: {tech.backend.libraries.join(', ')}
- )} - {tech.backend.reasoning &&
{tech.backend.reasoning}
} -
- )} - {tech?.database && ( -
-
Database
-
Primary: {tech.database.primary}
- {Array.isArray(tech.database.secondary) && tech.database.secondary.length > 0 && ( -
Secondary: {tech.database.secondary.join(', ')}
- )} - {tech.database.reasoning &&
{tech.database.reasoning}
} -
- )} -
-
- - {claude?.implementation_strategy && ( -
-

Implementation Strategy

-
-
-
Architecture Pattern
-
{claude.implementation_strategy.architecture_pattern}
-
-
-
Deployment Strategy
-
{claude.implementation_strategy.deployment_strategy}
-
-
-
- )} - -
-
- - -
-
AI will design complete architecture
-
-
- ) -} // AI Mockup Step Component -function AIMockupStep({ - template, - selectedFeatures, - onNext, - onBack, -}: { - template: Template; - selectedFeatures: TemplateFeature[]; - onNext: () => void; - onBack: () => void -}) { - const [mounted, setMounted] = useState(false) - const [wireframeData, setWireframeData] = useState(null) - const [isGenerating, setIsGenerating] = useState(false) - const [selectedDevice, setSelectedDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop') - const [initialPrompt, setInitialPrompt] = useState("") +// function AIMockupStep({ +// template, +// selectedFeatures, +// onNext, +// onBack, +// }: { +// template: Template +// selectedFeatures: TemplateFeature[] +// onNext: () => void +// onBack: () => void +// }) { +// const [mounted, setMounted] = useState(false) +// const [wireframeData, setWireframeData] = useState(null) +// const [isGenerating, setIsGenerating] = useState(false) +// const [selectedDevice, setSelectedDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop') +// const [initialPrompt, setInitialPrompt] = useState("") - // Load state from localStorage after component mounts - useEffect(() => { - setMounted(true) +// // Load state from localStorage after component mounts +// useEffect(() => { +// setMounted(true) - if (typeof window !== 'undefined') { - // Load device type - const savedDevice = localStorage.getItem('wireframe_device_type') - if (savedDevice && ['desktop', 'tablet', 'mobile'].includes(savedDevice)) { - setSelectedDevice(savedDevice as 'desktop' | 'tablet' | 'mobile') - } +// if (typeof window !== 'undefined') { +// // Load device type +// const savedDevice = localStorage.getItem('wireframe_device_type') +// if (savedDevice && ['desktop', 'tablet', 'mobile'].includes(savedDevice)) { +// setSelectedDevice(savedDevice as 'desktop' | 'tablet' | 'mobile') +// } - // Load wireframe data - const savedWireframeData = localStorage.getItem('wireframe_data') - if (savedWireframeData) { - try { - const parsed = JSON.parse(savedWireframeData) - setWireframeData(parsed) - } catch (error) { - console.error('Failed to parse saved wireframe data:', error) - } - } - } - }, []) +// // Load wireframe data +// const savedWireframeData = localStorage.getItem('wireframe_data') +// if (savedWireframeData) { +// try { +// const parsed = JSON.parse(savedWireframeData) +// setWireframeData(parsed) +// } catch (error) { +// console.error('Failed to parse saved wireframe data:', error) +// } +// } +// } +// }, []) - // Build prompt from selected features and template - useEffect(() => { - if (!template) return - const featureNames = (selectedFeatures || []).map(f => f.name).filter(Boolean) - const base = `${template.title} dashboard` - const parts = featureNames.length > 0 ? ` with ${featureNames.join(', ')}` : '' - const footer = '. Optimize layout and spacing. Include navigation.' - const prompt = `${base}${parts}${footer}` - setInitialPrompt(prompt) - }, [template, JSON.stringify(selectedFeatures)]) +// // Build prompt from selected features and template +// useEffect(() => { +// if (!template) return +// const featureNames = (selectedFeatures || []).map(f => f.name).filter(Boolean) +// const base = `${template.title} dashboard` +// const parts = featureNames.length > 0 ? ` with ${featureNames.join(', ')}` : '' +// const footer = '. Optimize layout and spacing. Include navigation.' +// const prompt = `${base}${parts}${footer}` +// setInitialPrompt(prompt) +// }, [template, JSON.stringify(selectedFeatures)]) - const handleWireframeGenerated = (data: any) => { - setWireframeData(data) - setIsGenerating(false) - } +// const handleWireframeGenerated = (data: any) => { +// setWireframeData(data) +// setIsGenerating(false) +// } - const handleWireframeGenerationStart = () => { - setIsGenerating(true) - } +// const handleWireframeGenerationStart = () => { +// setIsGenerating(true) +// } - const handleDeviceChange = (device: 'desktop' | 'tablet' | 'mobile') => { - console.log('DEBUG: AIMockupStep handleDeviceChange called with:', device) - console.log('DEBUG: Previous selectedDevice state:', selectedDevice) +// const handleDeviceChange = (device: 'desktop' | 'tablet' | 'mobile') => { +// console.log('DEBUG: AIMockupStep handleDeviceChange called with:', device) +// console.log('DEBUG: Previous selectedDevice state:', selectedDevice) - setSelectedDevice(device) +// setSelectedDevice(device) - // Save to localStorage (only after mounting) - if (mounted) { - localStorage.setItem('wireframe_device_type', device) - console.log('DEBUG: Saved device type to localStorage:', device) - } +// // Save to localStorage (only after mounting) +// if (mounted) { +// localStorage.setItem('wireframe_device_type', device) +// console.log('DEBUG: Saved device type to localStorage:', device) +// } - console.log('DEBUG: New selectedDevice state:', device) - } +// console.log('DEBUG: New selectedDevice state:', device) +// } - // Save wireframe data to localStorage when it changes (only after mounting) - useEffect(() => { - if (wireframeData && mounted) { - localStorage.setItem('wireframe_data', JSON.stringify(wireframeData)) - } - }, [wireframeData, mounted]) +// // Save wireframe data to localStorage when it changes (only after mounting) +// useEffect(() => { +// if (wireframeData && mounted) { +// localStorage.setItem('wireframe_data', JSON.stringify(wireframeData)) +// } +// }, [wireframeData, mounted]) - // Debug: Log when selectedDevice prop changes - useEffect(() => { - console.log('DEBUG: AIMockupStep selectedDevice state changed to:', selectedDevice) - }, [selectedDevice]) +// // Debug: Log when selectedDevice prop changes +// useEffect(() => { +// console.log('DEBUG: AIMockupStep selectedDevice state changed to:', selectedDevice) +// }, [selectedDevice]) - // Debug: Log when selectedDevice prop changes - useEffect(() => { - console.log('DEBUG: WireframeCanvas selectedDevice prop changed to:', selectedDevice) - }, [selectedDevice]) +// // Debug: Log when selectedDevice prop changes +// useEffect(() => { +// console.log('DEBUG: WireframeCanvas selectedDevice prop changed to:', selectedDevice) +// }, [selectedDevice]) - return ( -
-
-

AI Wireframe Mockup

-

- Generate and customize wireframes for {template.title} using AI-powered design tools -

-
- - AI-Powered Wireframe Generation -
-
+// return ( +//
+//
+//

AI Wireframe Mockup

+//

+// Generate and customize wireframes for {template.title} using AI-powered design tools +//

+//
+// +// AI-Powered Wireframe Generation +//
+//
- {/* Dual Canvas Editor */} -
- -
+// {/* Dual Canvas Editor */} +//
+// +//
- {/* Wireframe Status and Controls */} -
-
-
-
- {wireframeData ? 'βœ…' : '⏳'} -
-
- {wireframeData ? 'Wireframe Generated' : 'Ready to Generate'} -
-
- {wireframeData ? 'Click Continue to proceed' : 'Use the AI panel to create wireframes'} -
-
+// {/* Wireframe Status and Controls */} +//
+//
+//
+//
+// {wireframeData ? 'βœ…' : '⏳'} +//
+//
+// {wireframeData ? 'Wireframe Generated' : 'Ready to Generate'} +//
+//
+// {wireframeData ? 'Click Continue to proceed' : 'Use the AI panel to create wireframes'} +//
+//
-
-
- {selectedFeatures.length} -
-
Features Selected
-
- {template.title} template -
-
+//
+//
+// {selectedFeatures.length} +//
+//
Features Selected
+//
+// {template.title} template +//
+//
-
-
- {isGenerating ? 'πŸ”„' : '🎨'} -
-
- {isGenerating ? 'Generating...' : 'AI Ready'} -
-
- {isGenerating ? 'Creating wireframe layout' : 'Claude AI powered'} -
-
-
-
+//
+//
+// {isGenerating ? 'πŸ”„' : '🎨'} +//
+//
+// {isGenerating ? 'Generating...' : 'AI Ready'} +//
+//
+// {isGenerating ? 'Creating wireframe layout' : 'Claude AI powered'} +//
+//
+//
+//
- {/* Navigation */} -
-
- - -
-
- {wireframeData - ? 'Wireframe generated successfully! Continue to define business requirements.' - : 'Generate a wireframe first to continue to the next step.' - } -
-
-
- ) -} +// {/* Navigation */} +//
+//
+// +// +//
+//
+// {wireframeData +// ? 'Wireframe generated successfully! Continue to define business requirements.' +// : 'Generate a wireframe first to continue to the next step.' +// } +//
+//
+//
+// ) +// } // Main Dashboard Component export function MainDashboard() { @@ -1758,15 +1630,15 @@ export function MainDashboard() { } } } - }, []) + }, [mounted]) const steps = [ { id: 1, name: "Project Type", description: "Choose template" }, { id: 2, name: "Features", description: "Select features" }, - { id: 3, name: "AI Mockup", description: "Generate wireframes" }, - { id: 4, name: "Business Context", description: "Define requirements" }, - { id: 5, name: "Generate", description: "Create project" }, - { id: 6, name: "Architecture", description: "Review & deploy" }, + // { id: 3, name: "AI Mockup", description: "Generate wireframes" }, + { id: 3, name: "Business Context", description: "Define requirements" }, + { id: 4, name: "Generate", description: "Create project" }, + { id: 5, name: "Architecture", description: "Review & deploy" }, ] // Save state to localStorage when it changes (only after mounting) @@ -1836,37 +1708,37 @@ export function MainDashboard() { /> ) : null case 3: - return selectedTemplate ? ( - setCurrentStep(4)} - onBack={() => setCurrentStep(2)} - /> - ) : null - case 4: return selectedTemplate ? ( setCurrentStep(3)} - onDone={(data, recs) => { setFinalProjectData(data); setTechStackRecommendations(recs); setCurrentStep(5) }} + onBack={() => setCurrentStep(2)} + onDone={(data, recs) => { setFinalProjectData(data); setTechStackRecommendations(recs); setCurrentStep(4) }} /> ) : null - case 5: + case 4: + console.log('πŸ” MainDashboard - techStackRecommendations:', techStackRecommendations) + console.log('πŸ” MainDashboard - finalProjectData:', finalProjectData) return ( - setCurrentStep(4)} - onGenerate={() => setCurrentStep(6)} + onBack={() => setCurrentStep(3)} + onGenerate={(userTechStack) => { + // Store user's tech stack if provided + if (userTechStack) { + console.log('Storing user tech stack:', userTechStack) + // You can store this in state or pass it to the next step + } + setCurrentStep(5) + }} /> ) - case 6: + case 5: return ( setCurrentStep(5)} + onBack={() => setCurrentStep(4)} /> ) default: diff --git a/src/components/tech-stack-summary.tsx b/src/components/tech-stack-summary.tsx new file mode 100644 index 0000000..a5f9ee5 --- /dev/null +++ b/src/components/tech-stack-summary.tsx @@ -0,0 +1,1005 @@ +"use client" + +import React, { useState, useEffect } from 'react' +import { Button } from '@/components/ui/button' +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { Badge } from '@/components/ui/badge' +import { Input } from '@/components/ui/input' +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' +import { Plus, X, Edit3, Check } from 'lucide-react' + +interface TechStackSummaryProps { + recommendations: any + completeData: any + onBack: () => void + onGenerate: (userTechStack?: any) => void +} + +export default function TechStackSummary({ + recommendations, + completeData, + onBack, + onGenerate, +}: TechStackSummaryProps) { + // State for user's technology edits + const [userTechStack, setUserTechStack] = useState({ + frontend: { framework: '', libraries: [] as string[] }, + backend: { language: '', framework: '', libraries: [] as string[] }, + database: { primary: '', secondary: [] as string[] } + }) + + // State for edit modes + const [editMode, setEditMode] = useState({ + frontend: false, + backend: false, + database: false + }) + + // Initialize user tech stack with recommendations when component loads + useEffect(() => { + if (recommendations?.claude_recommendations?.technology_recommendations) { + const tech = recommendations.claude_recommendations.technology_recommendations + setUserTechStack({ + frontend: { + framework: tech.frontend?.framework || '', + libraries: tech.frontend?.libraries || [] + }, + backend: { + language: tech.backend?.language || '', + framework: tech.backend?.framework || '', + libraries: tech.backend?.libraries || [] + }, + database: { + primary: tech.database?.primary || '', + secondary: tech.database?.secondary || [] + } + }) + } + }, [recommendations]) + + // COMPREHENSIVE TECHNOLOGY OPTIONS + const techOptions = { + frontend: { + frameworks: [ + // === REACT ECOSYSTEM === + 'React', 'Next.js', 'Gatsby', 'Remix', 'Create React App', 'Vite + React', + 'React Native', 'Expo', 'React Native Web', 'Preact', + + // === VUE ECOSYSTEM === + 'Vue.js', 'Vue 3', 'Vue 2', 'Nuxt.js', 'Nuxt 3', 'Quasar Framework', + 'VuePress', 'Gridsome', 'Vue CLI', 'Vite + Vue', + + // === ANGULAR ECOSYSTEM === + 'Angular', 'Angular 17', 'Angular 16', 'Angular 15', 'AngularJS', + 'Angular Universal', 'Ionic Angular', 'Angular Material', + + // === MODERN FRAMEWORKS === + 'Svelte', 'SvelteKit', 'Solid.js', 'SolidStart', 'Qwik', 'QwikCity', + 'Fresh', 'Marko', 'Lit', 'Stencil', 'Alpine.js', 'Hyperapp', + + // === STATIC SITE GENERATORS === + 'Next.js', 'Gatsby', 'Nuxt.js', 'Hugo', 'Jekyll', 'Eleventy', '11ty', + 'Astro', 'Docusaurus', 'VuePress', 'Gridsome', 'Scully', + + // === MOBILE FRAMEWORKS === + 'React Native', 'Flutter Web', 'Ionic', 'Cordova', 'PhoneGap', + 'Capacitor', 'NativeScript', 'Expo', 'Quasar', 'Framework7', + + // === MICRO FRONTENDS === + 'Single-SPA', 'Module Federation', 'Bit', 'Piral', 'Luigi', + + // === TRADITIONAL & VANILLA === + 'Vanilla JavaScript', 'TypeScript', 'jQuery', 'Backbone.js', + 'Ember.js', 'Knockout.js', 'Mithril', 'Riot.js', 'Polymer', + + // === COMPONENT LIBRARIES === + 'Material-UI (MUI)', 'Ant Design', 'Chakra UI', 'Mantine', + 'React Bootstrap', 'Semantic UI React', 'Grommet', 'Evergreen', + + // === CSS FRAMEWORKS === + 'Tailwind CSS', 'Bootstrap', 'Bulma', 'Foundation', 'Materialize', + 'Semantic UI', 'Pure CSS', 'UIKit', 'Tachyons', 'Milligram', + + // === BUILD TOOLS & BUNDLERS === + 'Webpack', 'Vite', 'Parcel', 'Rollup', 'esbuild', 'Snowpack', + 'Turbopack', 'SWC', 'Babel', 'TypeScript Compiler' + ] + }, + backend: { + languages: [ + // === JAVASCRIPT ECOSYSTEM === + 'Node.js', 'TypeScript', 'JavaScript', 'Deno', 'Bun', + + // === PYTHON === + 'Python', 'Python 3.12', 'Python 3.11', 'Python 3.10', 'PyPy', + + // === JAVA ECOSYSTEM === + 'Java', 'Java 21', 'Java 17', 'Java 11', 'Java 8', 'OpenJDK', + 'Kotlin', 'Scala', 'Groovy', 'Clojure', + + // === .NET ECOSYSTEM === + 'C#', '.NET 8', '.NET 7', '.NET 6', '.NET Core', '.NET Framework', + 'F#', 'VB.NET', 'ASP.NET', 'Blazor Server', 'Blazor WebAssembly', + + // === SYSTEMS LANGUAGES === + 'Rust', 'Go', 'C++', 'C', 'Zig', 'Nim', 'Crystal', 'D', + + // === FUNCTIONAL LANGUAGES === + 'Haskell', 'Erlang', 'Elixir', 'OCaml', 'Elm', 'PureScript', + 'ReasonML', 'F#', 'Clojure', 'ClojureScript', + + // === WEB LANGUAGES === + 'PHP', 'Ruby', 'Perl', 'R', 'Julia', 'Lua', 'Swift', + + // === JVM LANGUAGES === + 'Kotlin', 'Scala', 'Groovy', 'Clojure', 'JRuby', 'Jython', + + // === EMERGING LANGUAGES === + 'Dart', 'WebAssembly (WASM)', 'AssemblyScript', 'Grain' + ], + frameworks: { + // === NODE.JS FRAMEWORKS === + 'Node.js': [ + 'Express.js', 'Fastify', 'Koa.js', 'NestJS', 'Hapi.js', + 'Restify', 'Meteor.js', 'AdonisJS', 'Sails.js', 'LoopBack', + 'Feathers.js', 'Total.js', 'Moleculer', 'Strapi', 'KeystoneJS', + 'Ghost', 'Nodemailer', 'Socket.io', 'Express Gateway' + ], + + // === PYTHON FRAMEWORKS === + 'Python': [ + 'FastAPI', 'Django', 'Django REST Framework', 'Flask', 'Tornado', + 'Pyramid', 'Bottle', 'CherryPy', 'Falcon', 'Starlette', 'Quart', + 'Sanic', 'Connexion', 'Eve', 'Hug', 'APIFlask', 'Django Ninja', + 'Chalice', 'Zappa', 'Django Channels' + ], + + // === JAVA FRAMEWORKS === + 'Java': [ + 'Spring Boot', 'Spring Framework', 'Spring MVC', 'Spring WebFlux', + 'Quarkus', 'Micronaut', 'Dropwizard', 'Vert.x', 'Play Framework', + 'Spark Java', 'Struts', 'JSF', 'Wicket', 'Vaadin', 'GWT', + 'Apache Camel', 'Jersey', 'RESTEasy', 'Helidon' + ], + + // === C# FRAMEWORKS === + 'C#': [ + 'ASP.NET Core', 'ASP.NET Core Web API', '.NET 8', '.NET 7', '.NET 6', + 'ASP.NET Framework', 'ASP.NET Web API', 'ASP.NET MVC', + 'Blazor Server', 'Blazor WebAssembly', 'Minimal APIs', + 'Nancy', 'ServiceStack', 'Carter', 'FastEndpoints', + 'Orchard Core', 'Umbraco', 'DotNetNuke' + ], + + // === GO FRAMEWORKS === + 'Go': [ + 'Gin', 'Echo', 'Fiber', 'Gorilla Mux', 'Chi', 'Beego', + 'Revel', 'Buffalo', 'Iris', 'Martini', 'Negroni', + 'Goji', 'HttpRouter', 'Bone', 'Mango' + ], + + // === PHP FRAMEWORKS === + 'PHP': [ + 'Laravel', 'Symfony', 'CodeIgniter', 'Zend Framework', 'Laminas', + 'CakePHP', 'Phalcon', 'Slim Framework', 'Yii Framework', 'Lumen', + 'Phalcon', 'FuelPHP', 'Aura', 'Flight', 'Fat-Free Framework', + 'WordPress', 'Drupal', 'Joomla', 'Magento' + ], + + // === RUBY FRAMEWORKS === + 'Ruby': [ + 'Ruby on Rails', 'Sinatra', 'Hanami', 'Padrino', 'Grape', + 'Roda', 'Cuba', 'Camping', 'Ramaze', 'Merb', 'Volt' + ], + + // === RUST FRAMEWORKS === + 'Rust': [ + 'Actix-web', 'Rocket', 'Warp', 'Tide', 'Axum', 'Tower', + 'Poem', 'Salvo', 'Thruster', 'Gotham', 'Iron', 'Nickel' + ], + + // === KOTLIN FRAMEWORKS === + 'Kotlin': [ + 'Ktor', 'Spring Boot', 'Javalin', 'Vert.x', 'http4k', + 'Kweb', 'TornadoFX', 'Exposed' + ], + + // === SCALA FRAMEWORKS === + 'Scala': [ + 'Play Framework', 'Akka HTTP', 'Finatra', 'Http4s', 'Scalatra', + 'Lift', 'Spray', 'Unfiltered', 'Colossus' + ], + + // === ELIXIR FRAMEWORKS === + 'Elixir': [ + 'Phoenix', 'Phoenix LiveView', 'Plug', 'Cowboy', 'Sugar', + 'Trot', 'Maru', 'Hedwig' + ], + + // === SWIFT FRAMEWORKS === + 'Swift': [ + 'Vapor', 'Perfect', 'Kitura', 'Zewo', 'Swifton', 'Marathon' + ], + + // === DART FRAMEWORKS === + 'Dart': [ + 'Shelf', 'Angel3', 'Aqueduct', 'Jaguar', 'Start', 'Redstone' + ], + + // === DENO FRAMEWORKS === + 'Deno': [ + 'Fresh', 'Oak', 'Aleph.js', 'Servest', 'Pogo', 'Drash' + ] + } + }, + database: { + primary: [ + // === RELATIONAL DATABASES === + 'PostgreSQL', 'PostgreSQL 16', 'PostgreSQL 15', 'PostgreSQL 14', + 'MySQL', 'MySQL 8.0', 'MySQL 5.7', 'MariaDB', 'MariaDB 11', + 'Microsoft SQL Server', 'MS SQL Server 2022', 'MS SQL Server 2019', + 'SQLite', 'SQLite3', 'Oracle Database', 'Oracle 21c', 'Oracle 19c', + 'IBM DB2', 'IBM Db2 LUW', 'SAP HANA', 'Firebird', 'H2 Database', + + // === CLOUD RELATIONAL === + 'Amazon RDS', 'Amazon Aurora', 'Amazon Aurora PostgreSQL', + 'Amazon Aurora MySQL', 'Google Cloud SQL', 'Google Cloud Spanner', + 'Azure SQL Database', 'Azure Database for PostgreSQL', + 'Azure Database for MySQL', 'PlanetScale', 'Neon', 'Supabase', + + // === NOSQL DOCUMENT DATABASES === + 'MongoDB', 'MongoDB Atlas', 'CouchDB', 'Amazon DocumentDB', + 'Azure Cosmos DB', 'Firebase Firestore', 'RavenDB', 'OrientDB', + 'ArangoDB', 'BaseX', 'eXist-db', 'MarkLogic', + + // === KEY-VALUE STORES === + 'Redis', 'Redis Cloud', 'Amazon DynamoDB', 'Azure Table Storage', + 'Riak', 'Berkeley DB', 'LevelDB', 'RocksDB', 'LMDB', + 'Amazon ElastiCache', 'Memcached', 'Hazelcast', + + // === COLUMN-FAMILY DATABASES === + 'Apache Cassandra', 'DataStax Astra', 'HBase', 'Amazon SimpleDB', + 'Google Bigtable', 'Azure Cosmos DB Cassandra API', + + // === GRAPH DATABASES === + 'Neo4j', 'Neo4j Aura', 'Amazon Neptune', 'ArangoDB', 'OrientDB', + 'JanusGraph', 'TigerGraph', 'Azure Cosmos DB Gremlin API', + 'Dgraph', 'FlockDB', 'InfiniteGraph', + + // === TIME SERIES DATABASES === + 'InfluxDB', 'InfluxDB Cloud', 'TimescaleDB', 'Prometheus', + 'Amazon Timestream', 'Google Cloud Bigtable', 'OpenTSDB', + 'Kdb+', 'QuestDB', 'VictoriaMetrics', 'M3DB', + + // === IN-MEMORY DATABASES === + 'Redis', 'Memcached', 'Apache Ignite', 'Hazelcast', 'GridGain', + 'SAP HANA', 'Oracle TimesTen', 'IBM solidDB', 'VoltDB', + + // === NEWSQL DATABASES === + 'CockroachDB', 'TiDB', 'VoltDB', 'NuoDB', 'FoundationDB', + 'Google Spanner', 'Amazon Aurora', 'PingCAP TiDB', + + // === VECTOR DATABASES === + 'Pinecone', 'Weaviate', 'Milvus', 'Qdrant', 'Chroma', + 'Vespa', 'OpenSearch', 'Faiss', 'Annoy', + + // === BLOCKCHAIN DATABASES === + 'BigchainDB', 'Hyperledger Fabric', 'Ethereum', 'IPFS', + + // === EMBEDDED DATABASES === + 'SQLite', 'H2', 'Derby', 'HSQLDB', 'BerkeleyDB', 'LevelDB', + 'RocksDB', 'Realm', 'ObjectBox' + ], + secondary: [ + // === CACHING SOLUTIONS === + 'Redis', 'Redis Cluster', 'Redis Sentinel', 'Memcached', + 'Amazon ElastiCache', 'Azure Cache for Redis', 'Google Memorystore', + 'Hazelcast', 'Apache Ignite', 'Ehcache', 'Caffeine', + + // === SEARCH ENGINES === + 'Elasticsearch', 'Elasticsearch Cloud', 'OpenSearch', 'Apache Solr', + 'Amazon CloudSearch', 'Azure Cognitive Search', 'Algolia', + 'Swiftype', 'Sphinx', 'Whoosh', 'Xapian', 'MeiliSearch', + + // === MESSAGE QUEUES & STREAMING === + 'Apache Kafka', 'Confluent Cloud', 'Amazon Kinesis', 'RabbitMQ', + 'Amazon SQS', 'Amazon SNS', 'Azure Service Bus', 'Google Pub/Sub', + 'Redis Pub/Sub', 'Apache Pulsar', 'NATS', 'ZeroMQ', + 'ActiveMQ', 'IBM MQ', 'Apache RocketMQ', + + // === ANALYTICS & DATA WAREHOUSES === + 'Apache Spark', 'Apache Flink', 'Amazon Redshift', 'Google BigQuery', + 'Azure Synapse Analytics', 'Snowflake', 'Databricks', 'ClickHouse', + 'Apache Druid', 'Apache Pinot', 'Presto', 'Trino', + + // === MONITORING & OBSERVABILITY === + 'Prometheus', 'Grafana', 'InfluxDB', 'TimescaleDB', 'Jaeger', + 'Zipkin', 'OpenTelemetry', 'Datadog', 'New Relic', 'AppDynamics', + + // === FILE STORAGE === + 'Amazon S3', 'Google Cloud Storage', 'Azure Blob Storage', + 'MinIO', 'Ceph', 'GlusterFS', 'HDFS', 'GridFS', + + // === SESSION STORES === + 'Redis', 'Memcached', 'MongoDB', 'DynamoDB', 'Hazelcast', + + // === CONFIGURATION STORES === + 'etcd', 'Consul', 'ZooKeeper', 'AWS Parameter Store', + 'Azure Key Vault', 'HashiCorp Vault', + + // === LOGGING === + 'Elasticsearch + Logstash + Kibana (ELK)', 'Splunk', 'Fluentd', + 'Graylog', 'Loki', 'Amazon CloudWatch Logs' + ] + } + } + + const handleEditToggle = (category: keyof typeof editMode) => { + setEditMode(prev => ({ + ...prev, + [category]: !prev[category] + })) + } + + const handleTechChange = (category: keyof typeof userTechStack, field: string, value: string) => { + setUserTechStack(prev => ({ + ...prev, + [category]: { + ...prev[category], + [field]: value + } + })) + } + + const handleArrayChange = (category: keyof typeof userTechStack, field: string, index: number, value: string) => { + setUserTechStack(prev => { + const newArray = [...(prev[category][field as keyof typeof prev[typeof category]] as string[])] + newArray[index] = value + return { + ...prev, + [category]: { + ...prev[category], + [field]: newArray + } + } + }) + } + + const addArrayItem = (category: keyof typeof userTechStack, field: string) => { + setUserTechStack(prev => ({ + ...prev, + [category]: { + ...prev[category], + [field]: [...(prev[category][field as keyof typeof prev[typeof category]] as string[]), ''] + } + })) + } + + const removeArrayItem = (category: keyof typeof userTechStack, field: string, index: number) => { + setUserTechStack(prev => ({ + ...prev, + [category]: { + ...prev[category], + [field]: (prev[category][field as keyof typeof prev[typeof category]] as string[]).filter((_, i) => i !== index) + } + })) + } + + const handleGenerateArchitecture = () => { + console.log('πŸ—οΈ Moving to Architecture Designer with user-edited tech stack:', userTechStack) + onGenerate(userTechStack) + } + + const functional_requirements = recommendations?.functional_requirements || {} + const claude_recommendations = recommendations?.claude_recommendations || {} + const technology_recommendations = claude_recommendations?.technology_recommendations || {} + + // Debug logging + console.log('πŸ” TechStackSummary - recommendations:', recommendations) + console.log('πŸ” TechStackSummary - completeData:', completeData) + + if (!recommendations) { + return ( +
+
+

No Technology Recommendations Available

+

+ It looks like technology recommendations haven't been generated yet. Please go back to the Business Context step to complete the requirements. +

+
+ + +
+
+
+ ) + } + + return ( +
+ {/* Header */} +
+

πŸ› οΈ Technology Stack Recommendations

+

AI-powered technology recommendations for your project

+
+

+ πŸ’‘ You can customize these recommendations! Click the "Edit" buttons to modify any technology choices before generating your architecture. +

+
+
+ + {/* Functional Requirements Analysis */} + {functional_requirements?.feature_name && ( + + + + 🎯 + Functional Requirements Analysis + + + +
+
+

Core Feature

+
+
{functional_requirements.feature_name}
+

{functional_requirements.description}

+
+
+ +
+

Complexity Level

+
+ + {functional_requirements.complexity_level || 'Medium'} Complexity + +
+
+
+ + {/* Technical Requirements */} + {functional_requirements.technical_requirements && functional_requirements.technical_requirements.length > 0 && ( +
+

Technical Requirements

+
+ {functional_requirements.technical_requirements.map((req: string, index: number) => ( + + {req} + + ))} +
+
+ )} + + {/* Business Logic Rules */} + {functional_requirements.business_logic_rules && functional_requirements.business_logic_rules.length > 0 && ( +
+

Business Logic Rules

+
+ {functional_requirements.business_logic_rules.map((rule: string, index: number) => ( +
+

{rule}

+
+ ))} +
+
+ )} + + {/* All Features */} + {functional_requirements.all_features && functional_requirements.all_features.length > 0 && ( +
+

All Features

+
+ {functional_requirements.all_features.map((feature: string, index: number) => ( + + {feature} + + ))} +
+
+ )} + + + )} + + {/* Technology Recommendations - ENHANCED WITH EDIT FUNCTIONALITY */} + + + + πŸ€– + Technology Stack - Customize Your Choices + + + +
+ {/* Frontend */} +
+
+

+ βš›οΈ + Frontend +

+ +
+ +
+
+

Framework

+ {editMode.frontend ? ( + + ) : ( +
{userTechStack.frontend.framework}
+ )} +
+ + {userTechStack.frontend.libraries && userTechStack.frontend.libraries.length > 0 && ( +
+

Libraries

+ {editMode.frontend ? ( +
+ {userTechStack.frontend.libraries.map((lib, index) => ( +
+ handleArrayChange('frontend', 'libraries', index, e.target.value)} + className="flex-1 bg-white/10 border-blue-500/30 text-white" + placeholder="Library name" + /> + +
+ ))} + +
+ ) : ( +
+ {userTechStack.frontend.libraries.map((lib, index) => ( + + {lib} + + ))} +
+ )} +
+ )} + + {technology_recommendations.frontend?.reasoning && ( +
+

AI Reasoning

+

{technology_recommendations.frontend.reasoning}

+
+ )} +
+
+ + {/* Backend */} +
+
+

+ 🟒 + Backend +

+ +
+ +
+
+

Language

+ {editMode.backend ? ( + + ) : ( +
{userTechStack.backend.language}
+ )} +
+ +
+

Framework

+ {editMode.backend ? ( + + ) : ( +
{userTechStack.backend.framework}
+ )} +
+ + {userTechStack.backend.libraries && userTechStack.backend.libraries.length > 0 && ( +
+

Libraries

+ {editMode.backend ? ( +
+ {userTechStack.backend.libraries.map((lib, index) => ( +
+ handleArrayChange('backend', 'libraries', index, e.target.value)} + className="flex-1 bg-white/10 border-emerald-500/30 text-white" + placeholder="Library name" + /> + +
+ ))} + +
+ ) : ( +
+ {userTechStack.backend.libraries.map((lib, index) => ( + + {lib} + + ))} +
+ )} +
+ )} + + {technology_recommendations.backend?.reasoning && ( +
+

AI Reasoning

+

{technology_recommendations.backend.reasoning}

+
+ )} +
+
+ + {/* Database */} +
+
+

+ πŸ—„οΈ + Database +

+ +
+ +
+
+

Primary

+ {editMode.database ? ( + + ) : ( +
{userTechStack.database.primary}
+ )} +
+ + {userTechStack.database.secondary && userTechStack.database.secondary.length > 0 && ( +
+

Secondary

+ {editMode.database ? ( +
+ {userTechStack.database.secondary.map((db, index) => ( +
+ + +
+ ))} + +
+ ) : ( +
+ {userTechStack.database.secondary.map((db, index) => ( + + {db} + + ))} +
+ )} +
+ )} + + {technology_recommendations.database?.reasoning && ( +
+

AI Reasoning

+

{technology_recommendations.database.reasoning}

+
+ )} +
+
+
+ + {/* User Changes Summary */} +
+

πŸ“ Your Technology Choices

+
+
+

Frontend:

+

{userTechStack.frontend.framework}

+
+
+

Backend:

+

{userTechStack.backend.language} + {userTechStack.backend.framework}

+
+
+

Database:

+

{userTechStack.database.primary}

+
+
+
+ + + + {/* Implementation Strategy */} + {claude_recommendations?.implementation_strategy && ( + + + + πŸ“‹ + Implementation Strategy + + + +
+
+

Architecture Pattern

+
+ {claude_recommendations.implementation_strategy.architecture_pattern} +
+
+
+

Deployment Strategy

+
+ {claude_recommendations.implementation_strategy.deployment_strategy} +
+
+
+ + + )} + + {/* Business Alignment */} + {claude_recommendations?.business_alignment && ( + + + + 🎯 + Business Alignment + + + +
+ {Object.entries(claude_recommendations.business_alignment).map(([key, value]) => ( +
+

+ {key.replace(/_/g, ' ')} +

+

{value as string}

+
+ ))} +
+ + + )} + + {/* Generate Architecture Button */} +
+
+ + +
+

+ AI will design architecture using your customized technology stack +

+
+

+ 🎯 Using: {userTechStack.frontend.framework} + {userTechStack.backend.language} + {userTechStack.database.primary} +

+
+
+
+ ) +} diff --git a/src/config/backend.ts b/src/config/backend.ts index cbf83e8..62e8f87 100644 --- a/src/config/backend.ts +++ b/src/config/backend.ts @@ -1,8 +1,8 @@ // -export const BACKEND_URL = 'https://backend.codenuk.com'; +// export const BACKEND_URL = 'https://backend.codenuk.com'; -// export const BACKEND_URL = 'http://192.168.1.17:8000'; +export const BACKEND_URL = 'http://192.168.1.13:8000'; export const SOCKET_URL = BACKEND_URL;