[{"_1":2,"_128":-5,"_129":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_127":-5,"_124":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_55":56,"_57":58,"_59":58,"_60":61,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":17,"_68":17,"_69":70,"_71":72,"_73":74,"_75":76,"_90":-5,"_91":17,"_92":93,"_124":30,"_125":126},"id","fd2445566fac53a216b2","isMyApp",false,"name","buidl.templates","description","A minimalist's fever dream of pure ASCII artistry, this template sanctuary lets you fork pre-built prototypes faster than you can say \"monospace\". Like a digital monastery where every pixel is either on or off, no grayscale thoughts allowed - just pure binary beauty and raw creative potential.","brief","","isLive",true,"tags",[28],"💰","cover","https://cdn.dev.fun/snapshot/fd2445566fac53a216b2/14786_e7e0f993.webp","cdnUrl","https://cdn.dev.fun/app/fd2445566fac53a216b2/14786","createdAt",["D",1738637606632],"updatedAt",["D",1738699121497],"lastCommitId",["B","14786"],"tier",1,"credits",15,{"_14":44,"_45":46,"_47":46,"_48":49,"_50":46,"_51":52,"_53":54},"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",11,"forkCount",0,"likeCount","runsCount",32,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import React, { useState, useEffect, useRef } from 'react';\nimport { Terminal, Code2, GitFork, Play } from 'lucide-react';\n\nfunction useIntersectionObserver(options = {}) {\n const [isIntersecting, setIsIntersecting] = useState(false);\n const ref = useRef();\n\n useEffect(() => {\n const observer = new IntersectionObserver(([entry]) => {\n setIsIntersecting(entry.isIntersecting);\n }, options);\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => {\n if (ref.current) {\n observer.unobserve(ref.current);\n }\n };\n }, [ref, options]);\n\n return [ref, isIntersecting];\n}\n\nexport default function App() {\n const templates = [\n {\n id: 1,\n name: \"Landing Page\",\n url: \"54bdf2858b6ee8a1c4b5\",\n ascii: `\n┌─────────────┐\n│ 💬 Chat │\n│ -------- │\n│ > Hello │\n│ > Hi there │\n└─────────────┘`\n },\n {\n id: 2,\n name: \"Meme Maker\",\n url: \"8c44025304f911bc463e\",\n ascii: `\n┌───┬───┬───┐\n│ 1 │ 2 │ 3 │\n├───┼───┼───┤\n│ 4 │ 5 │ 6 │\n└───┴───┴───┘`\n },\n {\n id: 3,\n name: \"DEX\",\n url: \"acd51bc45a6bba6fa94a\",\n ascii: `\n╔════════════╗\n║ [Username] ║\n║ [Password] ║\n║ {Login} ║\n╚════════════╝`\n },\n {\n id: 4,\n name: \"Chart\",\n url: \"c664c727fb7a62f62ddc\",\n ascii: `\n┌─────┐ ┌─────┐\n│ □□□ │ │ ▤▤▤ │\n├─────┤ ├─────┤\n│ ▤▤▤ │ │ □□□ │\n└─────┘ └─────┘`\n },\n {\n id: 5,\n name: \"Gated Chat\",\n url: \"ea93d76dc3d120e4bcb0\",\n ascii: `\n╭───────────╮\n│ [About] │\n│ [Works] │\n│ [Contact] │\n╰───────────╯`\n },\n {\n id: 6,\n name: \"AI Agent\",\n url: \"c55ccfe3418bcb9edafa\",\n ascii: `\n╭───────────╮\n│ [New] │\n│ [Template]│\n│ [Added] │\n╰───────────╯`\n }\n ];\n\n const getPreviewUrl = (url) => `https://dev.fun/p/${url}`;\n const getForkUrl = (url) => `https://dev.fun/app/${url}`;\n\n const PreviewFrame = ({ url }) => {\n const [ref, isIntersecting] = useIntersectionObserver({\n threshold: 0.1,\n rootMargin: '50px',\n });\n const [isLoaded, setIsLoaded] = useState(false);\n\n return (\n

\n {isIntersecting ? (\n setIsLoaded(true)}\n />\n ) : (\n

Loading preview...

\n )}\n {isIntersecting && !isLoaded && (\n

\n )}\n

\n );\n };\n\n return (\n

\n {/* Header */}\n

buidl.templates

Fork. Build. Deploy.

\n \n {/* Updated description section */}\n

\n A collection of starter kits on dev.fun that projects and memecoin community members can fork to buidl out their ecosystem.\n

\n\n {/* Grid */}\n

\n {templates.map((template) => (\n \n \n\n

{template.name}

\n \n \n Try\n \n \n \n Fork\n \n

\n ))}\n

\n\n {/* Footer */}\n \n \n );\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\"}}","token",{"_18":46,"_77":46,"_78":79,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":87,"_88":89,"_69":70},"symbol","price",0.001352,"marketcap",1361574.24,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","twitter","devCount",251,"appCount",1865,"upstreamApp","isLordOfDev","analytics",[94,98,100,102,104,106,108,110,112,114,116,118,120,122],{"_95":96,"_97":58},"day","2025-04-22","runCount",{"_95":99,"_97":58},"2025-04-23",{"_95":101,"_97":58},"2025-04-24",{"_95":103,"_97":58},"2025-04-25",{"_95":105,"_97":58},"2025-04-26",{"_95":107,"_97":58},"2025-04-27",{"_95":109,"_97":58},"2025-04-28",{"_95":111,"_97":58},"2025-04-29",{"_95":113,"_97":58},"2025-04-30",{"_95":115,"_97":58},"2025-05-01",{"_95":117,"_97":58},"2025-05-02",{"_95":119,"_97":58},"2025-05-03",{"_95":121,"_97":58},"2025-05-04",{"_95":123,"_97":58},"2025-05-05","snapshot","ogImage","https://cdn.dev.fun/og/image/fd2445566fac53a216b2/17993c5a.webp","commitDetail","actionData","errors"]