[{"_1":2,"_139":-5,"_140":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":59,"_60":41,"_61":62,"_63":59,"_64":41,"_65":41,"_66":41,"_67":59,"_68":59,"_69":17,"_70":17,"_71":72,"_73":74,"_75":76,"_77":78,"_79":80,"_96":-5,"_97":17,"_98":99,"_135":31,"_136":137,"_138":17},"id","8ffba407e903e8ce2131","isMyApp",false,"name","dev.wiki","description","A delightfully retro-modern developer wiki that feels like you're browsing documentation on a 1980s terminal, but with modern web capabilities. Think Wikipedia meets old-school ASCII art, where every page header is adorned with beautiful ASCII borders and each section break is a satisfying line of elegant dashes.","brief","","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/8ffba407e903e8ce2131/6768_6ee3fc13.webp","cdnUrl","https://cdn.dev.fun/app/8ffba407e903e8ce2131/6768","createdAt",["D",1737677509875],"updatedAt",["D",1737864814435],"lastCommitId",["B","6768"],"tier",1,"credits",30,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"5887b41d-9645-4f67-abfc-a079a7fc99f3","uniqueId","buidl","username","solanaWallet","Ane93UM8afSmabY2s8NeB4PBwAGxdyspFsvpCnXHnaEw","displayName","bio","buidl-ing day n nite on dev.fun // \nhttps://x.com/buidldao_","avatar","https://cdn.dev.fun/avatar/5887b41d-9645-4f67-abfc-a079a7fc99f3/f3eae5e9.webp","commitCount",13,"forkCount",0,"likeCount","runsCount",736,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import React, { useState } from 'react';\nimport { Menu, Search } from 'lucide-react';\n\nfunction App() {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [activeSection, setActiveSection] = useState('introduction');\n const [searchTerm, setSearchTerm] = useState('');\n\n const sections = {\n 'introduction': {\n title: 'Introduction',\n content: [\n { type: 'heading', text: 'What is dev.fun?' },\n { type: 'text', text: 'dev.fun is an AI-powered no-code platform.' },\n { type: 'text', text: You describe what you want, and the AI builds it. },\n { type: 'list', items: [\n 'Have a startup idea and need an MVP? Just buidl it.',\n 'Want to work for your bags and create a memeapp? Just buidl it.'\n ]},\n { type: 'heading', text: 'How It Works' },\n { type: 'list', items: [\n Enter a prompt – Example: \"Create a to-do list app with categories.\",\n Get AI-generated results – The platform builds your app.,\n Refine it – Example: \"Add a dark mode toggle.\",\n Test and iterate – Adjust until it works as expected.\n ]}\n ]\n },\n 'getting-started': {\n title: 'Getting Started',\n content: [\n { type: 'heading', text: 'Writing Effective Prompts' },\n { type: 'subheading', text: 'Start Simple, Then Expand' },\n { type: 'text', text: 'Less effective: \"Make a game.\"' },\n { type: 'text', text: 'Better: \"Create flappy bird for cats\"' },\n { type: 'text', text: 'Here\\'s an example of what you can create:' },\n { type: 'iframe', src: 'https://dev.fun/p/3c148d97c53802732714' },\n { type: 'subheading', text: 'Describe Visual & Functional Details' },\n { type: 'text', text: '\"Design a minimalist dashboard with a clean UI and light gray theme.\"' },\n { type: 'text', text: '\"Build a blog with a vintage newspaper aesthetic.\"' }\n ]\n },\n 'external-assets': {\n title: 'External Assets',\n content: [\n { type: 'heading', text: 'Adding Images, Videos & Sounds' },\n { type: 'text', text: 'You can include external assets using direct URLs:' },\n { type: 'list', items: [\n 'Images: \"Use this logo: https://dropbox.com/mylogo.png\"',\n 'Videos: \"Add this video: https://drive.google.com/video123\"',\n 'Audio: \"Play this sound: https://drive.google.com/audio456\"'\n ]},\n { type: 'text', text: 'Make sure your assets are publicly accessible via direct URL!' },\n { type: 'text', text: 'Here\\'s an example app that demonstrates using external assets:' },\n { type: 'iframe', src: 'https://dev.fun/p/66a251fd5d6c28465df6' },\n { type: 'heading', text: 'iFrames & Embeds' },\n { type: 'text', text: 'You can embed external content too:' },\n { type: 'list', items: [\n '\"Embed this YouTube video: https://youtube.com/watch?v=xxx\"',\n '\"Add this tweet: https://twitter.com/user/status/123\"',\n '\"Show this website: https://example.com in a 500x300 frame\"'\n ]},\n { type: 'text', text: 'Check out this example of iframe embedding:' },\n { type: 'iframe', src: 'https://dev.fun/p/46447671cd77222a2972' }\n ]\n },\n 'apis': {\n title: 'Using APIs',\n content: [\n { type: 'heading', text: 'Working with External APIs' },\n { type: 'text', text: 'Simply tell dev.fun which API you want to use in your prompt:' },\n { type: 'list', items: [\n '\"Fetch weather data from api.weather.com/v1/current\"',\n '\"Show crypto prices from api.coingecko.com/v3/simple/price\"',\n '\"Get user data from api.github.com/users/{username}\"'\n ]},\n { type: 'text', text: 'The AI will handle all the integration details for you!' },\n { type: 'text', text: 'Here\\'s a live example of API integration:' },\n { type: 'iframe', src: 'https://dev.fun/p/2e3464b9c16a9a92b1d6' }\n ]\n },\n 'ai-features': {\n title: 'AI Features',\n content: [\n { type: 'heading', text: 'Adding AI Chatbots' },\n { type: 'text', text: 'dev.fun has built-in support for AI chatbots. Just describe what you want:' },\n { type: 'list', items: [\n '\"Add a helpful chatbot that answers questions about my app\"',\n '\"Create a chatbot that speaks like a pirate\"',\n '\"Make an AI assistant that can help users find products\"'\n ]},\n { type: 'text', text: 'The AI will handle all the complex integration - you just focus on the experience!' },\n { type: 'text', text: 'Here\\'s an example of an AI chatbot in action:' },\n { type: 'iframe', src: 'https://dev.fun/p/5fee933a539e78e1762d' }\n ]\n },\n 'multiplayer': {\n title: 'Live & Multiplayer',\n content: [\n { type: 'heading', text: 'Adding Real-Time Features' },\n { type: 'text', text: 'dev.fun makes it easy to create live, interactive experiences:' },\n { type: 'list', items: [\n '\"Create a multiplayer drawing board where users can draw together\"',\n '\"Make a live chat room where messages appear instantly\"',\n '\"Build a real-time quiz game where players compete\"'\n ]},\n { type: 'text', text: 'Behind the scenes, we use WebSocket technology to make everything work smoothly!' },\n { type: 'text', text: 'See an example of multiplayer for live watch parties:' },\n { type: 'iframe', src: 'https://dev.fun/p/98b451f15cc5480de563' }\n ]\n },\n 'debugging': {\n title: 'Debugging & Fixing Errors',\n content: [\n { type: 'heading', text: 'Be Descriptive' },\n { type: 'text', text: 'Instead of saying \"It\\'s broken,\" explain what happens:' },\n { type: 'list', items: [\n '\"Clicking the home button doesn\\'t load the page.\"',\n '\"The login form submits, but users aren\\'t logged in.\"'\n ]},\n { type: 'heading', text: 'Check for Console Errors (Advanced Users)' },\n { type: 'list', items: [\n 'Open Developer Console (F12 or Cmd + Option + I).',\n 'Look for red error messages.',\n 'Paste the error message into dev.fun\\'s prompt.'\n ]}\n ]\n },\n 'coming-soon': {\n title: 'Coming Soon',\n content: [\n { type: 'heading', text: 'Exciting New Features' },\n { type: 'text', text: 'Here\\'s what\\'s coming to dev.fun:' },\n { type: 'list', items: [\n 'Long-term data storage for your apps',\n 'Secure API key management',\n 'Web3 wallet integration',\n 'And many more exciting features!'\n ]},\n { type: 'text', text: 'Stay tuned for updates!' }\n ]\n }\n };\n\n const AsciiHeader = () => (\n

\n      {`\n╔═══════════════════════════════╗\n║           dev.wiki            ║\n║  Developer Guide for dev.fun  ║\n╚═══════════════════════════════╝\n      `.trim()}\n

\n );\n\n const filteredSections = Object.entries(sections).filter(([_, section]) =>\n section.title.toLowerCase().includes(searchTerm.toLowerCase())\n );\n\n const renderContent = (content) => {\n return content.map((item, index) => {\n switch (item.type) {\n case 'heading':\n return (\n

\n                {`\n┌${'─'.repeat(item.text.length + 2)}┐\n│ ${item.text} │\n└${'─'.repeat(item.text.length + 2)}┘\n                `.trim()}\n

\n );\n case 'subheading':\n return

{item.text}

;\n case 'text':\n return

{item.text}

;\n case 'list':\n return (\n

\n •\n {listItem}\n

\n );\n case 'code':\n return (\n

\n              {item.text}\n

\n );\n case 'iframe':\n return (\n

\n \n

\n );\n default:\n return null;\n }\n });\n };\n\n return (\n

\n {/* Mobile Menu Button */}\n setIsMenuOpen(!isMenuOpen)}\n className=\"md:hidden fixed top-4 left-4 z-50 p-2 bg-white border border-gray-200 rounded-md\"\n >\n \n \n\n {/* Sidebar */}\n

\n \n {/* Search Bar */}\n

\n setSearchTerm(e.target.value)}\n className=\"w-full p-2 pl-8 font-mono border border-gray-200 rounded focus:outline-none focus:border-gray-400\"\n />\n \n

\n\n {filteredSections.map(([key, section]) => (\n {\n setActiveSection(key);\n setIsMenuOpen(false);\n }}\n className={`w-full text-left font-mono p-2 rounded hover:bg-gray-100\n ${activeSection === key ? 'bg-gray-100' : ''}\n `}\n >\n {section.title}\n \n ))}\n

\n\n {/* Main Content */}\n

\n \n

\n {renderContent(sections[activeSection].content)}\n

\n );\n}\n\nexport default App;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\"}}","appFunctions",[],"token",{"_18":47,"_81":47,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_71":72},"symbol","price",0.0009477,"marketcap",947739,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","https://buidl.eco/","twitter","https://x.com/buidldao_","devCount",320,"appCount",2183,"upstreamApp","isLordOfDev","analytics",[100,104,106,108,110,112,114,116,118,120,122,124,126,128,130,132,133],{"_101":102,"_103":59},"day","2025-08-13","runCount",{"_101":105,"_103":59},"2025-08-14",{"_101":107,"_103":59},"2025-08-15",{"_101":109,"_103":59},"2025-08-16",{"_101":111,"_103":59},"2025-08-17",{"_101":113,"_103":59},"2025-08-18",{"_101":115,"_103":59},"2025-08-19",{"_101":117,"_103":59},"2025-08-20",{"_101":119,"_103":59},"2025-08-21",{"_101":121,"_103":59},"2025-08-22",{"_101":123,"_103":59},"2025-08-23",{"_101":125,"_103":59},"2025-08-24",{"_101":127,"_103":59},"2025-08-25",{"_101":129,"_103":59},"2025-08-26",{"_101":117,"_103":131},2,{"_101":119,"_103":41},{"_101":134,"_103":41},"2025-08-27","snapshot","ogImage","https://cdn.dev.fun/og/image/8ffba407e903e8ce2131/171298cb.webp","isDevbase","actionData","errors"]

{item.text}

Contents

say something