\n 📧 Contact Registration\n

\n Register your email and phone number to stay connected\n

\n\n

\n \n

\n\n

🔒 Your information is stored securely and will not be shared with third parties.

\n );\n}",[],[221,228,235],{"_107":242,"_100":243,"_151":244,"_153":229,"_154":138,"_155":245,"_157":158,"_109":246,"_104":31,"_160":178,"_162":247,"_163":27,"_164":-5,"_165":248,"_103":249},"6b40e58a-3f99-11f0-a8e6-76b3cceeab13","ContactForm.tsx","6b40e63e-3f99-11f0-a8e6-76b3cceeab13",11,["D",1748858861036],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Contact, ContactFormData, ApiResponse } from \"../../shared/types.ts\";\n\ninterface ContactFormProps {\n onContactAdded: (contact: Contact) => void;\n}\n\nexport default function ContactForm({ onContactAdded }: ContactFormProps) {\n const [formData, setFormData] = useState({\n email: '',\n phone: ''\n });\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsSubmitting(true);\n setMessage(null);\n\n try {\n const response = await fetch('/api/contacts', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(formData),\n });\n\n const result: ApiResponse = await response.json();\n\n if (result.success && result.data) {\n setMessage({ type: 'success', text: 'Contact registered successfully!' });\n setFormData({ email: '', phone: '' });\n onContactAdded(result.data);\n } else {\n setMessage({ type: 'error', text: result.error || 'Failed to register contact' });\n }\n } catch (error) {\n setMessage({ type: 'error', text: 'Network error. Please try again.' });\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value\n }));\n };\n\n return (\n

\n ✍️ Register Your Contact\n

\n \n

\n );\n}",[],[221,228,243],{"_107":251,"_100":252,"_151":253,"_153":229,"_154":138,"_155":254,"_157":158,"_109":255,"_104":31,"_160":178,"_162":256,"_163":27,"_164":-5,"_165":257,"_103":258},"7575d8f8-3f99-11f0-8350-76b3cceeab13","ContactList.tsx","7575d9b6-3f99-11f0-8350-76b3cceeab13",12,["D",1748858878163],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Contact, ApiResponse } from \"../../shared/types.ts\";\n\ninterface ContactListProps {\n contacts: Contact[];\n onContactDeleted: (id: number) => void;\n}\n\nexport default function ContactList({ contacts, onContactDeleted }: ContactListProps) {\n const [deletingId, setDeletingId] = useState(null);\n\n const handleDelete = async (id: number) => {\n if (!confirm('Are you sure you want to delete this contact?')) {\n return;\n }\n\n setDeletingId(id);\n\n try {\n const response = await fetch(`/api/contacts/${id}`, {\n method: 'DELETE',\n });\n\n const result: ApiResponse = await response.json();\n\n if (result.success) {\n onContactDeleted(id);\n } else {\n alert(result.error || 'Failed to delete contact');\n }\n } catch (error) {\n alert('Network error. Please try again.');\n } finally {\n setDeletingId(null);\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n };\n\n return (\n

\n 👥 Registered Contacts ({contacts.length})\n

\n\n {contacts.length === 0 ? (\n

📭

No contacts registered yet.

Be the first to register!

\n ) : (\n

\n {contacts.map((contact) => (\n \n

\n 📧\n {contact.email}\n

\n 📱\n {contact.phone}\n

\n {contact.created_at && (\n

\n 🕒\n \n {formatDate(contact.created_at)}\n \n

\n )}\n

\n \n handleDelete(contact.id!)}\n disabled={deletingId === contact.id}\n className=\"btn-danger ml-4 bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center\"\n >\n {deletingId === contact.id ? (\n

\n ) : (\n '🗑️'\n )}\n \n

\n ))}\n

\n )}\n \n );\n}",[],[221,228,252],[221,228],{"_107":261,"_100":262,"_151":263,"_153":222,"_154":138,"_155":223,"_157":158,"_109":264,"_104":31,"_160":265,"_162":266,"_163":27,"_164":-5,"_165":267,"_103":268},"546645ee-3f99-11f0-a6ba-76b3cceeab13","index.html","546646c0-3f99-11f0-a6ba-76b3cceeab13",["D",1748858822688],"file","\n\n\n \n \n Contact Registration\n \n \n \n\n\n

\n \n\n",[],[221,262],{"_107":270,"_100":271,"_151":272,"_153":222,"_154":138,"_155":273,"_157":158,"_109":274,"_104":31,"_160":178,"_162":275,"_163":27,"_164":-5,"_165":276,"_103":277},"5c8ab566-3f99-11f0-8f89-76b3cceeab13","index.tsx","5c8ab674-3f99-11f0-8f89-76b3cceeab13",9,["D",1748858836354],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\n// Get initial data from server-side injection\nconst initialData = (window as any).__INITIAL_DATA__ || { contacts: [] };\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[221,271],{"_107":279,"_100":280,"_151":281,"_153":222,"_154":138,"_155":282,"_157":158,"_109":283,"_104":31,"_160":265,"_162":284,"_163":27,"_164":-5,"_165":285,"_103":286},"598feaac-3f99-11f0-b8bd-76b3cceeab13","style.css","598feb60-3f99-11f0-b8bd-76b3cceeab13",8,["D",1748858831355],"/* Custom styles for the registration app */\n\n.contact-card {\n transition: all 0.2s ease-in-out;\n}\n\n.contact-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.form-input {\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.btn-primary {\n transition: all 0.2s ease-in-out;\n}\n\n.btn-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);\n}\n\n.btn-danger {\n transition: all 0.2s ease-in-out;\n}\n\n.btn-danger:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);\n}\n\n.fade-in {\n animation: fadeIn 0.3s ease-in-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.loading-spinner {\n border: 2px solid #f3f4f6;\n border-top: 2px solid #3b82f6;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}",[],[221,280],[221],{"_107":289,"_100":290,"_151":291,"_153":-5,"_154":138,"_155":292,"_157":158,"_109":293,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":294,"_103":303},"3a704ad6-3f99-11f0-9584-76b3cceeab13","shared","bf6898dd-76a0-4681-9190-bc0ec4f0f0c1",2,["D",1748858779134],[295],{"_107":296,"_100":297,"_151":298,"_153":291,"_154":138,"_155":292,"_157":158,"_109":299,"_104":31,"_160":178,"_162":300,"_163":27,"_164":-5,"_165":301,"_103":302},"3a70437e-3f99-11f0-9584-76b3cceeab13","types.ts","3a704446-3f99-11f0-9584-76b3cceeab13",["D",1748858779134],"// Shared types for the registration app\n\nexport interface Contact {\n id?: number;\n email: string;\n phone: string;\n created_at?: string;\n}\n\nexport interface ContactFormData {\n email: string;\n phone: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[290,297],[290],{"_107":305,"_100":306,"_151":307,"_153":-5,"_154":138,"_155":187,"_157":158,"_109":308,"_104":31,"_160":265,"_162":309,"_163":27,"_164":-5,"_165":310,"_103":311},"383dd918-3f99-11f0-9c10-76b3cceeab13","README.md","383dd9cc-3f99-11f0-9c10-76b3cceeab13",["D",1748858775451],"# Email & Phone Registration App\n\nA simple web application for collecting and managing email addresses and phone numbers.\n\n## Features\n\n- Clean, responsive registration form\n- Email and phone number validation\n- SQLite database storage\n- View all registered contacts\n- Duplicate prevention\n- RESTful API endpoints\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ └── contacts.ts # Contact management routes\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React component\n│ │ ├── ContactForm.tsx # Registration form\n│ │ └── ContactList.tsx # Display registered contacts\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## API Endpoints\n\n- `GET /` - Serve the main application\n- `GET /api/contacts` - Get all registered contacts\n- `POST /api/contacts` - Register a new contact\n- `DELETE /api/contacts/:id` - Delete a contact\n\n## Usage\n\n1. Visit the application URL\n2. Fill in the registration form with email and phone number\n3. Submit to register the contact\n4. View all registered contacts in the list below",[],[306],"files",[148,167,173,182,192,199,208,219,226,233,241,250,260,269,278,288,295,304],"counts",{"_316":31,"_317":187,"_318":31,"_319":31},"pulls","branches","forks","envVars","contents",[322,325,328,331],{"_107":149,"_100":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":158,"_109":323,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":324},["D",1748858784457],[150],{"_107":220,"_100":221,"_151":222,"_153":-5,"_154":138,"_155":223,"_157":158,"_109":326,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":327},["D",1748858822688],[221],{"_107":289,"_100":290,"_151":291,"_153":-5,"_154":138,"_155":292,"_157":158,"_109":329,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":330},["D",1748858779134],[290],{"_107":305,"_100":306,"_151":307,"_153":-5,"_154":138,"_155":187,"_157":158,"_109":332,"_104":31,"_160":265,"_162":309,"_163":27,"_164":-5,"_103":333},["D",1748858775451],[306],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":340,"_344":345,"_439":31,"_440":27},{"_107":108,"_100":101,"_109":341,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":27,"_21":342,"_135":343},["D",1748858723672],{"_98":99,"_133":134},{"_104":137,"_100":42,"_107":138,"_139":108,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},"history",[346,351,356,361,366,374,379,384,392,399,407,415,426,434],{"_151":185,"_104":137,"_109":347,"_154":138,"_312":348},["D",1748859155430],[349],{"_107":183,"_154":138,"_151":185,"_100":184,"_162":188,"_160":178,"_104":187,"_153":170,"_109":347,"_155":137,"_164":-5,"_157":158,"_163":27,"_103":350},[150,169,184],{"_151":211,"_104":212,"_109":352,"_154":138,"_312":353},["D",1748859108367],[354],{"_107":209,"_154":138,"_151":211,"_100":210,"_162":215,"_160":214,"_104":187,"_153":152,"_109":352,"_155":212,"_164":-5,"_157":158,"_163":27,"_103":355},[150,210],{"_151":253,"_104":254,"_109":357,"_154":138,"_312":358},["D",1748858878163],[359],{"_107":251,"_154":138,"_151":253,"_100":252,"_162":256,"_160":178,"_104":31,"_153":229,"_109":357,"_155":254,"_164":-5,"_157":158,"_163":27,"_103":360},[221,228,252],{"_151":244,"_104":245,"_109":362,"_154":138,"_312":363},["D",1748858861036],[364],{"_107":242,"_154":138,"_151":244,"_100":243,"_162":247,"_160":178,"_104":31,"_153":229,"_109":362,"_155":245,"_164":-5,"_157":158,"_163":27,"_103":365},[221,228,243],{"_151":236,"_104":230,"_109":367,"_154":138,"_312":368},["D",1748858844935],[369,371],{"_107":234,"_154":138,"_151":236,"_100":235,"_162":238,"_160":178,"_104":31,"_153":229,"_109":367,"_155":230,"_164":-5,"_157":158,"_163":27,"_103":370},[221,228,235],{"_107":227,"_154":138,"_151":229,"_100":228,"_162":-5,"_160":161,"_104":31,"_153":222,"_109":372,"_155":230,"_164":-5,"_157":158,"_163":27,"_103":373},["D",1748858844935],[221,228],{"_151":272,"_104":273,"_109":375,"_154":138,"_312":376},["D",1748858836354],[377],{"_107":270,"_154":138,"_151":272,"_100":271,"_162":275,"_160":178,"_104":31,"_153":222,"_109":375,"_155":273,"_164":-5,"_157":158,"_163":27,"_103":378},[221,271],{"_151":281,"_104":282,"_109":380,"_154":138,"_312":381},["D",1748858831355],[382],{"_107":279,"_154":138,"_151":281,"_100":280,"_162":284,"_160":265,"_104":31,"_153":222,"_109":380,"_155":282,"_164":-5,"_157":158,"_163":27,"_103":383},[221,280],{"_151":222,"_104":223,"_109":385,"_154":138,"_312":386},["D",1748858822688],[387,389],{"_107":220,"_154":138,"_151":222,"_100":221,"_162":-5,"_160":161,"_104":31,"_153":-5,"_109":385,"_155":223,"_164":-5,"_157":158,"_163":27,"_103":388},[221],{"_107":261,"_154":138,"_151":263,"_100":262,"_162":266,"_160":265,"_104":31,"_153":222,"_109":390,"_155":223,"_164":-5,"_157":158,"_163":27,"_103":391},["D",1748858822688],[221,262],{"_151":211,"_104":393,"_109":394,"_154":138,"_312":395},6,["D",1748858815076],[396],{"_107":397,"_154":138,"_151":211,"_100":210,"_162":215,"_160":178,"_104":31,"_153":152,"_109":394,"_155":393,"_164":-5,"_157":27,"_163":27,"_103":398},"4fdba316-3f99-11f0-8598-76b3cceeab13",[150,210],{"_151":202,"_104":196,"_109":400,"_154":138,"_312":401},["D",1748858805542],[402,404],{"_107":200,"_154":138,"_151":202,"_100":201,"_162":204,"_160":178,"_104":31,"_153":195,"_109":400,"_155":196,"_164":-5,"_157":158,"_163":27,"_103":403},[150,194,201],{"_107":193,"_154":138,"_151":195,"_100":194,"_162":-5,"_160":161,"_104":31,"_153":152,"_109":405,"_155":196,"_164":-5,"_157":158,"_163":27,"_103":406},["D",1748858805542],[150,194],{"_151":185,"_104":408,"_109":409,"_154":138,"_312":410},4,["D",1748858792358],[411],{"_107":412,"_154":138,"_151":185,"_100":184,"_162":413,"_160":178,"_104":31,"_153":170,"_109":409,"_155":408,"_164":-5,"_157":27,"_163":27,"_103":414},"42510a92-3f99-11f0-980b-76b3cceeab13","import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME } from \"./migrations.ts\";\nimport type { Contact, ContactFormData } from \"../../shared/types.ts\";\n\nexport async function getAllContacts(): Promise {\n const result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} ORDER BY created_at DESC`);\n return result.rows as Contact[];\n}\n\nexport async function createContact(contactData: ContactFormData): Promise {\n const { email, phone } = contactData;\n \n // Check if email already exists\n const existingContact = await sqlite.execute(\n `SELECT id FROM ${TABLE_NAME} WHERE email = ?`, \n [email]\n );\n \n if (existingContact.rows.length > 0) {\n throw new Error('Email already registered');\n }\n \n const result = await sqlite.execute(\n `INSERT INTO ${TABLE_NAME} (email, phone) VALUES (?, ?) RETURNING *`,\n [email, phone]\n );\n \n return result.rows[0] as Contact;\n}\n\nexport async function deleteContact(id: number): Promise {\n const result = await sqlite.execute(\n `DELETE FROM ${TABLE_NAME} WHERE id = ?`,\n [id]\n );\n \n return result.changes > 0;\n}\n\nexport async function getContactById(id: number): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} WHERE id = ?`,\n [id]\n );\n \n return result.rows.length > 0 ? result.rows[0] as Contact : null;\n}",[150,169,184],{"_151":170,"_104":156,"_109":416,"_154":138,"_312":417},["D",1748858784457],[418,420,423],{"_107":168,"_154":138,"_151":170,"_100":169,"_162":-5,"_160":161,"_104":31,"_153":152,"_109":416,"_155":156,"_164":-5,"_157":158,"_163":27,"_103":419},[150,169],{"_107":174,"_154":138,"_151":176,"_100":175,"_162":179,"_160":178,"_104":31,"_153":170,"_109":421,"_155":156,"_164":-5,"_157":158,"_163":27,"_103":422},["D",1748858784457],[150,169,175],{"_107":149,"_154":138,"_151":152,"_100":150,"_162":-5,"_160":161,"_104":31,"_153":-5,"_109":424,"_155":156,"_164":-5,"_157":158,"_163":27,"_103":425},["D",1748858784457],[150],{"_151":291,"_104":292,"_109":427,"_154":138,"_312":428},["D",1748858779134],[429,431],{"_107":289,"_154":138,"_151":291,"_100":290,"_162":-5,"_160":161,"_104":31,"_153":-5,"_109":427,"_155":292,"_164":-5,"_157":158,"_163":27,"_103":430},[290],{"_107":296,"_154":138,"_151":298,"_100":297,"_162":300,"_160":178,"_104":31,"_153":291,"_109":432,"_155":292,"_164":-5,"_157":158,"_163":27,"_103":433},["D",1748858779134],[290,297],{"_151":307,"_104":187,"_109":435,"_154":138,"_312":436},["D",1748858775451],[437],{"_107":305,"_154":138,"_151":307,"_100":306,"_162":309,"_160":265,"_104":31,"_153":-5,"_109":435,"_155":187,"_164":-5,"_157":158,"_163":27,"_103":438},[306],"page","hasNext","routes/_app","actionData","errors"]

History