Loading TaskFlow...

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

\n {user ? (\n \n ) : (\n \n )}\n

\n );\n}",[],[231,238,245],{"_107":252,"_100":253,"_151":254,"_153":239,"_154":138,"_155":255,"_157":158,"_109":256,"_104":31,"_160":178,"_162":257,"_163":27,"_164":-5,"_165":258,"_103":259},"327bbf0a-3f39-11f0-b684-76b3cceeab13","Auth.tsx","327bbfbe-3f39-11f0-b684-76b3cceeab13",12,["D",1748817534108],"/** @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 { User, AuthRequest } from \"../../shared/types.ts\";\n\ninterface AuthProps {\n onLogin: (user: User) => void;\n error: string;\n setError: (error: string) => void;\n}\n\nexport default function Auth({ onLogin, error, setError }: AuthProps) {\n const [isLogin, setIsLogin] = useState(true);\n const [loading, setLoading] = useState(false);\n const [formData, setFormData] = useState({\n username: \"\",\n email: \"\",\n password: \"\",\n confirmPassword: \"\"\n });\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n if (error) setError(\"\");\n };\n\n const validateForm = () => {\n if (!formData.username.trim()) {\n setError(\"Username is required\");\n return false;\n }\n \n if (!formData.password) {\n setError(\"Password is required\");\n return false;\n }\n\n if (formData.password.length < 6) {\n setError(\"Password must be at least 6 characters long\");\n return false;\n }\n\n if (!isLogin) {\n if (!formData.email.trim()) {\n setError(\"Email is required\");\n return false;\n }\n \n if (!/\\S+@\\S+\\.\\S+/.test(formData.email)) {\n setError(\"Please enter a valid email address\");\n return false;\n }\n \n if (formData.password !== formData.confirmPassword) {\n setError(\"Passwords do not match\");\n return false;\n }\n }\n\n return true;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!validateForm()) return;\n\n setLoading(true);\n setError(\"\");\n\n try {\n const endpoint = isLogin ? \"/api/auth/login\" : \"/api/auth/register\";\n const requestData: AuthRequest = {\n username: formData.username.trim(),\n password: formData.password\n };\n\n if (!isLogin) {\n requestData.email = formData.email.trim();\n }\n\n const response = await fetch(endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(requestData)\n });\n\n const data = await response.json();\n\n if (data.success && data.user) {\n onLogin(data.user);\n setFormData({\n username: \"\",\n email: \"\",\n password: \"\",\n confirmPassword: \"\"\n });\n } else {\n setError(data.message || \"Authentication failed\");\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n console.error(\"Auth error:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n const toggleMode = () => {\n setIsLogin(!isLogin);\n setError(\"\");\n setFormData({\n username: \"\",\n email: \"\",\n password: \"\",\n confirmPassword: \"\"\n });\n };\n\n return (\n

\n {/* Header */}\n

\n ✅\n

\n {isLogin ? \"Welcome Back!\" : \"Join TaskFlow\"}\n

\n {isLogin \n ? \"Sign in to manage your tasks\" \n : \"Create an account to get started\"\n }\n

\n\n {/* Error Message */}\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n\n {/* Form */}\n

\n {/* Username */}\n

\n \n 👤 Username\n \n \n

\n\n {/* Email (Register only) */}\n {!isLogin && (\n

\n \n 📧 Email\n \n \n

\n )}\n\n {/* Password */}\n

\n \n 🔒 Password\n \n \n

\n\n {/* Confirm Password (Register only) */}\n {!isLogin && (\n

\n \n 🔒 Confirm Password\n \n \n

\n )}\n\n {/* Submit Button */}\n \n {loading ? (\n <>\n

\n Processing...\n \n ) : (\n <>\n {isLogin ? \"🚀 Sign In\" : \"✨ Create Account\"}\n \n )}\n \n \n\n {/* Toggle Mode */}\n

\n {isLogin ? \"Don't have an account?\" : \"Already have an account?\"}\n

\n \n {isLogin ? \"Create Account\" : \"Sign In\"}\n \n

\n\n {/* Features */}\n

\n ✨ What you'll get:\n

\n ✅\n Beautiful task management interface\n

\n 🎯\n Priority-based task organization\n

\n 🔒\n Secure personal task storage\n

\n );\n}",[],[231,238,253],{"_107":261,"_100":262,"_151":263,"_153":239,"_154":138,"_155":264,"_157":158,"_109":265,"_104":31,"_160":178,"_162":266,"_163":27,"_164":-5,"_165":267,"_103":268},"520e824e-3f39-11f0-bc60-76b3cceeab13","TaskManager.tsx","520e8320-3f39-11f0-bc60-76b3cceeab13",13,["D",1748817587077],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { User, Task, TaskRequest } from \"../../shared/types.ts\";\n\ninterface TaskManagerProps {\n user: User;\n onLogout: () => void;\n}\n\nexport default function TaskManager({ user, onLogout }: TaskManagerProps) {\n const [tasks, setTasks] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [success, setSuccess] = useState(\"\");\n const [showForm, setShowForm] = useState(false);\n const [formData, setFormData] = useState({\n title: \"\",\n description: \"\",\n priority: \"medium\" as \"low\" | \"medium\" | \"high\"\n });\n\n useEffect(() => {\n fetchTasks();\n }, []);\n\n const fetchTasks = async () => {\n try {\n const response = await fetch(\"/api/tasks\");\n const data = await response.json();\n \n if (data.success) {\n setTasks(data.data || []);\n } else {\n setError(data.message || \"Failed to fetch tasks\");\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n console.error(\"Fetch tasks error:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n if (error) setError(\"\");\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.title.trim()) {\n setError(\"Task title is required\");\n return;\n }\n\n try {\n const requestData: TaskRequest = {\n title: formData.title.trim(),\n description: formData.description.trim(),\n priority: formData.priority\n };\n\n const response = await fetch(\"/api/tasks\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(requestData)\n });\n\n const data = await response.json();\n\n if (data.success && data.data) {\n setTasks(prev => [data.data, ...prev]);\n setFormData({ title: \"\", description: \"\", priority: \"medium\" });\n setShowForm(false);\n setSuccess(\"Task created successfully! 🎉\");\n setTimeout(() => setSuccess(\"\"), 3000);\n } else {\n setError(data.message || \"Failed to create task\");\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n console.error(\"Create task error:\", err);\n }\n };\n\n const toggleTaskCompletion = async (taskId: number, completed: boolean) => {\n try {\n const response = await fetch(`/api/tasks/${taskId}/complete`, {\n method: \"PATCH\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({ completed })\n });\n\n const data = await response.json();\n\n if (data.success) {\n setTasks(prev => prev.map(task => \n task.id === taskId ? { ...task, completed } : task\n ));\n } else {\n setError(data.message || \"Failed to update task\");\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n console.error(\"Update task error:\", err);\n }\n };\n\n const deleteTask = async (taskId: number) => {\n if (!confirm(\"Are you sure you want to delete this task?\")) {\n return;\n }\n\n try {\n const response = await fetch(`/api/tasks/${taskId}`, {\n method: \"DELETE\"\n });\n\n const data = await response.json();\n\n if (data.success) {\n setTasks(prev => prev.filter(task => task.id !== taskId));\n setSuccess(\"Task deleted successfully! 🗑️\");\n setTimeout(() => setSuccess(\"\"), 3000);\n } else {\n setError(data.message || \"Failed to delete task\");\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n console.error(\"Delete task error:\", err);\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 const getPriorityIcon = (priority: string) => {\n switch (priority) {\n case \"high\": return \"🔴\";\n case \"medium\": return \"🟡\";\n case \"low\": return \"🟢\";\n default: return \"⚪\";\n }\n };\n\n const completedTasks = tasks.filter(task => task.completed);\n const pendingTasks = tasks.filter(task => !task.completed);\n\n return (\n

\n {/* Header */}\n

✅

\n TaskFlow\n

\n 👋 Hello, {user.username}!\n \n

\n\n {/* Main Content */}\n

\n {/* Messages */}\n {error && (\n

\n ⚠️\n {error}\n \n

\n )}\n\n {success && (\n

\n ✅\n {success}\n \n

\n )}\n\n {/* Task Form */}\n

\n ✨ {showForm ? \"Create New Task\" : \"Your Tasks\"}\n

\n setShowForm(!showForm)}\n className={`btn ${showForm ? \"btn-secondary\" : \"btn-primary\"}`}\n >\n {showForm ? \"📋 View Tasks\" : \"➕ Add Task\"}\n \n

\n\n {showForm && (\n \n )}\n

\n\n {/* Task Statistics */}\n {!showForm && (\n

\n 📊\n

Total Tasks

{tasks.length}

\n ⏳\n

Pending

{pendingTasks.length}

\n ✅\n

Completed

{completedTasks.length}

\n )}\n\n {/* Task List */}\n {!showForm && (\n

\n {loading ? (\n

Loading your tasks...

\n ) : tasks.length === 0 ? (\n

📝

No tasks yet!

\n Create your first task to get started with TaskFlow.\n
\n Click the \"Add Task\" button above to begin.\n

\n ) : (\n <>\n {/* Pending Tasks */}\n {pendingTasks.length > 0 && (\n

\n ⏳ Pending Tasks ({pendingTasks.length})\n

\n {pendingTasks.map(task => (\n

{task.title}

\n {task.description && (\n

{task.description}

\n )}\n

\n \n {getPriorityIcon(task.priority)} {task.priority}\n \n \n 📅 {formatDate(task.created_at)}\n \n

\n toggleTaskCompletion(task.id, true)}\n className=\"btn btn-primary btn-sm\"\n title=\"Mark as completed\"\n >\n ✅ Complete\n \n deleteTask(task.id)}\n className=\"btn btn-danger btn-sm\"\n title=\"Delete task\"\n >\n 🗑️ Delete\n \n

\n ))}\n

\n )}\n\n {/* Completed Tasks */}\n {completedTasks.length > 0 && (\n

\n ✅ Completed Tasks ({completedTasks.length})\n

\n {completedTasks.map(task => (\n

{task.title}

\n {task.description && (\n

{task.description}

\n )}\n

\n \n {getPriorityIcon(task.priority)} {task.priority}\n \n \n 📅 {formatDate(task.created_at)}\n \n

\n toggleTaskCompletion(task.id, false)}\n className=\"btn btn-secondary btn-sm\"\n title=\"Mark as pending\"\n >\n ↩️ Undo\n \n deleteTask(task.id)}\n className=\"btn btn-danger btn-sm\"\n title=\"Delete task\"\n >\n 🗑️ Delete\n \n

\n ))}\n

\n )}\n \n )}\n

\n )}\n

\n );\n}",[],[231,238,262],[231,238],{"_107":271,"_100":272,"_151":273,"_153":232,"_154":138,"_155":274,"_157":158,"_109":275,"_104":31,"_160":276,"_162":277,"_163":27,"_164":-5,"_165":278,"_103":279},"16b4d13a-3f39-11f0-93a4-76b3cceeab13","index.html","16b4d1da-3f39-11f0-93a4-76b3cceeab13",9,["D",1748817487506],"file","\n\n\n \n \n TaskFlow - Beautiful Task Manager\n \n \n \n \n \n \n \n \n ✅\">\n \n \n \n \n \n \n \n\n\n

Loading TaskFlow...

\n\n \n\n \n \n\n",[],[231,272],{"_107":281,"_100":282,"_151":283,"_153":232,"_154":138,"_155":284,"_157":158,"_109":285,"_104":31,"_160":178,"_162":286,"_163":27,"_164":-5,"_165":287,"_103":288},"19838816-3f39-11f0-9eff-76b3cceeab13","index.tsx","198388ac-3f39-11f0-9eff-76b3cceeab13",10,["D",1748817492217],"/** @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\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[231,282],{"_107":290,"_100":291,"_151":292,"_153":232,"_154":138,"_155":233,"_157":158,"_109":293,"_104":31,"_160":276,"_162":294,"_163":27,"_164":-5,"_165":295,"_103":296},"0ec3703a-3f39-11f0-8ff7-76b3cceeab13","style.css","0ec370ee-3f39-11f0-8ff7-76b3cceeab13",["D",1748817474179],"/* Custom styles for the Task Manager App */\n\n/* Import creative fonts */\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');\n\n:root {\n --primary-blue: #2563eb;\n --light-blue: #3b82f6;\n --lighter-blue: #60a5fa;\n --primary-green: #16a34a;\n --light-green: #22c55e;\n --lighter-green: #4ade80;\n --danger-red: #dc2626;\n --light-red: #ef4444;\n --lighter-red: #f87171;\n --white: #ffffff;\n --light-gray: #f8fafc;\n --gray: #64748b;\n --dark-gray: #334155;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n min-height: 100vh;\n color: var(--dark-gray);\n}\n\n.app-container {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n/* Header Styles */\n.header {\n background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);\n color: white;\n padding: 1rem 2rem;\n box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2);\n}\n\n.header-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-family: 'Poppins', sans-serif;\n font-size: 1.8rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.logo-icon {\n width: 2rem;\n height: 2rem;\n background: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary-blue);\n}\n\n.user-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.username {\n font-weight: 500;\n}\n\n/* Button Styles */\n.btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 0.75rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.03s ease;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n font-size: 0.875rem;\n}\n\n.btn-primary {\n background: var(--primary-green);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--light-green);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);\n}\n\n.btn-secondary {\n background: var(--primary-blue);\n color: white;\n}\n\n.btn-secondary:hover {\n background: var(--light-blue);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n}\n\n.btn-danger {\n background: var(--danger-red);\n color: white;\n}\n\n.btn-danger:hover {\n background: var(--light-red);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);\n}\n\n.btn-outline {\n background: transparent;\n border: 2px solid var(--primary-blue);\n color: var(--primary-blue);\n}\n\n.btn-outline:hover {\n background: var(--primary-blue);\n color: white;\n}\n\n.btn-sm {\n padding: 0.5rem 1rem;\n font-size: 0.75rem;\n}\n\n/* Form Styles */\n.form-container {\n max-width: 400px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: 1rem;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\n}\n\n.form-title {\n font-family: 'Poppins', sans-serif;\n font-size: 2rem;\n font-weight: 600;\n text-align: center;\n margin-bottom: 2rem;\n color: var(--primary-blue);\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n color: var(--dark-gray);\n}\n\n.form-input {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 2px solid #e2e8f0;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: all 0.03s ease;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--primary-blue);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.form-select {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 2px solid #e2e8f0;\n border-radius: 0.5rem;\n font-size: 1rem;\n background: white;\n transition: all 0.03s ease;\n}\n\n.form-select:focus {\n outline: none;\n border-color: var(--primary-blue);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.form-textarea {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 2px solid #e2e8f0;\n border-radius: 0.5rem;\n font-size: 1rem;\n resize: vertical;\n min-height: 100px;\n transition: all 0.03s ease;\n}\n\n.form-textarea:focus {\n outline: none;\n border-color: var(--primary-blue);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n/* Task Styles */\n.task-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.task-form {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n margin-bottom: 2rem;\n}\n\n.task-form-title {\n font-family: 'Poppins', sans-serif;\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 1.5rem;\n color: var(--primary-blue);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.task-list {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.task-item {\n background: white;\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n border-left: 4px solid var(--primary-blue);\n transition: all 0.03s ease;\n}\n\n.task-item:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n}\n\n.task-item.completed {\n opacity: 0.7;\n border-left-color: var(--primary-green);\n}\n\n.task-header {\n display: flex;\n justify-content: between;\n align-items: flex-start;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n.task-content {\n flex: 1;\n}\n\n.task-title {\n font-family: 'Poppins', sans-serif;\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n color: var(--dark-gray);\n}\n\n.task-title.completed {\n text-decoration: line-through;\n color: var(--gray);\n}\n\n.task-description {\n color: var(--gray);\n margin-bottom: 1rem;\n line-height: 1.5;\n}\n\n.task-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n}\n\n.task-priority {\n padding: 0.25rem 0.75rem;\n border-radius: 1rem;\n font-size: 0.75rem;\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.priority-low {\n background: #dcfce7;\n color: #166534;\n}\n\n.priority-medium {\n background: #fef3c7;\n color: #92400e;\n}\n\n.priority-high {\n background: #fee2e2;\n color: #991b1b;\n}\n\n.task-date {\n font-size: 0.75rem;\n color: var(--gray);\n}\n\n.task-actions {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n}\n\n.checkbox {\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--primary-blue);\n border-radius: 0.25rem;\n cursor: pointer;\n transition: all 0.03s ease;\n}\n\n.checkbox:checked {\n background: var(--primary-green);\n border-color: var(--primary-green);\n}\n\n/* Loading and Error States */\n.loading {\n text-align: center;\n padding: 2rem;\n color: var(--gray);\n}\n\n.error {\n background: #fee2e2;\n color: #991b1b;\n padding: 1rem;\n border-radius: 0.5rem;\n margin-bottom: 1rem;\n border: 1px solid #fecaca;\n}\n\n.success {\n background: #dcfce7;\n color: #166534;\n padding: 1rem;\n border-radius: 0.5rem;\n margin-bottom: 1rem;\n border: 1px solid #bbf7d0;\n}\n\n/* Empty State */\n.empty-state {\n text-align: center;\n padding: 3rem 2rem;\n color: var(--gray);\n}\n\n.empty-state-icon {\n font-size: 4rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n\n.empty-state-title {\n font-family: 'Poppins', sans-serif;\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n}\n\n.empty-state-description {\n font-size: 1rem;\n line-height: 1.5;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .header-content {\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n }\n \n .task-container {\n padding: 1rem;\n }\n \n .form-container {\n margin: 1rem;\n padding: 1.5rem;\n }\n \n .task-header {\n flex-direction: column;\n align-items: stretch;\n }\n \n .task-meta {\n flex-direction: column;\n align-items: stretch;\n }\n \n .task-actions {\n justify-content: center;\n }\n}\n\n/* Animation Classes */\n.fade-in {\n animation: fadeIn 0.3s ease-in;\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.slide-in {\n animation: slideIn 0.3s ease-out;\n}\n\n@keyframes slideIn {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}",[],[231,291],[231],{"_107":299,"_100":300,"_151":301,"_153":-5,"_154":138,"_155":302,"_157":158,"_109":303,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":304,"_103":313},"c10ab2b8-3f38-11f0-b834-76b3cceeab13","shared","0d5b0786-d6be-4160-af33-fd54f5f78092",2,["D",1748817343779],[305],{"_107":306,"_100":307,"_151":308,"_153":301,"_154":138,"_155":302,"_157":158,"_109":309,"_104":31,"_160":178,"_162":310,"_163":27,"_164":-5,"_165":311,"_103":312},"c10a9198-3f38-11f0-b834-76b3cceeab13","types.ts","c10a9256-3f38-11f0-b834-76b3cceeab13",["D",1748817343779],"// Shared types for the task manager app\n\nexport interface User {\n id: number;\n username: string;\n email: string;\n created_at: string;\n}\n\nexport interface Task {\n id: number;\n user_id: number;\n title: string;\n description?: string;\n completed: boolean;\n priority: 'low' | 'medium' | 'high';\n created_at: string;\n updated_at: string;\n}\n\nexport interface AuthRequest {\n username: string;\n email?: string;\n password: string;\n}\n\nexport interface AuthResponse {\n success: boolean;\n message: string;\n user?: User;\n token?: string;\n}\n\nexport interface TaskRequest {\n title: string;\n description?: string;\n priority: 'low' | 'medium' | 'high';\n}\n\nexport interface ApiResponse {\n success: boolean;\n message: string;\n data?: T;\n}",[],[300,307],[300],{"_107":315,"_100":316,"_151":317,"_153":-5,"_154":138,"_155":137,"_157":158,"_109":318,"_104":223,"_160":276,"_162":319,"_163":27,"_164":-5,"_165":320,"_103":321},"65f42764-3f39-11f0-808d-76b3cceeab13","README.md","bd9fbede-3f38-11f0-856c-76b3cceeab13",["D",1748817620458],"# Task Manager App\n\nA beautiful and dynamic task management application with user authentication.\n\n## Features\n\n- User registration and login\n- Add, view, and delete tasks\n- Beautiful UI with blue, white, and green theme\n- Smooth animations and transitions\n- Creative fonts and icons\n- Responsive design\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│ │ ├── auth.ts # Authentication routes\n│ │ └── tasks.ts # Task management routes\n│ └── index.ts # Main backend entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── Auth.tsx # Login/signup forms\n│ │ └── TaskManager.tsx # Task management interface\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```\n\n## Color Theme\n\n- **Blue**: Primary color for headers and accents\n- **White**: Background and text\n- **Green**: Action buttons (add, save, etc.)\n- **Red**: Delete buttons\n- **Light variants**: Hover effects with 0.03s transitions\n\n## Tech Stack\n\n- Backend: Hono + SQLite\n- Frontend: React + TypeScript\n- Styling: TailwindCSS + Custom CSS\n- Icons: Emoji icons for creative appeal\n- Fonts: Google Fonts (Poppins, Inter)\n\n## Features in Detail\n\n### Authentication System\n- User registration with username, email, and password\n- Secure login system with session management\n- Password hashing for security\n- Automatic session validation\n- Beautiful login/signup forms with validation\n\n### Task Management\n- Create tasks with title, description, and priority levels\n- Mark tasks as completed/pending\n- Delete tasks with confirmation\n- Priority system (Low 🟢, Medium 🟡, High 🔴)\n- Task statistics dashboard\n- Real-time updates\n\n### Beautiful UI/UX\n- **Color Theme**: Blue (#2563eb), White (#ffffff), Green (#16a34a), Red (#dc2626)\n- **Hover Effects**: 0.03s transition duration with lighter color variants\n- **Creative Fonts**: Poppins for headings, Inter for body text\n- **Icons**: Emoji-based icons throughout the interface\n- **Animations**: Fade-in and slide-in effects for smooth interactions\n- **Responsive Design**: Mobile-friendly layout\n\n### Technical Features\n- SQLite database with proper schema design\n- RESTful API endpoints\n- Session-based authentication\n- Error handling and user feedback\n- Loading states and empty states\n- Form validation\n- Real-time task updates\n\n## API Endpoints\n\n### Authentication\n- `POST /api/auth/register` - User registration\n- `POST /api/auth/login` - User login\n- `POST /api/auth/logout` - User logout\n- `GET /api/auth/me` - Get current user\n\n### Tasks\n- `GET /api/tasks` - Get user's tasks\n- `POST /api/tasks` - Create new task\n- `PATCH /api/tasks/:id/complete` - Toggle task completion\n- `DELETE /api/tasks/:id` - Delete task\n\n## Getting Started\n\n1. The app is ready to use at the provided URL\n2. Register a new account or login with existing credentials\n3. Start creating and managing your tasks!\n\n## Design Philosophy\n\nThe app follows a modern, clean design with:\n- Intuitive user interface\n- Smooth animations and transitions\n- Clear visual hierarchy\n- Accessible color contrasts\n- Mobile-first responsive design\n- Creative use of emojis for visual appeal",[],[316],"files",[148,167,173,182,192,199,207,217,229,236,243,251,260,270,280,289,298,305,314],"counts",{"_326":31,"_327":223,"_328":31,"_329":31},"pulls","branches","forks","envVars","contents",[332,335,338,341],{"_107":149,"_100":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":158,"_109":333,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":334},["D",1748817351194],[150],{"_107":230,"_100":231,"_151":232,"_153":-5,"_154":138,"_155":233,"_157":158,"_109":336,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":337},["D",1748817474179],[231],{"_107":299,"_100":300,"_151":301,"_153":-5,"_154":138,"_155":302,"_157":158,"_109":339,"_104":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":340},["D",1748817343779],[300],{"_107":315,"_100":316,"_151":317,"_153":-5,"_154":138,"_155":137,"_157":158,"_109":342,"_104":223,"_160":276,"_162":319,"_163":27,"_164":-5,"_103":343},["D",1748817620458],[316],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":350,"_354":355,"_453":31,"_454":27},{"_107":108,"_100":101,"_109":351,"_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":352,"_135":353},["D",1748816984141],{"_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",[356,361,366,371,376,384,389,394,402,409,414,422,427,438,446],{"_151":317,"_104":137,"_109":357,"_154":138,"_322":358},["D",1748817620458],[359],{"_107":315,"_154":138,"_151":317,"_100":316,"_162":319,"_160":276,"_104":223,"_153":-5,"_109":357,"_155":137,"_164":-5,"_157":158,"_163":27,"_103":360},[316],{"_151":220,"_104":221,"_109":362,"_154":138,"_322":363},["D",1748817590440],[364],{"_107":218,"_154":138,"_151":220,"_100":219,"_162":225,"_160":224,"_104":223,"_153":152,"_109":362,"_155":221,"_164":-5,"_157":158,"_163":27,"_103":365},[150,219],{"_151":263,"_104":264,"_109":367,"_154":138,"_322":368},["D",1748817587077],[369],{"_107":261,"_154":138,"_151":263,"_100":262,"_162":266,"_160":178,"_104":31,"_153":239,"_109":367,"_155":264,"_164":-5,"_157":158,"_163":27,"_103":370},[231,238,262],{"_151":254,"_104":255,"_109":372,"_154":138,"_322":373},["D",1748817534108],[374],{"_107":252,"_154":138,"_151":254,"_100":253,"_162":257,"_160":178,"_104":31,"_153":239,"_109":372,"_155":255,"_164":-5,"_157":158,"_163":27,"_103":375},[231,238,253],{"_151":239,"_104":240,"_109":377,"_154":138,"_322":378},["D",1748817503042],[379,381],{"_107":237,"_154":138,"_151":239,"_100":238,"_162":-5,"_160":161,"_104":31,"_153":232,"_109":377,"_155":240,"_164":-5,"_157":158,"_163":27,"_103":380},[231,238],{"_107":244,"_154":138,"_151":246,"_100":245,"_162":248,"_160":178,"_104":31,"_153":239,"_109":382,"_155":240,"_164":-5,"_157":158,"_163":27,"_103":383},["D",1748817503042],[231,238,245],{"_151":283,"_104":284,"_109":385,"_154":138,"_322":386},["D",1748817492217],[387],{"_107":281,"_154":138,"_151":283,"_100":282,"_162":286,"_160":178,"_104":31,"_153":232,"_109":385,"_155":284,"_164":-5,"_157":158,"_163":27,"_103":388},[231,282],{"_151":273,"_104":274,"_109":390,"_154":138,"_322":391},["D",1748817487506],[392],{"_107":271,"_154":138,"_151":273,"_100":272,"_162":277,"_160":276,"_104":31,"_153":232,"_109":390,"_155":274,"_164":-5,"_157":158,"_163":27,"_103":393},[231,272],{"_151":292,"_104":233,"_109":395,"_154":138,"_322":396},["D",1748817474179],[397,399],{"_107":290,"_154":138,"_151":292,"_100":291,"_162":294,"_160":276,"_104":31,"_153":232,"_109":395,"_155":233,"_164":-5,"_157":158,"_163":27,"_103":398},[231,291],{"_107":230,"_154":138,"_151":232,"_100":231,"_162":-5,"_160":161,"_104":31,"_153":-5,"_109":400,"_155":233,"_164":-5,"_157":158,"_163":27,"_103":401},["D",1748817474179],[231],{"_151":220,"_104":403,"_109":404,"_154":138,"_322":405},7,["D",1748817430149],[406],{"_107":407,"_154":138,"_151":220,"_100":219,"_162":225,"_160":178,"_104":31,"_153":152,"_109":404,"_155":403,"_164":-5,"_157":27,"_163":27,"_103":408},"f49284b2-3f38-11f0-a089-76b3cceeab13",[150,219],{"_151":210,"_104":211,"_109":410,"_154":138,"_322":411},["D",1748817413562],[412],{"_107":208,"_154":138,"_151":210,"_100":209,"_162":213,"_160":178,"_104":31,"_153":195,"_109":410,"_155":211,"_164":-5,"_157":158,"_163":27,"_103":413},[150,194,209],{"_151":195,"_104":196,"_109":415,"_154":138,"_322":416},["D",1748817393664],[417,419],{"_107":193,"_154":138,"_151":195,"_100":194,"_162":-5,"_160":161,"_104":31,"_153":152,"_109":415,"_155":196,"_164":-5,"_157":158,"_163":27,"_103":418},[150,194],{"_107":200,"_154":138,"_151":202,"_100":201,"_162":204,"_160":178,"_104":31,"_153":195,"_109":420,"_155":196,"_164":-5,"_157":158,"_163":27,"_103":421},["D",1748817393664],[150,194,201],{"_151":185,"_104":186,"_109":423,"_154":138,"_322":424},["D",1748817368553],[425],{"_107":183,"_154":138,"_151":185,"_100":184,"_162":188,"_160":178,"_104":31,"_153":170,"_109":423,"_155":186,"_164":-5,"_157":158,"_163":27,"_103":426},[150,169,184],{"_151":152,"_104":156,"_109":428,"_154":138,"_322":429},["D",1748817351194],[430,432,435],{"_107":149,"_154":138,"_151":152,"_100":150,"_162":-5,"_160":161,"_104":31,"_153":-5,"_109":428,"_155":156,"_164":-5,"_157":158,"_163":27,"_103":431},[150],{"_107":168,"_154":138,"_151":170,"_100":169,"_162":-5,"_160":161,"_104":31,"_153":152,"_109":433,"_155":156,"_164":-5,"_157":158,"_163":27,"_103":434},["D",1748817351194],[150,169],{"_107":174,"_154":138,"_151":176,"_100":175,"_162":179,"_160":178,"_104":31,"_153":170,"_109":436,"_155":156,"_164":-5,"_157":158,"_163":27,"_103":437},["D",1748817351194],[150,169,175],{"_151":301,"_104":302,"_109":439,"_154":138,"_322":440},["D",1748817343779],[441,443],{"_107":299,"_154":138,"_151":301,"_100":300,"_162":-5,"_160":161,"_104":31,"_153":-5,"_109":439,"_155":302,"_164":-5,"_157":158,"_163":27,"_103":442},[300],{"_107":306,"_154":138,"_151":308,"_100":307,"_162":310,"_160":178,"_104":31,"_153":301,"_109":444,"_155":302,"_164":-5,"_157":158,"_163":27,"_103":445},["D",1748817343779],[300,307],{"_151":317,"_104":223,"_109":447,"_154":138,"_322":448},["D",1748817338050],[449],{"_107":450,"_154":138,"_151":317,"_100":316,"_162":451,"_160":276,"_104":31,"_153":-5,"_109":447,"_155":223,"_164":-5,"_157":27,"_163":27,"_103":452},"bd9fbdf8-3f38-11f0-856c-76b3cceeab13","# Task Manager App\n\nA beautiful and dynamic task management application with user authentication.\n\n## Features\n\n- User registration and login\n- Add, view, and delete tasks\n- Beautiful UI with blue, white, and green theme\n- Smooth animations and transitions\n- Creative fonts and icons\n- Responsive design\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│ │ ├── auth.ts # Authentication routes\n│ │ └── tasks.ts # Task management routes\n│ └── index.ts # Main backend entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── Auth.tsx # Login/signup forms\n│ │ └── TaskManager.tsx # Task management interface\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```\n\n## Color Theme\n\n- **Blue**: Primary color for headers and accents\n- **White**: Background and text\n- **Green**: Action buttons (add, save, etc.)\n- **Red**: Delete buttons\n- **Light variants**: Hover effects with 0.03s transitions\n\n## Tech Stack\n\n- Backend: Hono + SQLite\n- Frontend: React + TypeScript\n- Styling: TailwindCSS + Custom CSS\n- Icons: Lucide React\n- Fonts: Google Fonts (Poppins, Inter)",[316],"page","hasNext","routes/_app","actionData","errors"]

History