/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [idea, setIdea] = useState("Spin to get a MicroSaaS idea!"); const [isSpinning, setIsSpinning] = useState(false); async function generateIdea() { setIsSpinning(true); try { const response = await fetch('/generate-idea'); const data = await response.json(); if (data.error) { setIdea(`Error: ${data.error}`); } else { setIdea(data.idea); } } catch (error) { setIdea("Error generating idea: " + error.message); } finally { setIsSpinning(false); } } return (

🎲 MicroSaaS Idea Roulette 💡

🎡

{idea}

View Source

); } const styles = { container: { fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', textAlign: 'center', padding: '20px', backgroundColor: '#f0f4f8', borderRadius: '10px', }, title: { color: '#2c3e50', marginBottom: '20px', }, wheel: { fontSize: '100px', cursor: 'pointer', transition: 'transform 1s', }, button: { backgroundColor: '#3498db', color: 'white', border: 'none', padding: '10px 20px', borderRadius: '5px', cursor: 'pointer', margin: '20px 0', }, ideaBox: { backgroundColor: 'white', border: '1px solid #ddd', borderRadius: '5px', padding: '15px', minHeight: '200px', }, idea: { whiteSpace: 'pre-wrap', textAlign: 'left', }, sourceLink: { color: '#7f8c8d', textDecoration: 'none', fontSize: '12px', marginTop: '10px', display: 'block', } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { // Handle idea generation endpoint if (new URL(request.url).pathname === '/generate-idea') { try { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: `You are a creative startup idea generator. Generate a unique, actionable microSaaS idea that solves a specific problem. Provide the idea in this format: - Name: [Catchy Product Name] - Problem: [Specific pain point] - Solution: [How your microSaaS solves it] - Target Market: [Ideal customer segment] - Unique Angle: [What makes this different]` }, { role: "user", content: "Generate an innovative microSaaS idea that could potentially be built and launched quickly" } ], model: "gpt-4o-mini", max_tokens: 300, }); return new Response(JSON.stringify({ idea: completion.choices[0].message.content || "No idea generated" }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Render main page return new Response(` MicroSaaS Idea Roulette

`, { headers: { "content-type": "text/html", }, }); }

MicroSaasIdeaRoulette