Happy Birthday! 🎉

🎂 Customize Birthday Card

\n \n

\n Celebrant's Name:\n \n

\n\n

\n Photo URL (optional):\n \n \n Upload to Imgur, Google Drive, or any image host\n \n

\n\n

\n Personal Message:\n \n

\n\n

\n \n \n

\n \n

\n 💡 After previewing, copy the final URL to share!\n

\n\n \n

\n \n

🎈

\n\n \n

\n\n \n \n\n \n

\n $\"Celebrant$ \n

\n 📸
Add a photo above!\n

\n\n \n

Your message will appear here...

\n\n \n \n

\n\n \n\n`;\n\nexport default function(req: Request): Response {\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n","children",[],[209],"05d75804-3d78-11f1-9314-42b51c65c3df","new-file-8905.ts","05d75930-3d78-11f1-9314-42b51c65c3df",25,["D",1776772112845],[],[218],"2191c22e-3d77-11f1-9945-42b51c65c3df","new-file-5776.ts","6f2c7cfa-3d76-11f1-9fd2-42b51c65c3df",22,["D",1776771729861],2,"\n\n\n \n \n Happy Birthday! 🎉\n \n\n\n \n

🎂 Customize Birthday Card

\n \n

\n Celebrant's Name:\n \n

\n\n

\n Photo URL (optional):\n \n \n Upload to Imgur, Google Drive, or any image host\n \n

\n\n

\n Personal Message:\n \n

\n\n

\n \n \n

\n \n

\n 💡 After previewing, copy the final URL to share!\n

\n\n \n

\n \n

🎈

\n\n \n

\n\n \n \n\n \n

\n $\"Celebrant$ \n

\n 📸
Add a photo above!\n

\n\n \n

Your message will appear here...

\n\n \n \n

\n\n \n\n",[],[225],"0360bcdc-3d78-11f1-be0d-42b51c65c3df","new-file-1372.ts","0360bdc2-3d78-11f1-be0d-42b51c65c3df",24,["D",1776772108689],[],[234],"bcb77344-3d71-11f1-a974-42b51c65c3df","main.ts",9,["D",1776769413169],"import { Hono } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport { createMessage, getMessagesForCelebrant, getAllMessages, getCelebrants } from \"./database/queries.ts\";\n\nconst app = new Hono();\n\n// Run migrations on startup\nlet migrated = false;\napp.use(\"*\", async (c, next) => {\n if (!migrated) {\n await runMigrations();\n migrated = true;\n }\n await next();\n});\n\napp.onError((err) => Promise.reject(err));\n\n// API routes\napp.get(\"/api/messages\", async (c) => {\n const celebrant = c.req.query(\"celebrant\");\n const messages = celebrant\n ? await getMessagesForCelebrant(celebrant)\n : await getAllMessages();\n return c.json(messages);\n});\n\napp.get(\"/api/celebrants\", async (c) => {\n const celebrants = await getCelebrants();\n return c.json(celebrants);\n});\n\napp.post(\"/api/messages\", async (c) => {\n const body = await c.req.json();\n if (!body.celebrantName || !body.senderName || !body.message) {\n return c.json({ error: \"All fields are required\" }, 400);\n }\n const msg = await createMessage(body);\n return c.json(msg, 201);\n});\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\n\n// Serve index\napp.get(\"*\", (c) => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;\n",[],[241],"eeb8dae0-3d71-11f1-8429-42b51c65c3df","README.md","eeb8db8a-3d71-11f1-8429-42b51c65c3df",19,["D",1776769497001],"# 🎂 Birthday Wishes\n\nA beautiful website for sending heartfelt birthday messages to celebrants!\n\n## Features\n\n- ✉️ **Send Birthday Wishes** — Write a personalized message for any birthday person\n- 🎊 **Confetti Animation** — Celebrate with confetti when a wish is sent\n- 🎈 **Birthday Wall** — Browse all wishes or filter by celebrant name\n- 📱 **Responsive Design** — Works beautifully on desktop and mobile\n\n## Architecture\n\n```mermaid\ngraph TB\n User[🧑 User] --> Frontend[React SPA]\n Frontend --> Hono[Hono API Server]\n Hono --> SQLite[(SQLite Database)]\n\n subgraph Frontend Components\n App --> MessageForm[Message Form]\n App --> CelebrantPicker[Celebrant Filter]\n App --> MessageList[Message List]\n MessageList --> MessageCard[Message Card]\n App --> Confetti[Confetti Effect]\n end\n```\n\n## Tech Stack\n\n- **Frontend**: React 18 + Twind (Tailwind CSS)\n- **Backend**: Hono on Val Town\n- **Database**: Val Town SQLite\n- **Fonts**: Pacifico (headings) + Inter (body)\n",[],[248],"b2d2c7ca-3d71-11f1-a08b-42b51c65c3df","types.ts","b2d2c8b0-3d71-11f1-a08b-42b51c65c3df","b0a2db70-3d71-11f1-a08b-42b51c65c3df",6,["D",1776769396578],"export interface BirthdayMessage {\n id: number;\n celebrantName: string;\n senderName: string;\n message: string;\n createdAt: string;\n}\n\nexport interface CreateMessagePayload {\n celebrantName: string;\n senderName: string;\n message: string;\n}\n",[],[264,256],"shared","b0a2dac6-3d71-11f1-a08b-42b51c65c3df",5,["D",1776769392851],[201],[264],"c208756e-3d71-11f1-ad26-42b51c65c3df","index.tsx","c208764a-3d71-11f1-ad26-42b51c65c3df","b0964072-3d71-11f1-b3d9-42b51c65c3df",11,["D",1776769422100],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./App.tsx\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[279,271],"frontend","bed5d1c0-3d71-11f1-843d-42b51c65c3df","index.html","bed5d27e-3d71-11f1-843d-42b51c65c3df",10,["D",1776769416739],"\n\n\n \n \n 🎂 Birthday Wishes\n \n \n \n \n \n\n\n

\n \n\n\n",[],[279,281],"c87ccb20-3d71-11f1-94e7-42b51c65c3df","App.tsx","c87ccbc0-3d71-11f1-94e7-42b51c65c3df",12,["D",1776769432929],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { MessageForm } from \"./components/MessageForm.tsx\";\nimport { MessageList } from \"./components/MessageList.tsx\";\nimport { CelebrantPicker } from \"./components/CelebrantPicker.tsx\";\nimport { Confetti } from \"./components/Confetti.tsx\";\nimport type { BirthdayMessage } from \"../shared/types.ts\";\n\nexport function App() {\n const [messages, setMessages] = useState([]);\n const [selectedCelebrant, setSelectedCelebrant] = useState(\"\");\n const [showConfetti, setShowConfetti] = useState(false);\n const [refreshKey, setRefreshKey] = useState(0);\n\n const handleMessageSent = (msg: BirthdayMessage) => {\n setMessages((prev) => [msg, ...prev]);\n setSelectedCelebrant(msg.celebrantName);\n setShowConfetti(true);\n setRefreshKey((k) => k + 1);\n setTimeout(() => setShowConfetti(false), 4000);\n };\n\n return (\n \n {showConfetti && }\n\n {/* Header */}\n

🎂

\n \n Happy Birthday!\n \n

\n Send a warm birthday wish to someone special 🎉🎈\n

\n\n

\n {/* Send a wish form */}\n \n\n {/* Browse wishes */}\n

\n \n Birthday Wall 🎊\n \n \n \n

\n\n {/* Footer */}\n \n \n );\n}\n",[],[279,289],"d7500c98-3d71-11f1-ad26-42b51c65c3df","MessageList.tsx","d7500d74-3d71-11f1-ad26-42b51c65c3df","c9f884a8-3d71-11f1-ad26-42b51c65c3df",15,["D",1776769457802],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { BirthdayMessage } from \"../../shared/types.ts\";\nimport { MessageCard } from \"./MessageCard.tsx\";\n\ninterface Props {\n celebrant: string;\n externalMessages: BirthdayMessage[];\n}\n\nexport function MessageList({ celebrant, externalMessages }: Props) {\n const [messages, setMessages] = useState([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n const fetchMessages = async () => {\n setLoading(true);\n try {\n const url = celebrant\n ? `/api/messages?celebrant=${encodeURIComponent(celebrant)}`\n : \"/api/messages\";\n const res = await fetch(url);\n const data = await res.json();\n setMessages(data);\n } catch {\n setMessages([]);\n } finally {\n setLoading(false);\n }\n };\n fetchMessages();\n }, [celebrant, externalMessages.length]);\n\n if (loading) {\n return (\n

🎈

Loading wishes...

\n );\n }\n\n if (messages.length === 0) {\n return (\n

🎁

\n {celebrant\n ? `No wishes for ${celebrant} yet. Be the first!`\n : \"No wishes yet. Send the first one!\"}\n

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

\n {messages.map((msg) => (\n \n ))}\n

\n );\n}\n",[],[279,305,297],"components","d3ae8042-3d71-11f1-ad26-42b51c65c3df","MessageForm.tsx","d3ae80f6-3d71-11f1-ad26-42b51c65c3df",14,["D",1776769451693],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { BirthdayMessage } from \"../../shared/types.ts\";\n\ninterface Props {\n onMessageSent: (msg: BirthdayMessage) => void;\n}\n\nexport function MessageForm({ onMessageSent }: Props) {\n const [celebrantName, setCelebrantName] = useState(\"\");\n const [senderName, setSenderName] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!celebrantName.trim() || !senderName.trim() || !message.trim()) {\n setError(\"Please fill in all fields!\");\n return;\n }\n setLoading(true);\n setError(\"\");\n try {\n const res = await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n celebrantName: celebrantName.trim(),\n senderName: senderName.trim(),\n message: message.trim(),\n }),\n });\n if (!res.ok) throw new Error(\"Failed to send wish\");\n const msg = await res.json();\n onMessageSent(msg);\n setMessage(\"\");\n setCelebrantName(\"\");\n setSenderName(\"\");\n } catch {\n setError(\"Something went wrong. Please try again!\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n \n \n ✉️ Send a Birthday Wish\n \n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n 🎂 Birthday Person's Name\n \n setCelebrantName(e.target.value)}\n placeholder=\"e.g. Sarah\"\n className=\"w-full border-2 border-pink-200 rounded-xl px-4 py-3 text-gray-700 focus(outline-none border-pink-400) transition-colors\"\n maxLength={100}\n />\n

\n \n 👤 Your Name\n \n setSenderName(e.target.value)}\n placeholder=\"e.g. John\"\n className=\"w-full border-2 border-pink-200 rounded-xl px-4 py-3 text-gray-700 focus(outline-none border-pink-400) transition-colors\"\n maxLength={100}\n />\n

\n\n

\n \n 💌 Your Birthday Message\n \n setMessage(e.target.value)}\n placeholder=\"Write a heartfelt birthday message...\"\n rows={4}\n className=\"w-full border-2 border-pink-200 rounded-xl px-4 py-3 text-gray-700 focus(outline-none border-pink-400) transition-colors resize-none\"\n maxLength={1000}\n />\n

{message.length}/1000

\n\n \n {loading ? \"Sending... 💫\" : \"Send Birthday Wish 🎉\"}\n \n \n );\n}\n",[],[279,305,307],"db994f4e-3d71-11f1-ae40-42b51c65c3df","MessageCard.tsx","db994ff8-3d71-11f1-ae40-42b51c65c3df",16,["D",1776769464996],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { BirthdayMessage } from \"../../shared/types.ts\";\n\nconst emojis = [\"🎂\", \"🎉\", \"🎈\", \"🎁\", \"🥳\", \"🎊\", \"✨\", \"💖\", \"🌟\", \"🍰\"];\n\nfunction getRandomEmoji(id: number) {\n return emojis[id % emojis.length];\n}\n\nfunction timeAgo(dateStr: string): string {\n const now = new Date();\n const date = new Date(dateStr + \"Z\");\n const diffMs = now.getTime() - date.getTime();\n const diffMins = Math.floor(diffMs / 60000);\n if (diffMins < 1) return \"just now\";\n if (diffMins < 60) return `${diffMins}m ago`;\n const diffHrs = Math.floor(diffMins / 60);\n if (diffHrs < 24) return `${diffHrs}h ago`;\n const diffDays = Math.floor(diffHrs / 24);\n if (diffDays < 30) return `${diffDays}d ago`;\n return date.toLocaleDateString();\n}\n\ninterface Props {\n message: BirthdayMessage;\n}\n\nexport function MessageCard({ message }: Props) {\n const emoji = getRandomEmoji(message.id);\n\n return (\n \n

{emoji}

\n \n To: {message.celebrantName}\n \n {timeAgo(message.createdAt)}\n

\n {message.message}\n

\n — From {message.senderName} 💝\n

\n \n );\n}\n",[],[279,305,315],"e26308f6-3d71-11f1-a60a-42b51c65c3df","Confetti.tsx","e26309c8-3d71-11f1-a60a-42b51c65c3df",18,["D",1776769476386],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useMemo } from \"https://esm.sh/react@18.2.0\";\n\nconst CONFETTI_PIECES = 50;\nconst COLORS = [\"#ec4899\", \"#f472b6\", \"#f9a8d4\", \"#fbbf24\", \"#34d399\", \"#60a5fa\", \"#a78bfa\", \"#f87171\"];\n\nexport function Confetti() {\n const pieces = useMemo(() => {\n return Array.from({ length: CONFETTI_PIECES }, (_, i) => ({\n id: i,\n left: Math.random() * 100,\n delay: Math.random() * 2,\n duration: 2 + Math.random() * 2,\n color: COLORS[Math.floor(Math.random() * COLORS.length)],\n size: 6 + Math.random() * 8,\n rotation: Math.random() * 360,\n }));\n }, []);\n\n return (\n

\n \n {pieces.map((p) => (\n 0.5 ? \"50%\" : \"2px\",\n animation: `confetti-fall ${p.duration}s ease-in ${p.delay}s forwards`,\n transform: `rotate(${p.rotation}deg)`,\n }}\n />\n ))}\n

\n );\n}\n",[],[279,305,323],"def9d1d6-3d71-11f1-a60a-42b51c65c3df","CelebrantPicker.tsx","def9d2bc-3d71-11f1-a60a-42b51c65c3df",17,["D",1776769470662],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n selected: string;\n onSelect: (name: string) => void;\n}\n\nexport function CelebrantPicker({ selected, onSelect }: Props) {\n const [celebrants, setCelebrants] = useState([]);\n\n useEffect(() => {\n fetch(\"/api/celebrants\")\n .then((r) => r.json())\n .then(setCelebrants)\n .catch(() => setCelebrants([]));\n }, []);\n\n if (celebrants.length === 0 && !selected) return null;\n\n const allNames = selected && !celebrants.includes(selected)\n ? [selected, ...celebrants]\n : celebrants;\n\n return (\n

\n onSelect(\"\")}\n className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${\n !selected\n ? \"bg-pink-500 text-white shadow-md\"\n : \"bg-white text-pink-500 hover(bg-pink-50)\"\n }`}\n >\n All ✨\n \n {allNames.map((name) => (\n onSelect(name)}\n className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${\n selected === name\n ? \"bg-pink-500 text-white shadow-md\"\n : \"bg-white text-pink-500 hover(bg-pink-50)\"\n }`}\n >\n 🎂 {name}\n \n ))}\n

\n );\n}\n",[],[279,305,331],"c9f883f4-3d71-11f1-ad26-42b51c65c3df",13,["D",1776769435421],[192,193,194,195,196],[279,305],"b0963fb4-3d71-11f1-b3d9-42b51c65c3df",4,["D",1776769392829],[191,197,198,199],[279],["D",1776769404243],[],[18,81],["D",1776769398567],[],[18,66],["D",1776769392245],[188,189],[18],["D",1776769236397],["D",1789500689328],{"_11":12,"_136":72},{"_11":12,"_132":-5,"_71":72,"_31":70,"_133":134,"_135":30},{"_40":123,"_13":16,"_34":37,"_124":85,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":14,"_131":12},"ctx",{"_54":-5,"_155":395,"_396":397,"_398":399,"_400":30,"_401":30,"_402":30,"_403":24,"_404":-5,"_405":-7,"_406":-7,"_407":26,"_408":30,"_409":30,"_410":-5,"_411":30,"_412":30,"_413":30,"_414":-5},"ENV",{"_366":367,"_368":369,"_370":16,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · database