import React, { useState, useEffect, useRef } from "react"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, database } = useFireproof("puter-apps-v7"); const { docs: apps } = useLiveQuery("type", { key: "app", descending: true }); const { docs: versions } = useLiveQuery("type", { key: "version", descending: true }); const [prompt, setPrompt] = useState(""); const [appName, setAppName] = useState(""); const [appTitle, setAppTitle] = useState(""); const [generating, setGenerating] = useState(false); const [selectedApp, setSelectedApp] = useState(null); const [editCode, setEditCode] = useState(""); const [models, setModels] = useState([]); const [model, setModel] = useState("gpt-4o-mini"); const [provider, setProvider] = useState("All"); const [puter, setPuter] = useState(null); const [user, setUser] = useState(null); const [log, setLog] = useState([]); const [showCode, setShowCode] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [selectedTemplate, setSelectedTemplate] = useState(null); const [showTemplates, setShowTemplates] = useState(false); const [showVersions, setShowVersions] = useState(false); const [selectedApps, setSelectedApps] = useState(new Set()); const [bulkMode, setBulkMode] = useState(false); const [sortBy, setSortBy] = useState("date"); const [filterFavorites, setFilterFavorites] = useState(false); const [showAnalytics, setShowAnalytics] = useState(false); const [showExportModal, setShowExportModal] = useState(false); const [showShareModal, setShowShareModal] = useState(false); const [shareLink, setShareLink] = useState(""); const [activeTab, setActiveTab] = useState("build"); const fileInputRef = useRef(null); const templates = [ { id: "todo", name: "Todo App", icon: "✅", prompt: "A todo app with categories, priorities, due dates, dark/light mode toggle, and local storage persistence" }, { id: "calculator", name: "Calculator", icon: "🔢", prompt: "A scientific calculator with history, memory functions, keyboard support, and a sleek modern UI" }, { id: "notes", name: "Notes App", icon: "📝", prompt: "A notes app with markdown support, folders, search, tags, and auto-save functionality" }, { id: "timer", name: "Pomodoro Timer", icon: "⏱️", prompt: "A pomodoro timer with customizable work/break intervals, statistics, sounds, and notifications" }, { id: "weather", name: "Weather Dashboard", icon: "🌤️", prompt: "A weather dashboard that shows current conditions, 5-day forecast, with animations and location search" }, { id: "kanban", name: "Kanban Board", icon: "📋", prompt: "A kanban board with drag-and-drop cards, multiple columns, labels, and local storage" }, { id: "password", name: "Password Generator", icon: "🔐", prompt: "A password generator with strength meter, customizable options, copy to clipboard, and password history" }, { id: "quiz", name: "Quiz Game", icon: "🎯", prompt: "An interactive quiz game with multiple categories, scoring, timer, and leaderboard" }, { id: "expense", name: "Expense Tracker", icon: "💰", prompt: "An expense tracker with categories, charts, monthly budgets, and export functionality" }, { id: "drawing", name: "Drawing App", icon: "🎨", prompt: "A drawing canvas with brush sizes, colors, shapes, layers, undo/redo, and save as image" }, { id: "music", name: "Music Player", icon: "🎵", prompt: "A music player UI with playlist, progress bar, volume control, shuffle, and visualizer" }, { id: "chat", name: "Chat Interface", icon: "💬", prompt: "A chat interface with message bubbles, typing indicators, timestamps, and emoji picker" }, ]; const addLog = (msg) => setLog(prev => [...prev.slice(-15), `${new Date().toLocaleTimeString()}: ${msg}`]); const displayCode = editCode || selectedApp?.code || ""; const filteredApps = apps .filter(app => { if (filterFavorites && !app.favorite) return false; if (searchQuery) { const q = searchQuery.toLowerCase(); return ( app.appName?.toLowerCase().includes(q) || app.appTitle?.toLowerCase().includes(q) || app.prompt?.toLowerCase().includes(q) ); } return true; }) .sort((a, b) => { if (sortBy === "date") return (b.createdAt || 0) - (a.createdAt || 0); if (sortBy === "name") return (a.appTitle || a.appName || "").localeCompare(b.appTitle || b.appName || ""); if (sortBy === "views") return (b.views || 0) - (a.views || 0); return 0; }); const analytics = { totalApps: apps.length, totalVersions: versions.filter(v => selectedApp && v.appId === selectedApp._id).length, favorites: apps.filter(a => a.favorite).length, totalViews: apps.reduce((sum, a) => sum + (a.views || 0), 0), modelsUsed: [...new Set(apps.map(a => a.model))].length, avgCodeSize: apps.length ? Math.round(apps.reduce((sum, a) => sum + (a.code?.length || 0), 0) / apps.length) : 0 }; useEffect(() => { const script = document.createElement("script"); script.src = "https://js.puter.com/v2/"; script.onload = async () => { setPuter(window.puter); addLog("SDK ready"); if (window.puter.auth.isSignedIn()) { const u = await window.puter.auth.getUser(); setUser(u); addLog(`Welcome ${u.username}`); } }; document.body.appendChild(script); fetch("https://api.puter.com/puterai/chat/models/") .then(r => r.json()) .then(data => { const list = (Array.isArray(data) ? data : data.models || []).map(m => { const id = typeof m === "string" ? m : m.id; let prov = "Other"; if (/gpt|o1|o3|chatgpt/i.test(id)) prov = "OpenAI"; else if (/claude/i.test(id)) prov = "Anthropic"; else if (/gemini|gemma/i.test(id)) prov = "Google"; else if (/llama/i.test(id)) prov = "Meta"; else if (/mistral|mixtral/i.test(id)) prov = "Mistral"; else if (/deepseek/i.test(id)) prov = "DeepSeek"; else if (/grok/i.test(id)) prov = "xAI"; else if (/qwen/i.test(id)) prov = "Alibaba"; return { id, provider: prov }; }); setModels(list); }) .catch(() => {}); }, []); const providers = ["All", ...new Set(models.map(m => m.provider))].sort(); const filtered = provider === "All" ? models : models.filter(m => m.provider === provider); async function signIn() { if (!puter) return; await puter.auth.signIn(); const u = await puter.auth.getUser(); setUser(u); addLog(`Welcome ${u.username}`); } async function buildAndDeploy(customPrompt) { const finalPrompt = customPrompt || prompt; if (!finalPrompt.trim() || !puter || !user) return; setGenerating(true); setSelectedApp(null); setEditCode(""); setLog([]); setShowTemplates(false); try { addLog(`Model: ${model}`); addLog("Generating code..."); const systemPrompt = `You are an expert web developer. Create a COMPLETE single HTML file app. RULES: - Start with - ALL CSS in

⚡ PUTER APP FACTORY

Build & Deploy Puter Apps