\n \n \n Link Shortener\n \n \n

\n \n

\n \n \n

\n );\n}\n\n// Home page component\nfunction HomePage() {\n const [links, setLinks] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n const fetchLinks = async () => {\n try {\n setIsLoading(true);\n const response = await fetch(\"/api/links\");\n \n if (!response.ok) {\n throw new Error(\"Failed to fetch links\");\n }\n \n const data = await response.json();\n setLinks(data.links || []);\n } catch (err) {\n setError(\"Failed to load links. Please try again later.\");\n console.error(err);\n } finally {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n fetchLinks();\n }, []);\n\n const handleLinkCreated = (newLink: Link) => {\n setLinks([newLink, ...links]);\n };\n\n return (\n

\n \n \n {isLoading ? (\n

Loading links...

\n ) : error ? (\n

\n {error}\n

\n ) : (\n \n )}\n

\n );\n}\n\n// Redirect component\nfunction RedirectPage() {\n const { shortId } = useParams<{ shortId: string }>();\n const navigate = useNavigate();\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n const checkLink = async () => {\n try {\n if (!shortId) {\n navigate(\"/not-found\");\n return;\n }\n\n const response = await fetch(`/api/links/${shortId}`);\n \n if (!response.ok) {\n navigate(\"/not-found\");\n return;\n }\n \n // If we get here, the backend should have already redirected us\n // This is just a fallback\n setError(\"Redirect failed. Please try again.\");\n } catch (err) {\n setError(\"Something went wrong. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n checkLink();\n }, [shortId, navigate]);\n\n if (isLoading) {\n return (\n

Redirecting...

\n );\n }\n\n if (error) {\n return (\n

\n {error}\n

\n \n Go to Homepage\n \n

\n );\n }\n\n return null;\n}\n\n// Create the router\nconst router = createBrowserRouter(\n createRoutesFromElements(\n }>\n } />\n } />\n } />\n } />\n \n )\n);\n\n// Main App component\nexport function App() {\n return ;\n}",[],[207,214,221],{"_104":229,"_95":230,"_155":231,"_157":215,"_158":140,"_159":216,"_161":118,"_106":232,"_100":32,"_163":181,"_165":233,"_166":22,"_167":-5,"_168":234,"_98":235},"4ed57a6a-13c4-11f0-b944-569c3dd06744","CreateLink.tsx","4ed57b50-13c4-11f0-b944-569c3dd06744",["D",1744039430553],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Link } from \"../../shared/types.ts\";\n\ninterface CreateLinkProps {\n onLinkCreated: (link: Link) => void;\n}\n\nexport function CreateLink({ onLinkCreated }: CreateLinkProps) {\n const [url, setUrl] = useState(\"\");\n const [customShortId, setCustomShortId] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [showAdvanced, setShowAdvanced] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n \n if (!url) {\n setError(\"Please enter a URL\");\n return;\n }\n \n setIsLoading(true);\n \n try {\n const response = await fetch(\"/api/links\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n originalUrl: url,\n customShortId: customShortId || undefined,\n }),\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.error || \"Failed to create short link\");\n }\n \n if (data.success && data.link) {\n onLinkCreated(data.link);\n setUrl(\"\");\n setCustomShortId(\"\");\n setShowAdvanced(false);\n } else {\n throw new Error(\"Something went wrong\");\n }\n } catch (err) {\n setError(err.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Shorten a URL

\n \n

\n \n URL to shorten\n \n setUrl(e.target.value)}\n placeholder=\"https://example.com/very/long/url\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n />\n

\n \n

\n setShowAdvanced(!showAdvanced)}\n className=\"text-sm text-blue-600 hover:text-blue-800\"\n >\n {showAdvanced ? \"Hide advanced options\" : \"Show advanced options\"}\n \n

\n \n {showAdvanced && (\n

\n \n Custom short ID (optional)\n \n setCustomShortId(e.target.value)}\n placeholder=\"custom-name\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Leave empty to generate a random ID\n

\n )}\n \n {error && (\n

\n {error}\n

\n )}\n \n \n {isLoading ? \"Creating...\" : \"Create Short Link\"}\n \n \n

\n );\n}",[],[207,214,230],{"_104":237,"_95":238,"_155":239,"_157":215,"_158":140,"_159":240,"_161":118,"_106":241,"_100":32,"_163":181,"_165":242,"_166":22,"_167":-5,"_168":243,"_98":244},"57b8d442-13c4-11f0-856e-569c3dd06744","LinkList.tsx","57b8d532-13c4-11f0-856e-569c3dd06744",9,["D",1744039445464],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Link } from \"../../shared/types.ts\";\n\ninterface LinkListProps {\n links: Link[];\n}\n\nexport function LinkList({ links }: LinkListProps) {\n const [copiedId, setCopiedId] = useState(null);\n \n if (links.length === 0) {\n return (\n

No links created yet. Create your first link above!

\n );\n }\n\n const copyToClipboard = async (shortId: string) => {\n const shortUrl = `${window.location.origin}/${shortId}`;\n \n try {\n await navigator.clipboard.writeText(shortUrl);\n setCopiedId(shortId);\n \n // Reset the copied state after 2 seconds\n setTimeout(() => {\n setCopiedId(null);\n }, 2000);\n } catch (err) {\n console.error(\"Failed to copy:\", err);\n }\n };\n\n const formatDate = (timestamp: number) => {\n return new Date(timestamp).toLocaleString();\n };\n\n return (\n

Your Links

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n {links.map((link) => (\n \n \n \n \n \n \n \n ))}\n \n

\n Short URL\n	\n Original URL\n	\n Created\n	\n Clicks\n	\n Actions\n
\n \n {window.location.origin}/{link.shortId}\n \n	\n \n \n {link.originalUrl}\n \n \n	\n {formatDate(link.createdAt)}\n	\n {link.clickCount}\n	\n copyToClipboard(link.shortId)}\n className=\"text-blue-600 hover:text-blue-800\"\n >\n {copiedId === link.shortId ? \"Copied!\" : \"Copy\"}\n \n

\n );\n}",[],[207,214,238],{"_104":246,"_95":247,"_155":248,"_157":215,"_158":140,"_159":249,"_161":118,"_106":250,"_100":32,"_163":181,"_165":251,"_166":22,"_167":-5,"_168":252,"_98":253},"5c2f0578-13c4-11f0-b944-569c3dd06744","NotFound.tsx","5c2f0622-13c4-11f0-b944-569c3dd06744",10,["D",1744039452949],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { Link } from \"https://esm.sh/react-router-dom@7.0.0-rc.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nexport function NotFound() {\n return (\n

404

Link Not Found

\n The short link you're looking for doesn't exist or has been removed.\n

\n \n Go to Homepage\n \n

\n );\n}",[],[207,214,247],[207,214],{"_104":256,"_95":257,"_155":258,"_157":208,"_158":140,"_159":259,"_161":118,"_106":260,"_100":32,"_163":261,"_165":262,"_166":22,"_167":-5,"_168":263,"_98":264},"44f6b78e-13c4-11f0-a419-569c3dd06744","favicon.svg","44f6b860-13c4-11f0-a419-569c3dd06744",7,["D",1744039413996],"file","",[],[207,257],{"_104":266,"_95":267,"_155":268,"_157":208,"_158":140,"_159":209,"_161":118,"_106":269,"_100":32,"_163":261,"_165":270,"_166":22,"_167":-5,"_168":271,"_98":272},"41e3a23c-13c4-11f0-a306-569c3dd06744","index.html","41e3a322-13c4-11f0-a306-569c3dd06744",["D",1744039408833],"\n\n\n \n \n Link Shortener\n \n \n \n \n\n\n

\n \n\n",[],[207,267],{"_104":274,"_95":275,"_155":276,"_157":208,"_158":140,"_159":101,"_161":118,"_106":277,"_100":32,"_163":181,"_165":278,"_166":22,"_167":-5,"_168":279,"_98":280},"6e17a8b2-13c4-11f0-bce8-569c3dd06744","index.tsx","6e17a97a-13c4-11f0-bce8-569c3dd06744",["D",1744039482995],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { StrictMode } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst rootElement = document.getElementById(\"root\");\nif (!rootElement) throw new Error(\"Root element not found\");\n\nconst root = createRoot(rootElement);\nroot.render(\n \n \n \n);",[],[207,275],[207],{"_104":283,"_95":284,"_155":285,"_157":-5,"_158":140,"_159":286,"_161":118,"_106":287,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":288,"_98":297},"3535347e-13c4-11f0-b5ff-569c3dd06744","shared","1e069ae4-6a24-4338-9f02-a86f3a57470b",4,["D",1744039387561],[289],{"_104":290,"_95":291,"_155":292,"_157":285,"_158":140,"_159":286,"_161":118,"_106":293,"_100":32,"_163":181,"_165":294,"_166":22,"_167":-5,"_168":295,"_98":296},"35352cae-13c4-11f0-b5ff-569c3dd06744","types.ts","35352d80-13c4-11f0-b5ff-569c3dd06744",["D",1744039387561],"// Link data structure\nexport interface Link {\n id: number;\n shortId: string;\n originalUrl: string;\n createdAt: number;\n clickCount: number;\n}\n\n// Request to create a new link\nexport interface CreateLinkRequest {\n originalUrl: string;\n customShortId?: string;\n}\n\n// Response for link creation\nexport interface CreateLinkResponse {\n success: boolean;\n link?: Link;\n error?: string;\n}\n\n// Response for getting all links\nexport interface GetLinksResponse {\n links: Link[];\n}",[],[284,291],[284],{"_104":299,"_95":197,"_155":116,"_157":-5,"_158":140,"_159":300,"_161":22,"_106":301,"_100":32,"_163":302,"_165":303,"_166":22,"_167":-5,"_168":304,"_98":305},"e3ca6f7e-13c2-11f0-9f02-569c3dd06744",1,["D",1744038821470],"http","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[],[197],"files",[152,170,176,185,195,205,212,219,228,236,245,255,265,273,282,289,298],"counts",{"_310":32,"_311":300,"_312":32,"_313":32},"pulls","branches","forks","envVars","contents",[],{"_104":274,"_95":275,"_155":276,"_157":208,"_158":140,"_159":101,"_161":118,"_106":317,"_100":32,"_163":181,"_165":278,"_166":22,"_167":-5,"_98":318},["D",1744039482995],[207,275],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":327,"_150":332,"_306":384,"_261":385,"_314":387,"_388":-5,"_389":22,"_390":-5,"_391":-5,"_392":-5,"_393":394},{"_104":105,"_95":96,"_106":328,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":120,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":329,"_135":330,"_138":331,"_149":22},["D",1744038813299],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":120,"_95":43,"_104":140,"_141":105,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[333,348,375,381],{"_104":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":118,"_106":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":334,"_98":347},[335,344],{"_104":171,"_95":172,"_155":173,"_157":156,"_158":140,"_159":160,"_161":118,"_106":174,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":336,"_98":343},[337,340],{"_104":177,"_95":178,"_155":179,"_157":173,"_158":140,"_159":160,"_161":118,"_106":180,"_100":32,"_163":181,"_165":182,"_166":22,"_167":-5,"_168":338,"_98":339},[],[154,172,178],{"_104":186,"_95":187,"_155":188,"_157":173,"_158":140,"_159":189,"_161":118,"_106":190,"_100":32,"_163":181,"_165":191,"_166":22,"_167":-5,"_168":341,"_98":342},[],[154,172,187],[154,172],{"_104":196,"_95":197,"_155":198,"_157":156,"_158":140,"_159":199,"_161":118,"_106":200,"_100":32,"_163":181,"_165":201,"_166":22,"_167":-5,"_168":345,"_98":346},[],[154,197],[154],{"_104":206,"_95":207,"_155":208,"_157":-5,"_158":140,"_159":209,"_161":118,"_106":210,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":349,"_98":374},[350,365,368,371],{"_104":213,"_95":214,"_155":215,"_157":208,"_158":140,"_159":216,"_161":118,"_106":217,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":351,"_98":364},[352,355,358,361],{"_104":220,"_95":221,"_155":222,"_157":215,"_158":140,"_159":223,"_161":118,"_106":224,"_100":32,"_163":181,"_165":225,"_166":22,"_167":-5,"_168":353,"_98":354},[],[207,214,221],{"_104":229,"_95":230,"_155":231,"_157":215,"_158":140,"_159":216,"_161":118,"_106":232,"_100":32,"_163":181,"_165":233,"_166":22,"_167":-5,"_168":356,"_98":357},[],[207,214,230],{"_104":237,"_95":238,"_155":239,"_157":215,"_158":140,"_159":240,"_161":118,"_106":241,"_100":32,"_163":181,"_165":242,"_166":22,"_167":-5,"_168":359,"_98":360},[],[207,214,238],{"_104":246,"_95":247,"_155":248,"_157":215,"_158":140,"_159":249,"_161":118,"_106":250,"_100":32,"_163":181,"_165":251,"_166":22,"_167":-5,"_168":362,"_98":363},[],[207,214,247],[207,214],{"_104":256,"_95":257,"_155":258,"_157":208,"_158":140,"_159":259,"_161":118,"_106":260,"_100":32,"_163":261,"_165":262,"_166":22,"_167":-5,"_168":366,"_98":367},[],[207,257],{"_104":266,"_95":267,"_155":268,"_157":208,"_158":140,"_159":209,"_161":118,"_106":269,"_100":32,"_163":261,"_165":270,"_166":22,"_167":-5,"_168":369,"_98":370},[],[207,267],{"_104":274,"_95":275,"_155":276,"_157":208,"_158":140,"_159":101,"_161":118,"_106":277,"_100":32,"_163":181,"_165":278,"_166":22,"_167":-5,"_168":372,"_98":373},[],[207,275],[207],{"_104":283,"_95":284,"_155":285,"_157":-5,"_158":140,"_159":286,"_161":118,"_106":287,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":376,"_98":380},[377],{"_104":290,"_95":291,"_155":292,"_157":285,"_158":140,"_159":286,"_161":118,"_106":293,"_100":32,"_163":181,"_165":294,"_166":22,"_167":-5,"_168":378,"_98":379},[],[284,291],[284],{"_104":299,"_95":197,"_155":116,"_157":-5,"_158":140,"_159":300,"_161":22,"_106":301,"_100":32,"_163":302,"_165":303,"_166":22,"_167":-5,"_168":382,"_98":383},[],[197],[333,335,337,340,344,348,350,352,355,358,361,365,368,371,375,377,381],{"_104":274,"_95":275,"_155":276,"_157":208,"_158":140,"_159":101,"_161":118,"_106":317,"_100":32,"_163":181,"_165":278,"_166":22,"_167":-5,"_98":386},[207,275],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

loading

wondrousCyanRodent