{habit.icon}

{habit.name}

\n {habit.description && (\n

{habit.description}

\n )}\n

\n onToggle(habit.id, today, isCompletedToday)}\n className={`w-8 h-8 rounded-full border-2 border-white flex items-center justify-center transition-all ${\n isCompletedToday ? 'bg-white' : 'bg-transparent'\n }`}\n >\n {isCompletedToday && ✓}\n \n

\n\n

\n {generateGrid()}\n

\n\n

\n {completions.length} completions\n

\n \n );\n}\n\nfunction NewHabitModal({ isOpen, onClose, onSubmit }: {\n isOpen: boolean;\n onClose: () => void;\n onSubmit: (habit: Partial) => void;\n}) {\n const [name, setName] = React.useState(\"\");\n const [description, setDescription] = React.useState(\"\");\n const [color, setColor] = React.useState(\"#FF6B35\");\n const [icon, setIcon] = React.useState(\"🏃\");\n\n const colors = [\n \"#FF6B35\", \"#F7931E\", \"#FDC830\", \"#4ECDC4\",\n \"#45B7D1\", \"#5B5EA6\", \"#9B59B6\", \"#E91E63\"\n ];\n\n const icons = [\n \"🏃\", \"🧘\", \"📚\", \"💧\", \"🎸\", \"🎨\", \"✍️\", \"🏋️\",\n \"🥗\", \"😴\", \"🎯\", \"📝\", \"💻\", \"🎵\", \"🚶\", \"🧩\"\n ];\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim()) return;\n\n onSubmit({ name, description, color, icon });\n setName(\"\");\n setDescription(\"\");\n setColor(\"#FF6B35\");\n setIcon(\"🏃\");\n onClose();\n };\n\n if (!isOpen) return null;\n\n return (\n

e.stopPropagation()}>\n

Create New Habit

\n Habit Name\n setName(e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 focus:border-blue-500 focus:outline-none\"\n placeholder=\"Morning Exercise\"\n required\n />\n

\n\n

\n Description (optional)\n setDescription(e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 focus:border-blue-500 focus:outline-none\"\n placeholder=\"Daily mindfulness practice\"\n />\n

\n\n

\n Choose Icon\n

\n {icons.map((i) => (\n setIcon(i)}\n className={`text-2xl p-2 rounded-lg transition-all ${\n icon === i ? 'bg-gray-600 scale-110' : 'bg-gray-700 hover:bg-gray-600'\n }`}\n >\n {i}\n \n ))}\n

\n\n

\n Choose Color\n

\n {colors.map((c) => (\n setColor(c)}\n className={`w-10 h-10 rounded-lg transition-all ${\n color === c ? 'ring-2 ring-white ring-offset-2 ring-offset-gray-800' : ''\n }`}\n style={{ backgroundColor: c }}\n />\n ))}\n

\n\n

\n \n Cancel\n \n \n Create Habit\n \n

\n );\n}\n\nfunction Home() {\n const data = useLoaderData() as { habits: Habit[], completions: Record };\n const revalidator = useRevalidator();\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n const [habits, setHabits] = React.useState(data.habits);\n const [completions, setCompletions] = React.useState(data.completions);\n\n React.useEffect(() => {\n setHabits(data.habits);\n setCompletions(data.completions);\n }, [data]);\n\n const handleToggleHabit = async (habitId: number, date: string, isCompleted: boolean) => {\n try {\n const apiUrl = getApiUrl();\n\n if (isCompleted) {\n await fetch(`${apiUrl}/api/habits/${habitId}/complete?date=${date}`, {\n method: \"DELETE\",\n });\n } else {\n await fetch(`${apiUrl}/api/habits/${habitId}/complete`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ date }),\n });\n }\n\n revalidator.revalidate();\n } catch (error) {\n console.error(\"Failed to toggle habit:\", error);\n }\n };\n\n const handleCreateHabit = async (habit: Partial) => {\n try {\n const apiUrl = getApiUrl();\n await fetch(`${apiUrl}/api/habits`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(habit),\n });\n\n revalidator.revalidate();\n } catch (error) {\n console.error(\"Failed to create habit:\", error);\n }\n };\n\n return (\n \n

\n HabitBox\n

\n \n \n

\n\n

\n {habits.map((habit) => (\n \n ))}\n

\n\n setIsModalOpen(true)}\n className=\"fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center text-3xl shadow-lg transition-all hover:scale-110\"\n >\n +\n \n

\n\n setIsModalOpen(false)}\n onSubmit={handleCreateHabit}\n />\n

\n \n );\n}\n\nasync function habitsLoader({ request }: { request: Request }) {\n try {\n const url = new URL(request.url);\n const apiUrl = url.origin;\n\n const habits = await fetch(`${apiUrl}/api/habits`).then((res) => res.json()) as Habit[];\n\n const completions: Record = {};\n\n await Promise.all(\n habits.map(async (habit) => {\n const habitCompletions = await fetch(`${apiUrl}/api/habits/${habit.id}/completions`)\n .then((res) => res.json());\n completions[habit.id] = habitCompletions;\n })\n );\n\n return { habits, completions };\n } catch (error) {\n console.error(\"Failed to load habits:\", error);\n return { habits: [], completions: {} };\n }\n}\n\nexport const routes = [\n {\n Component: Home,\n index: true,\n loader: habitsLoader,\n },\n];\n\nexport default routes;",[106],"04083e054a8651327639d64faaeb2d2cf32e82e6eaf40ddc48bca57e4743ff9d","2356ce6a-6276-11f0-8e20-0224a6c84d84","9bfb0133-e2c8-42fb-a214-94d8dc039ec6",32,["D",1752691998693],10,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { useLoaderData, Link, Outlet } from \"https://esm.sh/react-router@7\";\n\n// provide the full URL so that both the client and server can fetch\nconst API_URL = \"https://react-router-hono.val.run/api\";\n\nfunction HTML ({ children }: {\n children: React.ReactNode;\n}) {\n return (\n \n \n React Router Hono Starter\n \n \n {children}\n \n \n )\n}\n\nfunction Layout () {\n return (\n \n

React Router Hono Starter

\n \n

\n \n \n

\n \n );\n}\n\nfunction Home () {\n const [count, setCount] = React.useState(0);\n return (\n

Hello, Home page

{count}

\n \n

\n );\n}\n\nfunction About () {\n const data = useLoaderData();\n \n return (\n

Hello, About page

{JSON.stringify(data, null, 2)}

\n )\n}\n\nasync function catsLoader () {\n const data = await fetch(API_URL)\n .then(res => res.json());\n return data;\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n },\n {\n Component: About,\n path: \"about\",\n loader: catsLoader,\n },\n ]\n },\n]\n\nexport default routes;",[106],"124204645915c0a4c98fbdace23266c8b61ed2eced3f989a41444fc39876acfd","README.md",{"_32":135,"_13":125,"_80":136,"_82":-5,"_83":33,"_84":137,"_86":26,"_34":138,"_40":139,"_88":131,"_90":140,"_66":48,"_92":-5,"_93":-7,"_73":141,"_95":142},{"_32":128,"_13":125,"_80":129,"_82":-5,"_83":58,"_84":57,"_86":26,"_34":130,"_40":22,"_88":131,"_90":132,"_66":48,"_92":-5,"_93":-7,"_73":133,"_95":134},"90570d90-a2f4-11f0-bf5a-0224a6c84d84","0199bad8-d137-74eb-96d3-6ff0ef55ac10",["D",1759783172569],"file","# HabitBox - Habit Tracker\n\nHabitBox is a modern and stylish habit tracking application built to help you stay consistent and achieve your goals.\n\n[View demo](https://whp-habit-tracker.web.val.run)\n\n## Features\n\n- **Create & Manage Habits:** Easily add new habits with custom names, descriptions, icons, and colors.\n- **Daily Tracking:** Mark habits as complete for the day with a single click.\n- **Visual Feedback:** A 90-day grid visually represents your progress for each habit.\n- **Modern UI:** A clean and dark-themed user interface.\n\n## How it works\n\nThis is a full-stack web application built with:\n\n- **Deno:** A modern and secure runtime for JavaScript and TypeScript.\n- **Hono:** A small, simple, and ultrafast web framework for the edge.\n- **React:** A JavaScript library for building user interfaces.\n- **SQLite:** A C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine.\n\nThe `server.tsx` file is the main server that handles API requests and serves the React application. The `client.tsx` file hydrates the application on the client-side. The routes and UI components are defined in `routes.tsx`.\n",[125],"a44f51f75a3201069a7b9428180974c2b3b5d4cd730f1b5dc15c2009ed1f075d","76e1de0e-3264-11f0-9183-569c3dd06744","464521c8-11e4-44a1-ba06-fc0039bc9dca",29,["D",1747406752100],5,"# React Router Hono Starter\n\nMinimal React Router + Hono starter example in [\"data mode\"][modes] with server-side rendering for Val Town\n\n[View demo][demo]\n\n## How it works\n\nThe `server.tsx` file is the main server that responds with an HTML stream, using React Router, or an API response.\nThe HTML includes a `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[155],"b740560111ede7f6f6839a473a9bd87458ce4b5e38bce6ec9334739dcc0c99a5",".vtignore",{"_32":166,"_13":164,"_80":167,"_82":-5,"_83":58,"_84":139,"_86":26,"_34":168,"_40":151,"_88":131,"_90":169,"_66":48,"_92":-5,"_93":-7,"_73":170,"_95":171},"1d3c27b8-a2e6-11f0-a47c-0224a6c84d84","1d3c2862-a2e6-11f0-a47c-0224a6c84d84",["D",1759776966344],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[164],"18f4273e0b959a6002030663e4e449119845617823d38fc9fbbb206c591a8ff5",["D",1759776395498],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019977b1-1bd1-730d-a575-2665305dd849","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019977b1-1bd1-730d-a575-2afdc309b42c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_210":206},"org",{"_11":12,"_203":204,"_205":206,"_177":178,"_207":208,"_209":48},"branch","displayName","WHP","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMzZ1Q1ZnYnREY3RBMjh5TWtPbU5vS01MejYifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":297,"_46":-5,"_173":48,"_49":50,"_174":50,"_175":-5,"_176":-5,"_177":178,"_179":81,"_180":26,"_181":26,"_182":-5,"_183":151,"_53":184,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":190,"_191":190,"_192":193,"_194":193,"_195":193,"_196":190,"_197":190,"_198":298,"_200":299,"_202":300,"_47":48},"tree",[275,276,277,278,279,280,281],"files",[275,276,277,278,279,280,281],"counts",{"_265":151,"_266":22,"_267":151,"_268":269,"_270":271},"contents",[240,241,242,243,244,245,246],"upstreamProject",{"_32":39,"_13":56,"_175":236,"_176":237,"_49":50,"_198":238},"upstreamBranch",{"_32":33,"_34":234,"_36":235,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747318612210],["D",1779898921971],"Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789567199&sig=2f7c39e250cd0ea78b937fd26a7da15dcd1417f81008535a8c641d1c0c56854a",{"_11":52,"_210":239},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789567199&sig=fae5a8a7d9015b956a0fe60c6ab21169e2ada2c167fa7e66377324ad4f64834f",{"_32":166,"_13":164,"_80":167,"_82":-5,"_83":58,"_84":139,"_86":26,"_34":263,"_40":151,"_88":131,"_90":169,"_66":48,"_92":-5,"_73":264},{"_32":157,"_13":155,"_80":158,"_82":-5,"_83":58,"_84":159,"_86":26,"_34":261,"_40":151,"_88":131,"_90":161,"_66":48,"_92":-5,"_73":262},{"_32":128,"_13":125,"_80":129,"_82":-5,"_83":58,"_84":57,"_86":26,"_34":259,"_40":22,"_88":131,"_90":132,"_66":48,"_92":-5,"_73":260},{"_32":253,"_13":254,"_80":255,"_82":-5,"_83":58,"_84":22,"_86":26,"_34":256,"_40":151,"_88":113,"_90":257,"_66":48,"_92":-5,"_73":258},{"_32":148,"_13":146,"_80":149,"_82":-5,"_83":58,"_84":20,"_86":26,"_34":251,"_40":151,"_88":131,"_90":152,"_66":48,"_92":-5,"_73":252},{"_32":109,"_13":106,"_80":110,"_82":-5,"_83":58,"_84":111,"_86":26,"_34":249,"_40":22,"_88":113,"_90":114,"_66":48,"_92":-5,"_73":250},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":85,"_86":26,"_34":247,"_40":22,"_88":89,"_90":91,"_66":48,"_92":-5,"_73":248},["D",1759776966360],[74],["D",1759776966353],[106],["D",1759776966349],[146],"c8f01a08-a2e4-11f0-822c-0224a6c84d84","client.tsx","0199bad8-d137-74eb-96d3-735cb094be00",["D",1759776395498],"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport ReactDOM from \"https://esm.sh/react-dom@19/client\";\nimport { createBrowserRouter, RouterProvider } from \"https://esm.sh/react-router\";\nimport routes from \"./routes.tsx\";\n\nconsole.log(\"client\");\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.hydrateRoot(\n document, \n \n);",[254],["D",1759783172569],[125],["D",1759776966341],[155],["D",1759776966344],[164],"pulls","branches","forks","envVars",{"_272":151,"_274":151},"connections",{"_272":151,"_273":151},"count","unfilledCount","emptyCount",{"_32":166,"_13":164,"_80":167,"_82":-5,"_83":58,"_84":139,"_86":26,"_34":168,"_40":151,"_88":131,"_90":169,"_66":48,"_92":-5,"_93":295,"_73":296},{"_32":157,"_13":155,"_80":158,"_82":-5,"_83":58,"_84":159,"_86":26,"_34":160,"_40":151,"_88":131,"_90":161,"_66":48,"_92":-5,"_93":293,"_73":294},{"_32":128,"_13":125,"_80":129,"_82":-5,"_83":58,"_84":57,"_86":26,"_34":130,"_40":22,"_88":131,"_90":132,"_66":48,"_92":-5,"_93":291,"_73":292},{"_32":253,"_13":254,"_80":255,"_82":-5,"_83":58,"_84":22,"_86":26,"_34":288,"_40":151,"_88":113,"_90":257,"_66":48,"_92":-5,"_93":289,"_73":290},{"_32":148,"_13":146,"_80":149,"_82":-5,"_83":58,"_84":20,"_86":26,"_34":150,"_40":151,"_88":131,"_90":152,"_66":48,"_92":-5,"_93":286,"_73":287},{"_32":109,"_13":106,"_80":110,"_82":-5,"_83":58,"_84":111,"_86":26,"_34":112,"_40":22,"_88":113,"_90":114,"_66":48,"_92":-5,"_93":284,"_73":285},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":85,"_86":26,"_34":87,"_40":22,"_88":89,"_90":91,"_66":48,"_92":-5,"_93":282,"_73":283},[],[74],[],[106],[],[146],["D",1759776395498],[],[254],[],[125],[],[155],[],[164],["D",1759776395498],{"_11":12,"_210":206},{"_11":12,"_203":204,"_205":206,"_177":178,"_207":208,"_209":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_198":-5,"_231":334,"_335":336,"_337":338,"_339":48,"_340":48,"_341":48,"_342":26,"_343":-5,"_344":-7,"_345":-7,"_346":151,"_347":48,"_348":48,"_349":-5,"_350":48,"_351":48,"_352":48,"_353":-5},"ENV",{"_305":306,"_307":308,"_309":16,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Compare

Mergewillemhelmet/mainintojxnblk/main

README.md+15-14

routes.tsx+339-63

Hserver.tsx+101-6

.vtignore+6-0

AGENTS.md+290-0

deno.json+37-0