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",[],[194],"05d75804-3d78-11f1-9314-42b51c65c3df","new-file-8905.ts","05d75930-3d78-11f1-9314-42b51c65c3df",25,["D",1776772112845],[],[204],"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",[],[211],"0360bcdc-3d78-11f1-be0d-42b51c65c3df","new-file-1372.ts","0360bdc2-3d78-11f1-be0d-42b51c65c3df",24,["D",1776772108689],[],[220],"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",[],[227],"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",[],[234],["D",1776769396578],[],[18,65],["D",1776769392851],[186],[18],"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",[],[256,248],"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",[],[256,258],"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",[],[256,266],"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",[],[256,282,274],"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",[],[256,282,284],"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",[],[256,282,292],"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",[],[256,282,300],"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",[],[256,282,308],"c9f883f4-3d71-11f1-ad26-42b51c65c3df",13,["D",1776769435421],[177,178,179,180,181],[256,282],"b0963fb4-3d71-11f1-b3d9-42b51c65c3df",4,["D",1776769392829],[176,182,183,184],[256],"b763226c-3d71-11f1-8169-42b51c65c3df","queries.ts","b7632302-3d71-11f1-8169-42b51c65c3df","b03daf16-3d71-11f1-94e7-42b51c65c3df",8,["D",1776769404243],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { BirthdayMessage, CreateMessagePayload } from \"../shared/types.ts\";\n\nexport async function createMessage(payload: CreateMessagePayload): Promise {\n const result = await sqlite.execute({\n sql: \"INSERT INTO birthday_messages (celebrant_name, sender_name, message) VALUES (?, ?, ?)\",\n args: [payload.celebrantName, payload.senderName, payload.message],\n });\n const row = await sqlite.execute({\n sql: \"SELECT * FROM birthday_messages WHERE id = ?\",\n args: [result.lastInsertRowid!],\n });\n const r = row.rows[0] as Record;\n return {\n id: r.id as number,\n celebrantName: r.celebrant_name as string,\n senderName: r.sender_name as string,\n message: r.message as string,\n createdAt: r.created_at as string,\n };\n}\n\nexport async function getMessagesForCelebrant(celebrantName: string): Promise {\n const result = await sqlite.execute({\n sql: \"SELECT * FROM birthday_messages WHERE LOWER(celebrant_name) = LOWER(?) ORDER BY created_at DESC\",\n args: [celebrantName],\n });\n return result.rows.map((r: Record) => ({\n id: r.id as number,\n celebrantName: r.celebrant_name as string,\n senderName: r.sender_name as string,\n message: r.message as string,\n createdAt: r.created_at as string,\n }));\n}\n\nexport async function getAllMessages(): Promise {\n const result = await sqlite.execute(\n \"SELECT * FROM birthday_messages ORDER BY created_at DESC\",\n );\n return result.rows.map((r: Record) => ({\n id: r.id as number,\n celebrantName: r.celebrant_name as string,\n senderName: r.sender_name as string,\n message: r.message as string,\n createdAt: r.created_at as string,\n }));\n}\n\nexport async function getCelebrants(): Promise {\n const result = await sqlite.execute(\n \"SELECT DISTINCT celebrant_name FROM birthday_messages ORDER BY celebrant_name ASC\",\n );\n return result.rows.map((r: Record) => r.celebrant_name as string);\n}\n",[],[334,326],"database","b401837a-3d71-11f1-b900-42b51c65c3df","migrations.ts","b401842e-3d71-11f1-b900-42b51c65c3df",7,["D",1776769398567],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS birthday_messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n celebrant_name TEXT NOT NULL,\n sender_name TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n}\n",[],[334,336],"b03dae62-3d71-11f1-94e7-42b51c65c3df",["D",1776769392245],[173,174],[334],["D",1776769236397],["D",1789500689328],{"_11":12,"_126":71},{"_11":12,"_122":-5,"_70":71,"_31":69,"_123":124,"_125":30},{"_39":113,"_13":16,"_33":36,"_114":75,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":14,"_121":12},"ctx",{"_53":-5,"_145":385,"_386":387,"_388":389,"_390":30,"_391":30,"_392":30,"_393":24,"_394":-5,"_395":-7,"_396":-7,"_397":26,"_398":30,"_399":30,"_400":-5,"_401":30,"_402":30,"_403":30,"_404":-5},"ENV",{"_356":357,"_358":359,"_360":16,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · shared