⚡ Magical Todo List - Hogwarts Task Manager

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_230":231,"_232":233},"routes/_app.x.$handle.$name",{"_100":99,"_32":49,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_36":50,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",6,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","frontend","latestPath","fileId","9da52af2-69f5-482c-bcda-5dc6f97804a6","name","fileType","directory","content","createdAt",["D",1748642446195],"branchVersion","branchId","e5e7eb1c-3da0-11f0-9e6d-76b3cceeab13",{"_30":43,"_32":44,"_33":21,"_35":45,"_36":46,"_38":14,"_39":40,"_24":25},"frontend/index.html","89f4e5e8-3da1-11f0-9c50-76b3cceeab13","index.html","\n\n\n \n \n ⚡ Magical Todo List - Hogwarts Task Manager\n \n \n \n\n\n

\n \n\n",["D",1748642446195],"id","e5e78eb0-3da0-11f0-9e6d-76b3cceeab13","todo-app",["D",1748642170967],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","add95710-0ddb-4dc2-90f2-bdcb16df89be","pinnedFileId","7f64e894-3da1-11f0-abe2-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","39c8580e-ee92-40a4-b9a2-165f574b6ae2","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_47":40,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"isOwned",19,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","diegoivo","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycWNtOXpnaDJrU25hbkZMNW15WjN5MlhldEUifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_36":226,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":227,"_84":228,"_86":229,"_88":25},"tree",[177,179,181,184,185],"files",[177,178,179,180,181,182,183,184,185],"counts",{"_167":66,"_168":139,"_169":139,"_170":171,"_172":173},"contents",[130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":161,"_32":162,"_30":163,"_138":-5,"_39":40,"_38":164,"_140":62,"_36":165,"_13":66,"_33":34,"_35":-5,"_24":25,"_143":-5,"_27":166},{"_47":158,"_32":28,"_30":31,"_138":-5,"_39":40,"_38":14,"_140":62,"_36":159,"_13":66,"_33":34,"_35":-5,"_24":25,"_143":-5,"_27":160},{"_47":152,"_32":153,"_30":154,"_138":-5,"_39":40,"_38":155,"_140":62,"_36":156,"_13":66,"_33":34,"_35":-5,"_24":25,"_143":-5,"_27":157},{"_47":145,"_32":146,"_30":147,"_138":-5,"_39":40,"_38":148,"_140":25,"_36":149,"_13":66,"_33":21,"_35":150,"_24":25,"_143":-5,"_27":151},{"_47":135,"_32":136,"_30":137,"_138":-5,"_39":40,"_38":139,"_140":62,"_36":141,"_13":66,"_33":142,"_35":109,"_24":25,"_143":-5,"_27":144},"e5e9fb28-3da0-11f0-9e6d-76b3cceeab13","main.tsx","e5e9fbaa-3da0-11f0-9e6d-76b3cceeab13","parentId",1,"latest",["D",1748642170979],"script","label",[136],"684325f4-3da1-11f0-895c-76b3cceeab13","README.md","684326bc-3da1-11f0-895c-76b3cceeab13",2,["D",1748642389669],"# Harry Potter Todo App ⚡\n\nA magical todo app themed around Harry Potter, built with Hono backend and React frontend.\n\n## Features\n\n- ⚡ Harry Potter themed interface\n- 🔐 Authentication via LastLogin (Google OAuth)\n- 📝 Create, read, update, delete todos\n- 💾 Data stored in Val Town blob storage\n- 🎨 Responsive design with TailwindCSS\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono app with routes\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React app\n│ │ ├── TodoList.tsx # Todo list component\n│ │ └── TodoForm.tsx # Add todo form\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── README.md\n├── shared/\n│ ├── types.ts # Shared TypeScript types\n│ └── README.md\n└── README.md\n```\n\n## API Routes\n\n- `GET /` - Main app page\n- `GET /api/todos` - Get user's todos\n- `POST /api/todos` - Create new todo\n- `PUT /api/todos/:id` - Update todo\n- `DELETE /api/todos/:id` - Delete todo\n\n## Authentication\n\nUses LastLogin for Google OAuth authentication. User email is passed via `X-LastLogin-Email` header.\n\n## Tech Stack\n\n- **Backend**: Hono.js\n- **Frontend**: React 18.2.0 with TypeScript\n- **Styling**: TailwindCSS\n- **Storage**: Val Town Blob Storage\n- **Auth**: LastLogin (Google OAuth)",[146],"6b4eef9e-3da1-11f0-904a-76b3cceeab13","shared","f5054ab5-e7bd-4c79-b9ee-e4c2ec5f3780",3,["D",1748642394754],[153],"89f4ecbe-3da1-11f0-9c50-76b3cceeab13",["D",1748642446195],[28],"7f64f6f4-3da1-11f0-abe2-76b3cceeab13","backend","172ef69f-f9e9-4620-af6f-022708727157",5,["D",1748642428472],[162],"pulls","branches","forks","envVars",{"_174":66,"_176":66},"connections",{"_174":66,"_175":66},"count","unfilledCount","emptyCount",{"_47":161,"_32":162,"_30":163,"_138":-5,"_39":40,"_38":164,"_140":62,"_36":223,"_13":66,"_33":34,"_35":-5,"_24":25,"_143":-5,"_187":224,"_27":225},{"_47":217,"_32":218,"_30":60,"_138":163,"_39":40,"_38":164,"_140":25,"_36":219,"_13":66,"_33":142,"_35":220,"_24":25,"_143":-5,"_187":221,"_27":222},{"_47":158,"_32":28,"_30":31,"_138":-5,"_39":40,"_38":14,"_140":62,"_36":214,"_13":66,"_33":34,"_35":-5,"_24":25,"_143":-5,"_187":215,"_27":216},{"_47":210,"_32":44,"_30":43,"_138":31,"_39":40,"_38":14,"_140":25,"_36":211,"_13":66,"_33":21,"_35":45,"_24":25,"_143":-5,"_187":212,"_27":213},{"_47":152,"_32":153,"_30":154,"_138":-5,"_39":40,"_38":155,"_140":62,"_36":207,"_13":66,"_33":34,"_35":-5,"_24":25,"_143":-5,"_187":208,"_27":209},{"_47":200,"_32":146,"_30":201,"_138":154,"_39":40,"_38":202,"_140":62,"_36":203,"_13":66,"_33":21,"_35":204,"_24":25,"_143":-5,"_187":205,"_27":206},{"_47":193,"_32":194,"_30":195,"_138":154,"_39":40,"_38":155,"_140":25,"_36":196,"_13":66,"_33":142,"_35":197,"_24":25,"_143":-5,"_187":198,"_27":199},{"_47":145,"_32":146,"_30":147,"_138":-5,"_39":40,"_38":148,"_140":25,"_36":190,"_13":66,"_33":21,"_35":150,"_24":25,"_143":-5,"_187":191,"_27":192},{"_47":135,"_32":136,"_30":137,"_138":-5,"_39":40,"_38":139,"_140":62,"_36":186,"_13":66,"_33":142,"_35":109,"_24":25,"_143":-5,"_187":188,"_27":189},["D",1748642170979],"children",[],[136],["D",1748642389669],[],[146],"6b4ee6ac-3da1-11f0-904a-76b3cceeab13","types.ts","6b4ee756-3da1-11f0-904a-76b3cceeab13",["D",1748642394754],"// Shared types for the Harry Potter Todo App\n\nexport interface Todo {\n id: string;\n text: string;\n completed: boolean;\n house: 'gryffindor' | 'hufflepuff' | 'ravenclaw' | 'slytherin';\n priority: 'low' | 'medium' | 'high';\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface User {\n email: string;\n todos: Todo[];\n}\n\nexport interface CreateTodoRequest {\n text: string;\n house: Todo['house'];\n priority: Todo['priority'];\n}\n\nexport interface UpdateTodoRequest {\n text?: string;\n completed?: boolean;\n house?: Todo['house'];\n priority?: Todo['priority'];\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[153,194],"6d3e98e0-3da1-11f0-8c7e-76b3cceeab13","6d3e9994-3da1-11f0-8c7e-76b3cceeab13",4,["D",1748642398028],"# Shared Code\n\nThis directory contains code that is shared between the frontend and backend:\n\n- `types.ts` - TypeScript interfaces and types used across the application\n\nThese files must be compatible with both browser and server environments.",[],[153,146],["D",1748642394754],[182,183],[153],"89f4e516-3da1-11f0-9c50-76b3cceeab13",["D",1748642446195],[],[28,44],["D",1748642446195],[180],[28],"7f64e7c2-3da1-11f0-abe2-76b3cceeab13","index.ts",["D",1748642428472],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { lastlogin } from \"https://esm.town/v/stevekrouse/lastlogin_safe\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport type { Todo, User, CreateTodoRequest, UpdateTodoRequest, ApiResponse } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static assets\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Helper function to get user data from blob storage\nasync function getUserData(email: string): Promise {\n const userData = await blob.getJSON(`user:${email}`);\n return userData || { email, todos: [] };\n}\n\n// Helper function to save user data to blob storage\nasync function saveUserData(user: User): Promise {\n await blob.setJSON(`user:${user.email}`, user);\n}\n\n// Helper function to generate unique ID\nfunction generateId(): string {\n return Date.now().toString(36) + Math.random().toString(36).substr(2);\n}\n\n// Main page route\napp.get(\"/\", async (c) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data and user info\n const initialData = {\n user: email ? await getUserData(email) : null,\n isAuthenticated: !!email\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API Routes\n\n// Get todos for authenticated user\napp.get(\"/api/todos\", async (c) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n \n if (!email) {\n return c.json({ success: false, error: \"Not authenticated\" }, 401);\n }\n\n try {\n const userData = await getUserData(email);\n return c.json>({ success: true, data: userData.todos });\n } catch (error) {\n return c.json({ success: false, error: \"Failed to fetch todos\" }, 500);\n }\n});\n\n// Create new todo\napp.post(\"/api/todos\", async (c) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n \n if (!email) {\n return c.json({ success: false, error: \"Not authenticated\" }, 401);\n }\n\n try {\n const body = await c.req.json() as CreateTodoRequest;\n const userData = await getUserData(email);\n \n const newTodo: Todo = {\n id: generateId(),\n text: body.text,\n completed: false,\n house: body.house,\n priority: body.priority,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString()\n };\n\n userData.todos.push(newTodo);\n await saveUserData(userData);\n\n return c.json>({ success: true, data: newTodo });\n } catch (error) {\n return c.json({ success: false, error: \"Failed to create todo\" }, 500);\n }\n});\n\n// Update todo\napp.put(\"/api/todos/:id\", async (c) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n const todoId = c.req.param(\"id\");\n \n if (!email) {\n return c.json({ success: false, error: \"Not authenticated\" }, 401);\n }\n\n try {\n const body = await c.req.json() as UpdateTodoRequest;\n const userData = await getUserData(email);\n \n const todoIndex = userData.todos.findIndex(todo => todo.id === todoId);\n if (todoIndex === -1) {\n return c.json({ success: false, error: \"Todo not found\" }, 404);\n }\n\n // Update todo with provided fields\n const updatedTodo = {\n ...userData.todos[todoIndex],\n ...body,\n updatedAt: new Date().toISOString()\n };\n\n userData.todos[todoIndex] = updatedTodo;\n await saveUserData(userData);\n\n return c.json>({ success: true, data: updatedTodo });\n } catch (error) {\n return c.json({ success: false, error: \"Failed to update todo\" }, 500);\n }\n});\n\n// Delete todo\napp.delete(\"/api/todos/:id\", async (c) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n const todoId = c.req.param(\"id\");\n \n if (!email) {\n return c.json({ success: false, error: \"Not authenticated\" }, 401);\n }\n\n try {\n const userData = await getUserData(email);\n \n const todoIndex = userData.todos.findIndex(todo => todo.id === todoId);\n if (todoIndex === -1) {\n return c.json({ success: false, error: \"Todo not found\" }, 404);\n }\n\n userData.todos.splice(todoIndex, 1);\n await saveUserData(userData);\n\n return c.json({ success: true });\n } catch (error) {\n return c.json({ success: false, error: \"Failed to delete todo\" }, 500);\n }\n});\n\n// Wrap with lastlogin and export\nexport default lastlogin(app.fetch);",[],[162,218],["D",1748642428472],[178],[162],["D",1748642170967],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},{"_13":89,"_32":90,"_47":40,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"ctx",{"_82":-5,"_127":263,"_264":265,"_266":267,"_268":25,"_269":25,"_270":25,"_271":62,"_272":-5,"_273":-7,"_274":-7,"_275":66,"_276":25,"_277":25,"_278":-5,"_279":25,"_280":25,"_281":25,"_282":-5},"ENV",{"_234":235,"_236":237,"_238":90,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Diff · v6