/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const techOptions = { frontend: [ { name: "React", icon: "⚛️", explanation: "A popular JavaScript library for building user interfaces", complexity: 3 }, { name: "Vue", icon: "🖖", explanation: "A progressive framework for building user interfaces", complexity: 2 }, { name: "Angular", icon: "🅰️", explanation: "A platform for building web applications", complexity: 4 }, { name: "Svelte", icon: "🔥", explanation: "A radical new approach to building user interfaces", complexity: 2 }, { name: "Next.js", icon: "⏭️", explanation: "A React framework with hybrid static & server rendering", complexity: 3 }, { name: "Tailwind CSS", icon: "🎨", explanation: "A utility-first CSS framework for rapid UI development", complexity: 2 }, ], backend: [ { name: "Node.js", icon: "🟢", explanation: "A JavaScript runtime built on Chrome's V8 JavaScript engine", complexity: 3 }, { name: "Python", icon: "🐍", explanation: "A programming language that lets you work quickly and integrate systems more effectively", complexity: 2 }, { name: "Express", icon: "🚂", explanation: "Fast, unopinionated, minimalist web framework for Node.js", complexity: 2 }, { name: "Django", icon: "🎸", explanation: "A high-level Python Web framework that encourages rapid development", complexity: 3 }, { name: "Ruby on Rails", icon: "🛤️", explanation: "A web-application framework that includes everything needed to create database-backed web applications", complexity: 3 }, { name: "Flask", icon: "🧪", explanation: "A lightweight WSGI web application framework in Python", complexity: 2 }, ], database: [ { name: "PostgreSQL", icon: "🐘", explanation: "A powerful, open source object-relational database system", complexity: 3 }, { name: "MongoDB", icon: "🍃", explanation: "A document-oriented NoSQL database used for high volume data storage", complexity: 2 }, { name: "MySQL", icon: "🐬", explanation: "An open-source relational database management system", complexity: 2 }, { name: "Redis", icon: "🔴", explanation: "An open source, in-memory data structure store, used as a database, cache, and message broker", complexity: 2 }, { name: "SQLite", icon: "🗃️", explanation: "A C-language library that implements a small, fast, self-contained SQL database engine", complexity: 1 }, ], deployment: [ { name: "Docker", icon: "🐳", explanation: "A platform for developing, shipping, and running applications in containers", complexity: 3 }, { name: "AWS", icon: "☁️", explanation: "A comprehensive cloud computing platform provided by Amazon", complexity: 4 }, { name: "Heroku", icon: "🚀", explanation: "A cloud platform that lets companies build, deliver, monitor and scale apps", complexity: 2 }, { name: "Netlify", icon: "🎛️", explanation: "An all-in-one platform for automating modern web projects", complexity: 1 }, { name: "Vercel", icon: "🏁", explanation: "A cloud platform for static sites and Serverless Functions", complexity: 2 }, ], }; function client() { const root = document.getElementById("root"); if (root && typeof React !== 'undefined' && React.useState) { const { useState, useEffect, useRef } = React; function App() { const [step, setStep] = useState(0); const [conversation, setConversation] = useState([]); const [userInput, setUserInput] = useState(""); const [projectRequirements, setProjectRequirements] = useState({}); const [recommendedStack, setRecommendedStack] = useState([]); const canvasRef = useRef(null); const aiResponses = [ "Hello! I'm here to help you build your tech stack. Let's start by understanding your project. What kind of application are you building?", "Great! Now, could you tell me about the main features you want in your application?", "Excellent. How many users do you expect to have initially?", "Understood. Do you have any specific performance requirements or scalability concerns?", "Alright, I think I have a good understanding of your project. Let me recommend a tech stack for you.", ]; useEffect(() => { if (step < aiResponses.length) { setConversation(prev => [...prev, { type: "ai", text: aiResponses[step] }]); } else if (step === aiResponses.length) { recommendTechStack(); } }, [step]); useEffect(() => { if (recommendedStack.length > 0) { drawTechStackVisualization(); } }, [recommendedStack]); const handleUserInput = () => { setConversation(prev => [...prev, { type: "user", text: userInput }]); setProjectRequirements(prev => ({ ...prev, [`requirement${step + 1}`]: userInput })); setUserInput(""); setStep(prev => prev + 1); }; const recommendTechStack = () => { // Simple recommendation logic (can be expanded with more sophisticated algorithms) const stack = []; if (projectRequirements.requirement1.toLowerCase().includes("web")) { stack.push(techOptions.frontend[Math.floor(Math.random() * 3)]); stack.push(techOptions.backend[Math.floor(Math.random() * 3)]); } stack.push(techOptions.database[Math.floor(Math.random() * 3)]); stack.push(techOptions.deployment[Math.floor(Math.random() * 3)]); setRecommendedStack(stack); }; const drawTechStackVisualization = () => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; ctx.clearRect(0, 0, width, height); const centerX = width / 2; const centerY = height / 2; const radius = Math.min(width, height) / 4; recommendedStack.forEach((tech, index) => { const angle = (index / recommendedStack.length) * 2 * Math.PI; const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); ctx.beginPath(); ctx.arc(x, y, 30, 0, 2 * Math.PI); ctx.fillStyle = 'rgba(0, 123, 255, 0.7)'; ctx.fill(); ctx.font = '20px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(tech.icon, x, y); ctx.font = '12px Arial'; ctx.fillStyle = 'black'; ctx.fillText(tech.name, x, y + 45); if (index > 0) { const prevAngle = ((index - 1) / recommendedStack.length) * 2 * Math.PI; const prevX = centerX + radius * Math.cos(prevAngle); const prevY = centerY + radius * Math.sin(prevAngle); ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(x, y); ctx.strokeStyle = 'rgba(0, 123, 255, 0.5)'; ctx.stroke(); } }); }; const generateCode = () => { const frontendTech = recommendedStack.find(tech => techOptions.frontend.some(t => t.name === tech.name)); const backendTech = recommendedStack.find(tech => techOptions.backend.some(t => t.name === tech.name)); let code = "// Project Structure\n\n"; if (frontendTech) { code += `// Frontend (${frontendTech.name})\n`; code += "frontend/\n"; code += " ├── src/\n"; code += " │ ├── components/\n"; code += " │ ├── pages/\n"; code += " │ └── styles/\n"; code += " ├── public/\n"; code += " └── package.json\n\n"; } if (backendTech) { code += `// Backend (${backendTech.name})\n`; code += "backend/\n"; code += " ├── src/\n"; code += " │ ├── controllers/\n"; code += " │ ├── models/\n"; code += " │ ├── routes/\n"; code += " │ └── app.js\n"; code += " └── package.json\n"; } return code; }; return (

🧙‍♂️ AI Tech Stack Wizard

{step < aiResponses.length && (

{conversation.map((message, index) => (

{message.text}

))}

setUserInput(e.target.value)} className="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type your answer..." />

)} {step === aiResponses.length && (

Recommended Tech Stack

{recommendedStack.map((tech) => (

{tech.icon} {tech.name}

{tech.explanation}

Learn more

))}

Tech Stack Visualization

Basic Project Structure

                      {generateCode()}

)}

); } try { createRoot(root).render( ); } catch (error) { console.error("Error rendering React app:", error); root.innerHTML = `

Error Rendering App

An error occurred while trying to render the application. Please try refreshing the page.

${error instanceof Error ? error.message : String(error)}

`; } } else { console.error("Root element not found or React is not properly loaded"); } } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const html = ` AI Tech Stack Wizard

`; return new Response(html, { headers: { "content-type": "text/html" }, }); } export default server;

inventory